Visual Web Developer™ 2005 Express Edition For Dummies - Alan Simpson

280 Part III: Personalization and Databases

If your GridView supports editing, deleting, or selecting, the Selected Fields list will include an item named CommandField. That item represents the leftmost column in the table where Edit, Delete, and Select links are placed.

If you don’t want a particular column to show up in the GridView, just remove its name from the list of Selected Fields. For example, I could remove the ItemId field from the current GridView control by clicking ItemId in the Selected Fields list and then clicking the black X button just to the right of the list.

When you’ve finished formatting fields in the Fields dialog box, click OK to save your changes and return to the page. To get an accurate picture of how your selections will play out, be sure to view the page in a Web browser.

Styling the whole GridView

You can style the GridView, as a whole, much as you would any other item. Right-click the control, choose Style, and use the Style Builder to define the style.

You can also style the control via its Properties sheet. The Properties sheet for GridView provides extremely fine-grained control over the exact appearance and behavior of every GridView nook and cranny. For example, if you’ve enabled Paging in your control and want to set the number of rows that appear on each page, change the PageSize property under Paging to however many records you want each page to show.

If you want to apply a consistent look and feel to GridView controls used throughout your site, consider creating a CSS class. For example, you could create a CSS style rule named GView that looks like this:

.GView

{

border-right: #191970 thin solid; border-top: #191970 thin solid; font-size: smaller;

border-left: #191970 thin solid; color: #483d8b;

border-bottom: #191970 thin solid; border-collapse: collapse; background-color: #f0f8ff;

}

Binding to DropDownList Controls

Even though a DropDownList control isn’t a data control, per se, you can bind data from a database to that control. This is especially useful when the

Chapter 12: Using Data in Web Pages 281

drop-down list needs to show current data from the database — for example, all users, all items in an Items table, or all users who have made purchases. Whatever you choose from the drop-down list can then be used as a filter for specifying rows to display in a nearby data-bound control.

For example, suppose you want to create a page in which you can choose any user in your database and see his or her transactions and profile properties (or whatever) only. Your first move is to create some means of choosing one user. A drop-down list might work nicely for that.

To create a drop-down list that shows current database data, follow these steps:

1.Create or open the .aspx page on which you want to place the control.

2.From the Standard category in the Toolbox, drag a DropDownList control onto the page.

By default, the control is named DataList1 (assuming it’s the first DropDownList control you added to the page). It’s important to know the name of the control because to use the control’s value for anything useful later, you must refer to it by exactly that name.

3.On the DataList control’s Common Tasks menu, select Enable Postback.

The above step is important if you intend to use the drop-down list as a means of filtering rows in a table.

4.From the Common Tasks menu, select Choose Data Source.

5.On the wizard page that opens, choose New Data Source.

6.On the first wizard page, choose New Data Source from the drop-down list.

7.Go through the usual steps in the first wizard pages (that is, choose Database, click OK, choose your usual connection string, and click Next).

At this point, you’re in the Configure SQL Statement page.

8.Choose the table or view that contains the columns you want to show in the drop-down menu.

For example, if you want the drop-down menu to show an alphabetical list of all current users, you could choose vw_aspnet_MembershipUsers.

9.Choose the column (or columns) you want to use for the drop-down menu.

For example, choose UserName to make the drop-down list show a list of user names.

10.Use the ORDER BY button to sort the items into alphabetical order.

When you’ve finished, you can click Next (as necessary) and then Finish to work your way back to the control.

282 Part III: Personalization and Databases

To test the drop-down list, you have to view the page in a Web browser. Using the example in which I opted to show the UserName and Email columns from the vw_aspnet_MembershipUsers view, my drop-down list looks like the one shown in Figure 12-22.

Figure 12-22:

A Drop

DownList control showing data from vw_

aspnet_

Membership

Users.

Using a DropDownList to filter records

To use a DropDownList control to filter records in another data-bound control (such as a GridView), several steps are required. I’ll use a GridView control to explain the basic process, but the same idea works with other Data controls described later.

The first step is to add the control to the page and bind it to the values you want the control to show. For example, suppose that after you choose a user name from the drop-down list, you want to see all the transactions that user has made. You could get that result by dragging a GridView control to the same page as the DropDownList control and using the drop-down list control to filter the records it displays.

Any time you add a second Data control to a page, you want to be sure to choose <New Data Source...>, and not try to use the same data source that the first control uses. That’s because the data source defines the exact rows and columns that the control will show. And the rows and columns the second control shows will be different from what the first control shows. By default, the new data source is named SqlDateSrc2.

When you choose a connection string, you want to reuse the same connection string you use for everything else. That’s because the connection string only tells the control where the database is located — it doesn’t specify any tables or views within the database.

