Use a Single Web Form to Update Multiple Lookup Tables

8.6 Use a Single Web Form to Update Multiple Lookup Tables
As with the second tutorial(8.2), this example will show you how to update multiple
lookup tables-this time using a Web Form.
Creating a Web Form for viewing multiple lookup tables would take about the same if
not less code than performing the same task using the Windows Form. Updating, adding,
and deleting data takes a bit more work, though. This How-To will show you how to
accomplish this task by using the DataGrid control and show you how to take advantage
of Session variables and paging within the data grid when you're manipulating data.
Technique
The DataGrid control is a powerful control, as you saw in Chapter 5, "Working with Data
on Web Forms," but when programming in Web Forms, it takes some getting used to.
Because the Web Forms are stateless, you need to keep reminding the data grid what it is
bound to.
Also, even though you declare a variable at the module level behind the form, you will
notice that whenever the form goes back to the server for information, you lose the values
of your variables. The workaround for this is the use of the Session object.
Note
A full discussion of State management in .NET and the various options is
presented in Chapter 5. This also includes how to use the options for the
data grid manipulation portion of this How-To.

The other major issue with this How-To is managing the paging of the DataGrid control,
covered in Chapter 4. You will quickly learn the steps of creating the Web Form that
allows users to update Lookup tables.
Steps
Open and run the VB.NET -Chapter 8 solution. From the main Web Form, click on the
hyperlink with the caption How-To 8.6: Use a Single Web Form for Updating Multiple
Lookup Tables. Click on the first choice, Categories, in the list box labeled Lookup Table
to Edit. The data grid will then appear. The grid will be filled in with the data of the table
you chose. Your page will then look like the page displayed in Figure 8.9.
Figure 8.9. On this page, you can add, edit, and delete information for all your

simple lookup tables.

You can now add data into the data grid by clicking on the Add New button, located
under the Error box. When you click on the Add New button, an entry is added to the
data grid, and you are placed in Edit mode, shown in Figure 8.10.
Figure 8.10. Adding new data to your lookup tables using the DataGrid control.

After entering the data into the fields, you will click Update. The values are then saved
back to the server. If you don't want to save the new entry, click the Cancel button, and
the data grid makes the entry disappear.
Tip
You will notice that the look of the columns is a little congested and changes when you
go to edit the data. You can avoid this by creating and using templates with the data grid.
Of course, if you are using templates with the data grid, you have to change the template
based on the lookup table you were using.

Tip

You will also notice that the CategoryID field has been disabled and can't
be edited. This is through the use of a method, FillSchema, which fills
data table with schema information from the record source. In this case,
FillSchema passed on the information that the CategoryID was an
AutoIncrement field, and the data grid was smart enough to handle it.

When you click on the Edit button, the page will look similar to Figure 8.10, except that
data already will be present in the fields. When you click Delete, the entry is deleted.
Any errors that might occur, such as from data integrity errors, will appear in the text box
labeled Errors. If you try to delete a current category and Products uses that category, for
example, then SQL Server causes an error to occur, and the page reports the error
because of code created.

1. Create a Web Form. Then place the controls shown in Figure 8.9 with the
properties shown in Table 8.8.
Table 8.8. Label, TextBox, ListBox, and Command Button Control Property
Settings
Object Property Setting
DOCUMENT bgColor buttonface
Label Name Label1
Text Lookup Table to Edit:
ListBox Name lstLookupTables
AutoPostback True
Label Name Label2
Text Lookup Table Data:
DataGrid Name dgLookupData
AllowPaging True
PageSize 5
Label Name Label3
Text Errors:
TextBox Name txtError
ForeColor Red
ReadOnly True
TextMode MultiLine
Button Name btnAdd
Text Add New
HyperLink Name hplReturnToMain
NavigateURL wfrmMain.aspx
2. On the newly created lstLookupTables ListBox control, click the Build button next
to the Items property, which is a collection of names of the lookup tables to edit.
After you have clicked the Build button, the ListItem Collection Editor opens.
Enter the values Categories, Regions, and Territories, as shown in Figure 8.11.
Click OK to accept the entries.

Figure 8.11. These values allow you to update multiple lookup tables from a
single Web Form.

Tip
To make this truly data driven, you could have these entries in a
table in your database. Then you could point the DataSource
property of the list box to the table. You could also have the table
contain the names of the templates you wanted to use.
A different approach was taken here so that you would not have to
modify your copy of the Northwind database.
3. On the dgLookupData DataGrid control, click the Build button next to the
Columns property. You will then be brought into the Columns tab of the
dgLookupData Properties dialog box. Click on the plus sign by the Button column
in the Available Columns list. You will then see the list of available button types
you can use. Select the Edit, Update, Cancel, and Delete buttons. Set each of these
buttons to have the PushButton button type. After you have made these selections,
the dialog box will look like Figure 8.12. Click OK to accept the entries.
Figure 8.12. Add some buttons to your DataGrid control.

4. Now that you have added some buttons to the DataGrid control, you still have to
tell the control how to react to the buttons. You will do that using events in code,
but we need to add some tags to the HTML. The tags you will add are as follows:
5. OnUpdateCommand="dgLookupData_Update"
6. OnCancelCommand="dgLookupData_Cancel"
7. OnEditCommand="dgLookupData_Edit"
8. OnDeleteCommand="dgLookupData_Delete"
Click on the HTML tab of the Web Form in Visual Studio. Then you can see the
HTML and insert the tags. By looking at the HTML shown in Figure 8.13, you can
see where to put the tags. Of course, your HTML won't be as nicely laid out as this
figure because Visual Studio scrunches it up.

Figure 8.13. Add the tags in this step to tie in the events to the buttons in the
DataGrid control.