Evjen c07.tex V2 - 01/28/2008 2:01pm Page 335 Chapter 7: Data Binding in ASP.NET 3.5 your existing SqlDataSource control by adding an UpdateCommand attribute. This tells the data source control what SQL it should execute when it is requested to perform an update. Listing 7-35 shows the code to add the UpdateCommand attribute. Listing 7-35: Adding an UpdateCommand to a SqlDataSource control < asp:SqlDataSource ID="SqlDataSource1" Runat="server" SelectCommand="SELECT * FROM [Customers]" ConnectionString=" < %$ ConnectionStrings:AppConnectionString1 % > " DataSourceMode="DataSet" UpdateCommand="UPDATE [Customers] SET [CompanyName] = @CompanyName, [ContactName] = @ContactName, [ContactTitle] = @ContactTitle, [Address] = @Address, [City] = @City, [Region] = @Region, [PostalCode] = @PostalCode, [Country] = @Country, [Phone] = @Phone, [Fax] = @Fax WHERE [CustomerID] = @original_CustomerID" > Notice that the UpdateCommand includes a number of placeholders such as @CompanyName , @Country , @Region ,and @CustomerID . These are placeholders for the corresponding information that will come from the selected row in GridView. In order to use the parameters, you must define them using the UpdateParameters element of the SqlDataSource control. The UpdateParameters element, shown in Listing 7-36, works much like the SelectParameters element discussed earlier in the chapter. Listing 7-36: Adding UpdateParameters to the SqlDataSource control < asp:SqlDataSource ID="SqlDataSource1" Runat="server" SelectCommand="SELECT * FROM [Customers]" ConnectionString=" < %$ ConnectionStrings:AppConnectionString1 % > " DataSourceMode="DataSet" UpdateCommand="UPDATE [Customers] SET [CompanyName] = @CompanyName, [ContactName] = @ContactName, [ContactTitle] = @ContactTitle, [Address] = @Address, [City] = @City, [Region] = @Region, [PostalCode] = @PostalCode, [Country] = @Country, [Phone] = @Phone, [Fax] = @Fax WHERE [CustomerID] = @original_CustomerID" > < UpdateParameters > < asp:Parameter Type="String" Name="CompanyName" >< /asp:Parameter > < asp:Parameter Type="String" Name="ContactName" >< /asp:Parameter > < asp:Parameter Type="String" Name="ContactTitle" >< /asp:Parameter > < asp:Parameter Type="String" Name="Address" >< /asp:Parameter > < asp:Parameter Type="String" Name="City" >< /asp:Parameter > < asp:Parameter Type="String" Name="Region" >< /asp:Parameter > < asp:Parameter Type="String" Name="PostalCode" >< /asp:Parameter > < asp:Parameter Type="String" Name="Country" >< /asp:Parameter > < asp:Parameter Type="String" Name="Phone" >< /asp:Parameter > < asp:Parameter Type="String" Name="Fax" >< /asp:Parameter > < asp:Parameter Type="String" Name="CustomerID" >< /asp:Parameter > < /UpdateParameters > < /asp:SqlDataSource > Within the UpdateParameters element, each named parameter is defined using the < asp:Parameter > element. This element uses two attributes that define the name and the data type of the parameter. In this case, all the parameters are of type String . Remember that you can also use any of the parameter types mentioned earlier in the chapter, such as the ControlParameter or QueryStringParameter in the UpdateParameters element. 335 Evjen c07.tex V2 - 01/28/2008 2:01pm Page 336 Chapter 7: Data Binding in ASP.NET 3.5 Next, you give the grid a column it can use to trigger editing of a data row. You can do this in several ways. First, you can use the GridView’s AutoGenerateEditButton property. When set to True ,this property tells the grid to add to itself a ButtonField column with an edit button for each data row. Listing 7-37 shows how to add the AutoGenerateEditButton attribute to the GridView control. Listing 7-37: Adding the AutoGenerateEditButton attribute to a SqlDataSource control < asp:GridView ID="GridView1" Runat="server" DataSourceID="SqlDataSource1" DataKeyNames="CustomerID" AutoGenerateColumns="False" AllowSorting="True" AllowPaging="True" AutoGenerateEditButton="true" > The GridView control also includes AutoGenerateSelectButton and AutoGenerateDeleteButton prop- erties, which allow you to easily add row selection and row deletion capabilities to the grid. A second way to add an edit button is to add a CommandField column. This is shown in Listing 7-38. Listing 7-38: Adding edit functionality using a CommandField < asp:CommandField ShowHeader="True" HeaderText="Command" ShowEditButton="True" >< /asp:CommandField > Notice that you add the ShowEditButton property to the CommandField to indicate that you want to display the edit command in this column. You can control how the command is displayed in the grid using the ButtonType property, which allows you to display the command as a link, a button, or even an image. Figure 7-25 shows what the grid looks like after adding the CommandField with the edit command displayed. Now if you browse to your Web page, you see that a new edit column has been added. Clicking the Edit link allows the user to edit the contents of that particular data row. The CommandField element also has attributes that allow you to control exactly what is shown in the column. You can dictate whether the column displays commands such as Cancel , Delete , Edit , Insert , and Select . With the Edit CommandField enabled, you still have one more property to set in order to enable the grid to perform updates. You tell the grid which columns are in the table’s primary key. You can accomplish this by using the DataKeyNames property, as illustrated in Listing 7-39. Listing 7-39: Adding the DataKeyNames to the GridView control < asp:GridView ID="GridView1" Runat="server" DataSourceID="SqlDataSource1" DataKeyNames="CustomerID" AutoGenerateColumns="False" AllowSorting="True" AllowPaging="True" AutoGenerateEditButton="true" > You can specify more than one column in the primary key by setting the property to a comma- delimited list. Notice that when you add the edit capabilities to the grid, by default it allows all displayed columns to be edited. You probably won’t always want this to be the case. You can control which columns the grid 336 Evjen c07.tex V2 - 01/28/2008 2:01pm Page 337 Chapter 7: Data Binding in ASP.NET 3.5 allows to be edited by adding the ReadOnly property to the columns that you do not want users to edit. Listing 7-40 shows how you can add the ReadOnly property to the ID column. Figure 7-25 Listing 7-40: Adding the ReadOnly property to a BoundField < asp:BoundField ReadOnly="True" HeaderText="CustomerID" DataField="CustomerID" SortExpression="CustomerID" Visible="False" >< /asp:BoundField > Now if you browse to the Web page again and click the Edit button, you should see that the ID column is not editable. T his is shown in Figure 7-26. Handling Errors When Updating Data As much as you t ry to prevent them, errors happen when you save data. If you allow your users to update data in your GridView control, you should implement a bit of error handling to make sure errors do not bubble up to the user. To check for errors when updating data through the GridView, you can use the RowUpdated event. Listing 7-41 shows how to check for errors after a user has attempted to update data. In this scenario, if an error does occur, you simply display a message to the user in a Label. 337 Evjen c07.tex V2 - 01/28/2008 2:01pm Page 338 Chapter 7: Data Binding in ASP.NET 3.5 Figure 7-26 Listing 7-41: Checking for Update errors using the RowUpdated event VB < script runat="server" > Protected Sub GridView1_RowUpdated(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.GridViewUpdatedEventArgs) If e.Exception IsNot Nothing Then Me.lblErrorMessage.Text = e.Exception.Message End If End Sub < /script > C# < script runat="server" > protected void GridView1_RowUpdated(object sender, GridViewUpdatedEventArgs e) { if (e.Exception != null) 338 Evjen c07.tex V2 - 01/28/2008 2:01pm Page 339 Chapter 7: Data Binding in ASP.NET 3.5 { this.lblErrorMessage.Text = e.Exception.Message; } } < /script > Using the TemplateField’s EditItemTemplate Earlier in the chapter, you were introduced to the TemplateField and various other available templates. One of those templates is the EditItemTemplate, which the grid uses to display the TemplateField column for a row that has entered edit mode. Although the standard BoundField allows users to edit their data only in text boxes, the TemplateField’s EditItemTemplate enables you to completely customize the data editing experience of the user. For instance, the user would probably have a better editing experience if the Region column were presented as a DropDownList control during edit mode, rather than as a simple text box. To do this, you simply change the Region column from a BoundField to a TemplateField and add an ItemTemplate and an EditItemTemplate. In the EditItemTemplate, you can add a DropDownList control and provide the proper data-binding information so that the control is bound to a unique list of Regions. Listing 7-42 shows how you can add the ItemTemplate and EditItemTemplate to the GridView. Listing 7-42: Adding the ItemTemplate and EditItemTemplate to the GridView < asp:TemplateField HeaderText="Country" > < ItemTemplate >< %# Eval("Country") % >< /ItemTemplate > < EditItemTemplate > < asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource2" DataTextField="Country" DataValueField="Country" > < /asp:DropDownList > < asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString=" < %$ ConnectionStrings:NorthwindConnectionString % > " SelectCommand="SELECT DISTINCT [Country] FROM [Customers]" > < /asp:SqlDataSource > < /EditItemTemplate > < /asp:TemplateField > Notice that you use a simple Eval data-binding expression in the ItemTemplate to display the value of the column in the row’s default display mode. In the EditItemTemplate, you simply include a DropDownList control and a SqlDataSource control for the drop-down list to bind to. To select the current Country value in the DropDownList control, you use the RowDataBound event. Listing 7-43 shows how this is done. Listing 7-43: Using RowDataBound VB Protected Sub GridView1_RowDataBound(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) ’Check for a row in edit mode. If ((e.Row.RowState = DataControlRowState.Edit) Or _ Continued 339 Evjen c07.tex V2 - 01/28/2008 2:01pm Page 340 Chapter 7: Data Binding in ASP.NET 3.5 (e.Row.RowState = (DataControlRowState.Alternate Or _ DataControlRowState.Edit))) Then Dim drv As System.Data.DataRowView = _ CType(e.Row.DataItem, System.Data.DataRowView) Dim ddl As DropDownList = _ CType(e.Row.Cells(8).FindControl("DropDownList1"), DropDownList) Dim li As ListItem = ddl.Items.FindByValue(drv("Country").ToString()) li.Selected = True End If End Sub C# protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { // Check for a row in edit mode. if ( (e.Row.RowState == DataControlRowState.Edit) || (e.Row.RowState == (DataControlRowState.Alternate | DataControlRowState.Edit)) ) { System.Data.DataRowView drv = (System.Data.DataRowView)e.Row.DataItem; DropDownList ddl = (DropDownList)e.Row.Cells[8].FindControl("DropDownList1"); ListItem li = ddl.Items.FindByValue(drv["Country"].ToString()); li.Selected = true; } } As shown in the listing, to set the appropriate DropDownList value, first check that the currently bound GridViewRow is in an edit state by using t he RowState property. The RowState property is a bitwise combination of DataControlRowState values. The following table shows you the possible states for a GridViewRow. RowState Description Alternate Indicates that this row is an alternate row. Edit Indicates the row is currently in edit mode. Insert Indicates the row is a new row, and is currently in insert mode. Normal Indicates the row is currently in a normal state. Selected Indicates the row is currently the selected row in the GridView. Note that in order to determine the current RowState correctly in the previous listing, you must make multiple comparisons against the RowState property. The RowState can be in multiple states at once — for example, alternate and edit. Therefore, you need to use a bitwise comparison to properly deter- mine if the GridViewRow is in an edit state. After the row is determined to be in an edit state, locate the DropDownList control in the proper GridViewRow cell by using the FindControl method. This 340 Evjen c07.tex V2 - 01/28/2008 2:01pm Page 341 Chapter 7: Data Binding in ASP.NET 3.5 method allows you to locate a server control by name. After you find the DropDownList control, locate the appropriate DropDownlist ListItem and set its Selected property to True . You also need to use a GridView event to add the value of the DropDownList control back into the GridView after the user updates the row. For this, you can use the RowUpdating event as shown in Listing 7-44. Listing 7-44: Using RowUpdating VB Protected Sub GridView1_RowUpdating(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.GridViewUpdateEventArgs) Dim gvr As GridViewRow = Me.GridView1.Rows(Me.GridView1.EditIndex) Dim ddl As DropDownList = _ CType(gvr.Cells(8).FindControl("DropDownList1"), DropDownList) e.NewValues("Country") = ddl.SelectedValue End Sub C# protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e) { GridViewRow gvr = this.GridView1.Rows[this.GridView1.EditIndex]; DropDownList ddl = (DropDownList)gvr.Cells[8].FindControl("DropDownList1"); e.NewValues["Country"] = ddl.SelectedValue; } In this event, you determine GridViewRow that is currently being edited using the EditIndex .This property contains the index of the GridViewRow that is currently in an edit state. After you find the row, locate the DropDownList control in the proper row cell using the FindControl method, as in the previous listing. After you find the DropDownList control, simply add the SelectedValue of that control to the GridView controls NewValues collection. Deleting GridView Data Deleting data from the table produced by the GridView is even easier than editing data. Just a few addi- tions to the code enable you to delete an entire row of data from the table. Much like with the Edit buttons you added earlier, you can easily add a Delete button to the grid by setting the AutoGenerateDelete- Button property to True . This is shown in Listing 7-45. Listing 7-45: Adding a delete link to the GridView < asp:GridView ID="GridView1" Runat="server" DataSourceID="SqlDataSource1" DataKeyNames="CustomerID" AutoGenerateColumns="False" AllowSorting="True" AllowPaging="True" AutoGenerateEditButton="true" AutoGenerateDeleteButton="true" > The addition of the AutoGenerateDeleteButton attribute to the GridView is the only change you make to this control. Now look at the SqlDataSource control. Listing 7-46 shows you the root element of this control. 341 Evjen c07.tex V2 - 01/28/2008 2:01pm Page 342 Chapter 7: Data Binding in ASP.NET 3.5 Listing 7-46: Adding delete functionality to the SqlDataSource Control < asp:SqlDataSource ID="SqlDataSource1" Runat="server" SelectCommand="SELECT * FROM [Customers]" ConnectionString=" < %$ ConnectionStrings:AppConnectionString1 % > " DataSourceMode="DataSet" DeleteCommand="DELETE From Customers WHERE (CustomerID = @CustomerID)" UpdateCommand="UPDATE [Customers] SET [CompanyName] = @CompanyName, [ContactName] = @ContactName, [ContactTitle] = @ContactTitle, [Address] = @Address, [City] = @City, [Region] = @Region, [PostalCode] = @PostalCode, [Country] = @Country, [Phone] = @Phone, [Fax] = @Fax WHERE [CustomerID] = @original_CustomerID" > In addition to the SelectCommand and UpdateCommand attributes, you also add the DeleteCommand attribute to the SqlDataSource and provide the SQL command that deletes t he specified row. Just like the UpdateCommand property, the DeleteCommand property makes use of named parameters. Because of this, you define this parameter from within the SqlDataSource control. To do this, add a < DeleteParameters > section to the SqlDataSource control. This is shown in Listing 7-47. Listing 7-47: Adding a <DeleteParameters> section to the SqlDataSource control < DeleteParameters > < asp:Parameter Name="CustomerID" Type="String" > < /asp:Parameter > < /DeleteParameters > This is the only parameter definition needed for the < DeleteParameters > section because the SQL command for this deletion requires only the CustomerID from the row to delete the entire row. When you run the example with this code in place, you see a Delete link next to the Edit link. Clicking the Delete link completely deletes the selected row. Remember that it is a good idea to check for database errors after you complete the deletion. Listing 7-48 shows how you can use the GridView’s RowDeleted event and the SqlDataSources Deleted event to check for errors that might have occurred during the Delete. Notice that both events provide Exception properties to you as part of the event arguments. If the prop- erties are not empty, then an exception occurred that you can handle. If you do choose to handle the exception, then you should set the ExceptionHandled property to True ; otherwise, the exception will continue to bubble up to the end user. Listing 7-48: Using the RowDeleted event to catch SQL e rrors VB < script runat="server" > Protected Sub GridView1_RowDeleted(ByVal sender As Object, _ ByVal e As GridViewDeletedEventArgs) If (Not IsDBNull (e.Exception)) Then Me.lblErrorMessage.Text = e.Exception.Message e.ExceptionHandled = True End If 342 Evjen c07.tex V2 - 01/28/2008 2:01pm Page 343 Chapter 7: Data Binding in ASP.NET 3.5 End Sub Protected Sub SqlDataSource1_Deleted(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.SqlDataSourceStatusEventArgs) If (e.Exception IsNot Nothing) Then Me.lblErrorMessage.Text = e.Exception.Message e.ExceptionHandled = True End If End Sub < /script > C# < script runat="server" > protected void GridView1_RowDeleted(object sender, GridViewDeletedEventArgs e) { if (e.Exception != null) { this.lblErrorMessage.Text = e.Exception.Message; e.ExceptionHandled = true; } } protected void SqlDataSource1_Deleted(object sender, SqlDataSourceStatusEventArgs e) { if (e.Exception != null) { this.lblErrorMessage.Text = e.Exception.Message; e.ExceptionHandled = true; } } < /script > Other GridView Formatting Features The GridView control includes numerous other properties that let you adjust the look and feel of the con- trol in fine detail. The Caption property allows you to set a caption at the top of the grid. The ShowHeader and ShowFooter properties enable you to control whether the column headers or footers are shown. The control also includes eight different style properties that give you control over the look and feel of different parts of the grid. The following table describes the style properties. Style Property Description AlternatingRowStyle Style applied to alternating GridView rows EditRowStyle Style applied to a GridView row in edit mode EmptyDataRowStyle Style applied to t he EmptyDataRow when there are datarows available for the grid to bind to FooterStyle Style applied to the footer of the GridView HeaderStyle Style applied to the header of the GridView 343 Evjen c07.tex V2 - 01/28/2008 2:01pm Page 344 Chapter 7: Data Binding in ASP.NET 3.5 Style Property Description PagerStyle Style applied to the GridView pager RowStyle Style applied to the default GridView row SelectedRowStyle Style applied to the currently selected GridView row These style properties let you set the font, forecolor, backcolor, alignment, and many other style-related properties for these individual areas of the grid. The GridView smart tag also includes an AutoFormat option that enables you to select from a list of predefined styles to apply to the control. DetailsView The DetailsView server control is a new data-bound control that enables you to view a single data record at a time. Although the GridView control is an excellent control for viewing a collection of data, many scenarios demand that you be able to drill down into an individual record. The DetailsView control allows you to do this and provides many of the same data manipulation and display capabilities as the GridView. It allows you to do things such as paging, updating, inserting, and deleting data. To start using the DetailsView, drag the control onto the design surface. Like the GridView, you can use the DetailsView’s smart tag to create and set the data source for the control. For this sample, just use the SqlDataSource control you used for the GridView. If you run the page at this point, you see that the control displays one record, the first record returned by your query. Figure 7-27 shows you what the DetailsView looks like in a Web page. Figure 7-27 344 . earlier in the chapter, such as the ControlParameter or QueryStringParameter in the UpdateParameters element. 33 5 Evjen c07.tex V2 - 01/28/2008 2:01pm Page 33 6 Chapter 7: Data Binding in ASP. NET 3. 5 Next,. message to the user in a Label. 33 7 Evjen c07.tex V2 - 01/28/2008 2:01pm Page 33 8 Chapter 7: Data Binding in ASP. NET 3. 5 Figure 7-26 Listing 7-41: Checking for Update errors using the RowUpdated. Evjen c07.tex V2 - 01/28/2008 2:01pm Page 33 5 Chapter 7: Data Binding in ASP. NET 3. 5 your existing SqlDataSource control by adding an UpdateCommand attribute. This tells the data source control