Visual Web Developer™ 2005 Express Edition For Dummies - Alan Simpson
.pdf
260 Part III: Personalization and Databases
Chapter 12
Using Data in Web Pages
In This Chapter
Binding data to pages
Using the Data Source Configuration Wizard
Using the GridView and DetailsView controls
Using the DataList and FormView controls
Visual Web Developer is a tool for building dynamic, data-driven Web sites — dynamic because the information you display on these Web pages doesn’t have to be the same for everyone. You can get your site to
create a page that’s appropriate for every user, showing only the appropriate (user-specific) data from a database.
Take a big search engine like Google for instance. When you submit a search string to Google, you’re actually submitting a query to its database. What its database spits back are pages and pages of links to Web pages that contain the word or phrase you searched for. In other words, Google’s Web site dynamically created the page you see using data from its database.
To display data from your site’s database in Web pages, you bind data from the database to controls on the page. While sitting on your server, the control is just a placeholder that contains no data. When a Web site visitor requests the page, the control can then be filled with whatever data is appropriate to that specific request.
In other words, if 100 different people visit the page, each might see something different, just as 100 different people doing different Google searches see 100 different lists of things in the page that Google sends them. What makes the page dynamic is that the page contains only data that is relevant to the user’s request — and that changes from user to user.
This chapter explores how to use dynamic content in your own Web pages: how to bind the data to controls and how to place that data into your Web site.
262 Part III: Personalization and Databases
Binding Data to Controls
You can bind data to all kinds of controls in Visual Web Developer. But before I get into specific controls, it’s worth reviewing some things that apply to all data-bound controls. For openers, you always put data-bound controls on Web form (.aspx) pages. So the first step is to open or create, in Design view, the page on which you want to place the control.
Next, you drag a data-bound control from the Toolbox onto the page (or, if the current page has a Master Page, you drag the control into the Content area of the page). The control won’t look like much in Design view. It’s just a placeholder; don’t be alarmed by its ugly appearance.
The control won’t automatically be bound to anything specific in your database. You have to tell it what to bind to. For this you can use the Data Configuration Wizard
Using the Data Configuration Wizard
To bind a control to data, you use the Data Configuration Wizard. Typically, you launch that by opening the control’s Common Tasks menu, clicking Choose Data Source, and then choosing New Data Source. Figure 12-1 shows an example: I’ve dragged a DataList control from the Toolbox onto a page, and am about to bind it to a data source.
Drag
Figure 12-1:
Preparing
to bind a
DataList control to a data source.
Specifying a data source and connection
The first wizard page asks for the type of data source you want to get data from. Choose Database to get data from a SQL Server database. A name for
Chapter 12: Using Data in Web Pages 263
that source, usually SqlDataSource1, appears in the text box (as shown in Figure 12-2).
Figure 12-2:
Choosing
SQL Server
as the data
source.
You don’t need to change or worry about the name that appears in the text box, it will just be the control’s name within the current page. You can click Next to move on.
The next wizard page asks you to choose a connection. Typically, the connection to your database has already been defined in your Web.config file, so you should always use that one. If that’s the case, just choose that existing connection string from the drop-down list, as shown in Figure 12-3.
Defining the connection string
The first time you add a data control to a page, there may not be a name to choose from in the drop-down list. If that’s the case, click New Connection. Then in the dialog box that opens, click Browse and navigate to the folder that contains the database file. For example, if you saved your site as MyVWDSite in your My Documents folder, you’ll need to open MyVWDSite in the My Documents folder, then the App_Data folder, and finally click on ASPNETDB.MDF, and click Open. Then click OK.
A second page will ask if you want to save the connection string in your Application Configuration file. Choose Yes, and give the connection string a name. For example, I named mine MyConnectionString. After you’ve defined a connection string, there’s no need to create others. Each time you add a Data control to a page, you can use the same connection string. That’s because the connection string just tells Visual Web Developer where the database (.mdf file) is located. It doesn’t specify any particular tables within that database.
264 Part III: Personalization and Databases
Figure 12-3:
Once you create a connection string, use it every time.
Configuring the Select Statement
The next wizard page, titled Configure the Select Statement (and shown in Figure 12-4), is where you tell the wizard exactly what you need from the database. Here you specify what you want the control to show on the page. There are two ways you can go about doing that:
Figure 12-4:
The
Configure
the Select
Statement
page.
Specify a Custom SQL Statement or Stored Procedure. This is the option to choose if you’re creating a complex query with multiple connected tables involved. It takes you to the Query Builder, where you can create the SQL statement using the same technique used at the end of Chapter 11 to construct views. If this approach looks a bit intimidating, don’t worry; it’s rarely (if ever) actually necessary.
Specify Columns from a Table or View. This is the cushy (and more commonly used) option. You can easily grab what you want from wherever it is without going through the whole Query Builder rigmarole.
Chapter 12: Using Data in Web Pages 265
Choosing a table or view
If you choose Specify Columns from a Table or View, the next step is to tell the wizard which table or view contains the data to bind to. You can bind to any table or view you created yourself. If you need data from the membership system, you can bind to any of the vw_aspnet_ views in the Name dropdown list shown in Figure 12-5.
Figure 12-5:
Choose whichever table or view
contains the data that the control needs.
Choosing columns to retrieve
After you choose a table or view, names of columns (fields) in that table or view appear below, each with a check box. That’s where you specify which column (or columns) contain the data you need. To get all columns, choose the * check box. But if you don’t need all the columns, then choose only those columns you do need.
For example, let’s say I chose Items as the table to retrieve data from. I really don’t need to be broadcasting my database’s primary keys to the general public via the Internet, so I chose to include every column except ItemId, as shown in Figure 12-6.
While you’re choosing options, you’re actually creating the SQL statement that appears below the column names.
To see what the SQL statement you’ve created so far will retrieve from the database, click Next, then click Test Query. The results of executing the SQL statement appear in a window. Using the options in Figure 12-6 as an example, the Test Query results display all the records from my Items table, minus the ItemId field, as shown in Figure 12-7. (Note that this is exactly the data needed to show a product catalog on a Web page.)
266 Part III: Personalization and Databases
Figure 12-6:
A request for all columns except
ItemId
from the
Items
table.
Figure 12-7:
Results of testing the query from Figure 12-6.
As always, do not be concerned about how the data looks, or the arrangement of the columns at this stage. Here you’re just saying what you want. You’ll deal with how it looks on the page later.
If the results you get from your query are not what you expected, no big deal. Just click the Previous button to return to the Configure the Select Statement page and work on the query some more.
Chapter 12: Using Data in Web Pages 267
If you need data from multiple related tables, and have already created a view that connects the tables, then you can choose that view as your source. For example, if you need information about transactions, you could choose one of the views described at the end of Chapter 11, then specify which columns of information you need about each transaction, as shown in Figure 12-8.
Figure 12-8:
Choosing columns to display from a view.
Testing that query reveals a set of records in which each record represents a transaction made to date. Each transaction would include the name and e-mail address of the user who made the purchase, as shown in Figure 12-9.
Figure 12-9:
Results of executing the query in Figure 12-8.
Specifying a sort order
By default, records your query retrieves will be listed in the same order they’re arranged in the table. If you want a different sort order — say,
268 Part III: Personalization and Databases
alphabetical by name, oldest to newest, or something like that — click the ORDER BY button. The Add ORDER BY Clause dialog box shown in Figure 12-10 opens.
Figure 12-10:
The Add
ORDER BY Clause dialog box.
In this dialog box, you can choose how you want records in the query results sorted. For example, if the table or view contains a UserName field, you could choose UserName and Ascending to alphabetize rows by user name. If the table or view contains a TransactionDate, and you want to list rows from newest to oldest, choose TransactionDate as the Sort by column and Descending as the order.
As always, you can choose multiple columns to create sorts within sorts. When you’ve finished choosing your sort column(s) and orders, click OK. The SELECT statement you’re creating gains an ORDER BY clause to order records by whatever columns you specified.
Showing only unique values
Sometimes you want to extract unique records from a table, so there is no duplication of information in the data returned. That’s often the case when you want to use the query results as menu items in a drop-down list.
For example, suppose you want to choose a user (to view their transactions) from a drop-down menu. The menu shouldn’t contain all user’s names, only users who have records in the Transactions table.
A drop-down list usually only needs one or two columns, in this case they would most likely be UserName or Email, or both. In Figure 12-11, I opted to retrieve only the Email and UserName columns from the view.
Chapter 12: Using Data in Web Pages 269
Figure 12-11:
This option, when checked, shows only unique records.
If it were not for the selected check box (Return Only Unique Rows) in Figure 12-11, the query in Figure 12-11 would return a row for every transaction to date, repeating the UserName each time, as shown in the left side of Figure 12-12. Some names are duplicated because any one user might have many transactions. Choosing Return Only Unique Rows eliminates duplicates from the returned rows, leaving only a list of unique names as shown in the right side of Figure 12-12.
All rows |
Only unique rows |
Figure 12-12:
Showing duplicate and then unique values.
Retrieving specific rows (filtering)
More often than not, you want to bind a data control to some of the records in a table or view but not to all those records. For example, you might want to extract records only for user Bob or Alice from the view to show that person what products they’ve purchased. Or, you might want to see a list of everyone who purchased a specific item rather than a list of every transaction ever made.