Connecting to Your Database

Editing Data on a Web Page

So far we've focused on simply displaying data on a Web page. How do you build Web pages that allow users to edit data?

Editing data on a Web page is more complex than editing data on a Windows Form. Remember that when you use bound controls on a Web page, the bound controls use the data source to generate HTML. If you display data using a bound TextBox control and the user modifies the contents of the TextBox, that change does not automatically occur in the data source. To build a Web page that allows the user to edit data, you have to display data, give the user the ability to edit that data, and then have your ASP.NET code respond to those changes and act accordingly.

The stateless nature of Web applications also complicates building Web pages that let the user modify data. Say you display the contents of a row of data in a series of TextBox controls. Once the user modifies the contents of the row and clicks an Update button on the page, how do you locate the row you want to modify and apply those changes? Did you cache the data in the DataSet somewhere, such as in ViewState or the Session object? Do you have to query your database to re-fetch that row of data? What about optimistic concurrency? How can you tell if the data has changed since the user first requested it?

Using the DataGrid to Simplify Editing Data

Let's start slowly. First we'll focus on using the DataGrid to add features to the Web page that let the user select and edit rows. The goal is to build a Web page like the one shown in Figure 14-4.

Figure 14-4

A sample Web page that allows you to edit data

Just as the DataGrid simplifies the process of building a user interface that supports paging, it also simplifies the process of building the user interface to let users select and edit rows. You can right-click a DataGrid in Visual Studio .NET and select Property Builder from the context menu to launch the DataGrid's Property Builder, shown in Figure 14-5. From this Property Builder, you can control which columns of data appear in the grid and whether the DataGrid will allow the user to edit their contents, and you can add buttons to the grid for editing, updating, and deleting rows.

Figure 14-5

Adding editing options using the DataGrid's Property Builder

Handling the DataGrid's Editing Events

However, setting properties on the DataGrid using the Property Builder doesn't actually give the user the ability to change the contents of the data to which the DataGrid object is bound.

The DataGrid shown in Figure 14-5 has an Edit, Update, Cancel column and a Delete column. If you bind this DataGrid to a data source, your Web page will look like the one shown in Figure 14-6.

Figure 14-6

A sample Web page that uses the DataGrid's editing features

Let's say the user clicks the Edit button for the first item in the shopping cart. The DataGrid doesn't let the user edit the contents of the row directly. Instead, the button forces the page to post back to the server where the DataGrid fires its EditCommand event. It's up to you to add code to this event to set the DataGrid's EditItemIndex property to the appropriate value.

Then, when you call the DataGrid control's DataBind method, the DataGrid will include TextBox controls in the HTML table so that the user can modify the contents of the row. The DataGrid also adds Update and Cancel buttons for that particular row.

Submitting Changes to Your Database

When the user is satisfied that he or she has made the appropriate changes to the desired row and clicks the Update button, the DataGrid's UpdateCommand event fires. You can use the event's arguments to determine which row the user modified, as well as the current contents of the row, but it's up to you to supply the logic to submit the modified contents of the row to your database.

Applying Changes to a DataSet

If you want to apply the changes to a DataSet, you can use the UpdateCommand event's arguments to locate the corresponding DataRow, apply the changes, and submit the changes using the DataAdapter. The following code snippet uses the event's arguments to extract the name of the product in the shopping cart that's been modified as well as the new quantity. The code then submits this change using a DataAdapter.

Visual Basic .NET

Private Sub gridCart_UpdateCommand(ByVal source As Object, _                                    ByVal e As DataGridCommandEventArgs)     Dim daCart As New OleDbDataAdapter()     Dim tblCart As New DataTable()           Dim vueCart As New DataView(tblCart)     vueCart.Sort = "ProductName"     Dim strNewQuantity As String      strNewQuantity = CType(e.Item.Cells(2).Controls(0), TextBox).Text     Dim intIndexToEdit As Integer     intIndexToEdit = vueCart.Find(e.Item.Cells(1).Text)     vueCart(intIndexToEdit)("Quantity") = CInt(strNewQuantity)     daCart.Update(tblCart) End Sub

Visual C# .NET

private void gridCart_UpdateCommand(object source,                                      DataGridCommandEventArgs e) {     OleDbDataAdapter daCart = new OleDbDataAdapter();     DataTable tblCart = new DataTable();           DataView vueCart = new DataView(tblCart);     vueCart.Sort = "ProductName";     string strNewQuantity;     strNewQuantity = ((TextBox) e.Item.Cells[2].Controls[0]).Text;     int intIndexToEdit;     intIndexToEdit = vueCart.Find(e.Item.Cells(1).Text);     vueCart[intIndexToEdit]["Quantity"] = Convert.ToInt32(strNewQuantity);     daCart.Update(tblCart); }

Building Your Own Update Queries

The previous code snippet used the event's arguments to extract the name of the product in the shopping cart that's been modified as well as the new quantity. Rather than use that data to modify the contents of a DataSet and then submit those changes via a DataAdapter, you could use that same information to build your own UPDATE query. In the previous example, you could easily build a query like

UPDATE ShoppingCarts SET Quantity = <NewQuantity>     WHERE ProductName = <ProductName> AND ShoppingCartID = <SessionID>

The ShoppingCart Sample

On the companion CD, you'll find a sample Web application called ShoppingCart. This Web application lets the user browse through the Northwind catalog and fill a shopping cart. The user can add items to the cart from the catalog. The user can also modify the contents of the cart by removing items from the cart or changing the quantity for a particular item. The application also allows the user to submit the order, which is then stored in the Northwind database's Order Details table.

There are two Web pages in the application: StoreCartInDatabase and StoreCartInViewState. Each page offers the user the same functionality. They simply differ in where they store the contents of the user's shopping cart. As their names imply, StoreCartInDatabase stores the contents of the user's shopping cart in the database and StoreCartInViewState stores the cart in ViewState.

If I had to choose one of the two approaches for a Web ordering system, I'd store the contents of the shopping cart in the database, but I thought I'd include the ViewState solution as well.



Microsoft ADO. NET Core Reference
Microsoft ADO.NET (Core Reference) (PRO-Developer)
ISBN: 0735614237
EAN: 2147483647
Year: 2002
Pages: 104
Authors: David Sceppa

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net