When you’re choosing a table, view, or column, choose one that has the same column as the DropDownList control; UserName, in this example. That’s because rows to be retrieved need to be filtered by values in that column name.

Chapter 12: Using Data in Web Pages 283

The DetailedUsersItemsView view (described in Chapter 11) contains lots of information about transactions, and includes a UserName field, so you could choose that as the view. Then, just choose the columns you want the GridView control to show, as shown in Figure 12-23. You can also choose a sort order using the ORDER BY button.

Figure 12-23:

Columns to show in the

GridView control selected.

The critical step in the filtering process is limiting records to those that match the name in the DropDownList. Click the WHERE button to get started on that. Then set your options as follows:

Column: The name of the column that contains the value needed for filtering; UserName in this example.

Operator: This is typically the = operator, but it can be any available operator.

Source: Where the value to be searched for comes from. In this example, that would be Control because the value to look for is in a DataList control.

Control ID: The name of the control that contains the value to look for; DropDownList1 in this example.

So in this example, the selections would look like Figure 12-24. Those selections are just a graphical way of saying “Retrieve only rows in which the UserName column’s value equals the value of the control named

DropDownList1.”

You must remember to click Add, at which point the selections get translated into SQL. Click OK, click Next, and then click Finish to work your way back to the page.

To test the page, view it in the browser. Initially you’ll see just the DropDownList control. To view any user’s transactions, select that user’s name from the dropdown list. The GridView control “re-filters” each time you make a selection, so you can check out different users. Figure 12-25 shows an example in which Carol is selected in the DropDownList control, so only her transactions are visible in the GridView control below the DropDownList control.

284 Part III: Personalization and Databases

Figure 12-24:

Retrieving only the records that match the

UserName

in Drop

DownList1.

Figure 12-25:

GridView control, showing only the records for selected user Carol.

In Figure 12-25, I gussied up the GridView control a bit, using techniques described in the preceding section. I also typed some text directly onto the page to clarify what’s going on.

Viewing and editing user properties

If you added profile properties to your site, sometimes you want to see and edit the properties of your user profiles. The tricky part is that you can’t use the normal syntax such as Profile.propertyName to refer to a specific user’s properties. That’s because that standard syntax always refers to whoever is viewing this page. When you’re viewing the page, that’s always going to be you (well, yeah), so you’d see only your own profile properties.

Chapter 12: Using Data in Web Pages 285

To see the properties of some other user, use the following syntax instead:

Profile.GetProfile(UserName).propertyName

where UserName is the name of the user for which you want to view a profile, and propertyName is the name of the property. If the UserName value is stored in a control, like DropDownList1, then UserName is actually the value of that control, as given here:

Profile.GetProfile(DropDownList1.SelectedValue).propertyName

So, if the name Bob is currently selected in the control named DropDownList1, then Profile.GetProfile(DropDownList1.SelectedValue).FirstName refers to user Bob’s LastName property.

Given that, you could add a table to the page that contains a Textbox control for each profile property you want to display. For example, Figure 12-26 shows some Textbox controls, and their names, in a page with a drop-down list control on it. I’ve also pointed out the names of the drop-down list control (DropDownList1) and the button (Button1), as those names are important programmatically.

			txtFirstName
			txtLastName
			txtAddress1
Figure 12-26:
			txtAddress2
Textbox
			txtCity
controls that
			txtStateProv
can be used
			txtZIPpostal
to show
			txtPrefTheme
profile
			Button1
properties.

Each time you choose a name from the drop-down list, the Textbox controls need to be populated with properties from the currently-selected user, which means they have to be updated every time the value in the drop-down list changes. To make that happen, double-click the drop-down list control to get

286 Part III: Personalization and Databases

to its SelectedIndexChanged event handler. Then type in the necessary code to populate each Textbox control. So the whole C# procedure looks like this:

//Populate Textbox controls with selected user’s profile properties. protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

{

txtFirstName.Text = Profile.GetProfile(DropDownList1.SelectedValue).FirstName; txtLastName.Text = Profile.GetProfile(DropDownList1.SelectedValue).LastName; txtAddress1.Text = Profile.GetProfile(DropDownList1.SelectedValue).Address1; txtAddress2.Text = Profile.GetProfile(DropDownList1.SelectedValue).Address2;

txtCity.Text = Profile.GetProfile(DropDownList1.SelectedValue).City; txtStateProv.Text =

Profile.GetProfile(DropDownList1.SelectedValue).StateProvince; txtZIPpostal.Text =

Profile.GetProfile(DropDownList1.SelectedValue).ZIPPostalCode; txtCountry.Text = Profile.GetProfile(DropDownList1.SelectedValue).Country; txtPrefTheme.Text =

Profile.GetProfile(DropDownList1.SelectedValue).PreferredTheme;

}

To allow editing you’d need to include a button like the Submit button in the EditProfile.aspx page from Chapter 9. But, again, replace Profile. with

Profile. GetProfile(DropDownList1.SelectedValue). as shown here:

//Replace current user’s profile properties with contents of Textbox controls. protected void Button1_Click(object sender, EventArgs e)

{

Profile.GetProfile(DropDownList1.SelectedValue).FirstName = txtFirstName.Text;

Profile.GetProfile(DropDownList1.SelectedValue).LastName = txtLastName.Text;

Profile.GetProfile(DropDownList1.SelectedValue).Address1 = txtAddress1.Text;

Profile.GetProfile(DropDownList1.SelectedValue).Address2 = txtAddress2.Text;

Profile.GetProfile(DropDownList1.SelectedValue).City = txtCity.Text;

Profile.GetProfile(DropDownList1.SelectedValue).StateProvince =

txtStateProv.Text;

Profile.GetProfile(DropDownList1.SelectedValue).ZIPPostalCode =

txtZIPpostal.Text;

Profile.GetProfile(DropDownList1.SelectedValue).Country = txtCountry.Text;

Profile.GetProfile(DropDownList1.SelectedValue).PreferredTheme =

txtPrefTheme.Text;

}

Assuming you add that to the previous page example, when you choose a user from the drop-down menu, that page shows all profile properties for that user as well as all of that user’s transactions, as shown in Figure 12-27.

Chapter 12: Using Data in Web Pages 287

Figure 12-27:

Page shows profile properties and transactions for selected user.

Using the DetailsView Control

The DetailsView control in the Toolkit’s Data category is similar to the GridView in that you can use it to show data as well as to edit and delete data. The main difference is that the GridView is designed to show multiple rows and columns in a tabular format, and DetailsView is designed for working with one record at a time.

For readers who are familiar with Microsoft Access, a GridView is like a datasheet and a DetailsView control is more like a form. The FormView control is an older ASP.NET 1 control that isn’t quite as easy to use as the new ASP.NET 2.0 DetailsView control.

Binding a DetailsView control

The DetailsView control allows you to add, edit, and delete records in a table. However, it can only do so if it’s bound to a single table that has a primary key. If you bind a DetailsView control to a view or to multiple tables, you can still see data in the control, but you can’t edit data in the underlying table(s).

288 Part III: Personalization and Databases

Even if you do bind a DetailsView control to a single table that has a primary key, you still won’t be able to use it to edit data in the underlying table unless you take some extra steps during the binding process. From start to finish, the steps would be:

1.Drag a DetailsView control from the Data category of the Toolbox onto the page.

2.On its Common Tasks menu, click Choose Data Source and choose <New Data Source...>. The Data Source Configuration Wizard opens.

3.The next steps are the same as always: Choose Database, click OK, use the same connection string you always use, and click Next.

4.If you want to use DetailsView to add/edit/delete table records, choose a table that has a primary key.

I’ll use my sample Items table to illustrate.

5.Click * to choose All Columns (if you intend to use the control to enter/edit/delete records).

Optionally you can use the WHERE and ORDER BY buttons in the usual manner to limit records the control retrieves to set a sort order.

6.If you want to be able to add/edit/delete records, click the Advanced button.

7.In the dialog box that opens, choose both options, as shown in Figure 12-28.

Figure 12-28:

Choose both options if you want to use

Details View to modify data.

That scary “optimistic concurrency” thing is just a means of dealing with situations in which two people edit a record at the same time. Choosing that option is a good thing because it basically says to the app “You deal with that headache, so I don’t have to.”

8.Click OK, then click Next and Finish, as appropriate, to return to the page.

Chapter 12: Using Data in Web Pages 289

Assuming you didn’t skip Steps 6 and 7 above, the Common Tasks menu for the DetailsView control shows options for inserting, editing, and deleting records as shown in Figure 12-29. There’s also an Enable Paging option, which, if selected, lets you page through multiple records in the underlying table.

Figure 12-29:

Common Tasks menu for a

Details

View control.

Formatting a DetailsView control

Formatting a DetailsView control is very similar to formatting a GridView. As always, you can use the Auto Format option on Common Tasks to choose a general appearance for the control. Use the Edit Fields option to choose the order of items in the control and currency/date formats.

In Figure 12-30, for example, I moved the OurItemId control to the top of the list under Selected Fields. Then I clicked the ItemPrice field name and set its DataFormatString to {0:c} to display the ItemPrice in currency format.

Figure 12-30:

The Fields dialog box for a

Details

View

control.