New Ways to Handle Data
Figure 4-10
A Null value is different from an empty string value. In the example from Listing 4-8, any empty strings encountered do not receive the NO REGION text. To get around this (if you want to), you can use the TreatEmptyStringAsNull attribute, which takes a Boolean value. If set to True, all empty values are treated as if they are Null values — meaning that they receive the NO REGION text. If the attribute is set to False (the default), all empty values are treated as something other than Null and do not receive the
NO REGION text.
Enabling the editing of rows in the GridView control
Not only do developers want to display tabular data within a browser, they also want to give end users the capability to edit and send the changes made back to the data store. Adding an editing capability to the DataGrid control in ASP.NET 1.0/1.1 was always difficult. But it was important enough that developers often felt the need to add it to their pages.
ASP.NET 2.0’s new GridView server control allows for easy editing of the content it contains. For an example of this, enable the end user to edit the contents contained in the GridView control, as shown in Listing 4-9.
87
Chapter 4
Listing 4-9: Editing data in the GridView control
<%@ Page Language=”VB” %>
<html xmlns=”http://www.w3.org/1999/xhtml” > <head runat=”server”>
<title>SqlDataSource Control Page</title> </head>
<body>
<form id=”form1” runat=”server”>
<asp:GridView ID=”GridView1” Runat=”server” Datasourceid=”SqlDataSource1” AutoGenerateColumns=”False” DataKeyNames=”CustomerID”
BackColor=”White” GridLines=”Vertical” BorderStyle=”Solid” CellPadding=”3” ForeColor=”Black” BorderColor=”#999999” BorderWidth=”1px”>
<Columns>
<asp:CommandField ShowEditButton=”True”> </asp:CommandField>
<asp:BoundField SortExpression=”CustomerID” HeaderText=”CustomerID” ReadOnly=”True” DataField=”CustomerID”>
</asp:BoundField>
<asp:BoundField SortExpression=”CompanyName” HeaderText=”Company Name” DataField=”CompanyName”> </asp:BoundField>
<asp:BoundField SortExpression=”Country” HeaderText=”Country” DataField=”Country”>
</asp:BoundField>
<asp:BoundField SortExpression=”Region” NullDisplayText=”NO REGION” HeaderText=”Region” DataField=”Region”>
</asp:BoundField>
</Columns>
<FooterStyle BackColor=”#CCCCCC”> </FooterStyle>
<SelectedRowStyle ForeColor=”White” BackColor=”#000099” Font-Bold=”True”>
</SelectedRowStyle>
<PagerStyle ForeColor=”Black” HorizontalAlign=”Center” BackColor=”#999999”>
</PagerStyle>
<HeaderStyle ForeColor=”White” BackColor=”Black” Font-Bold=”True”> </HeaderStyle>
<AlternatingRowStyle BackColor=”#CCCCCC”> </AlternatingRowStyle>
</asp:GridView>
<asp:SqlDataSource ID=”SqlDataSource1” Runat=”server” SelectCommand=”Select * From Customers”
UpdateCommand=”UPDATE Customers SET CompanyName = @CompanyName,
Country = @Country, Region = @Region WHERE (CustomerID = @CustomerID)” ConnectionString=”Server=(local);Trusted_Connection=True;Integrated
Security=SSPI;Persist Security Info=True;Database=Northwind” ProviderName=”System.Data.SqlClient”>
<UpdateParameters>
<asp:Parameter Name=”CustomerID” Type=”String”>
88
New Ways to Handle Data
</asp:Parameter>
<asp:Parameter Name=”CompanyName” Type=”String”> </asp:parameter>
<asp:parameter Name=”Country” Type=”String”> </asp:parameter>
<asp:parameter Name=”Region” Type=”String”>
</asp:parameter>
</UpdateParameters>
</asp:SqlDataSource>
</form>
</body>
</html>
When you run the table produced by the GridView, it displays the contents as specified in the earlier examples in this chapter. The new addition is the Edit column that appears in the leftmost column in the table. Clicking any Edit link enables the end user to edit the content of the selected row. This is illustrated in Figure 4-11.
Figure 4-11
Looking at the code in this example, note that you have picked the columns from the Customers table to be displayed. In this case, the columns displayed are the CustomerID, CompanyName, Country, and Region columns. In the listings contained within the <Columns> section of the GridView, notice that the leftmost column in the GridView is the Edit link, which enables the end user to edit a selected row:
<asp:CommandField ShowEditButton=”True”> </asp:CommandField>
To create the Edit column in the table, you use the <asp:CommandField> element, which enables you to place actions like Cancel, Delete, Edit, Insert, and Select as buttons in your tables. In this case, you show the Edit button by setting the ShowEditButton attribute to True. Just like the <asp:BoundField> element, the <asp:CommandField> element can be modified with a large number of different style attributes, as well as with attributes such as the HeaderText and the HeaderImageUrl.
89
Chapter 4
If you have worked through this example, you can see that all the buttons in the Edit column (Edit, Update, Cancel) are shown as links. This is the default setting, but you can change it so that these items appear either as buttons or custom images. To show these items as buttons, you simply set the
ButtonType attribute to Button:
<asp:CommandField ShowEditButton=”True” ButtonType=”Button”>
</asp:CommandField>
The results of this are illustrated in Figure 4-12.
Figure 4-12
You can also use custom images for these actions. To do this, you specify Image as the ButtonType:
<asp:CommandField ShowEditButton=”True” ButtonType=”Image” EditImageUrl=”~/edit.gif” UpdateImageUrl=”~/fix.gif”
CancelImageUrl=”~/cancel.gif”>
</asp:CommandField>
If you instruct the ButtonType to use images, you also use the EditImageUrl, UpdateImageUrl, and the CancelImageUrl attributes to give the location of the images you want in the table. Doing this produces the following results, as illustrated in Figure 4-13.
In the example in Listing 4-9, another change made to the columns and their appearance in the table involves the CustomerID column. The data elements contained within this column uniquely identify the customer and, in this case, it is actually the primary key for the entry in the database. Because of this, you don’t want the end user to edit this entry. Turning off the edit capability is easy to do by using the ReadOnly attribute for the column definition:
<asp:BoundField SortExpression=”CustomerID” HeaderText=”CustomerID” ReadOnly=”True” DataField=”CustomerID”>
</asp:BoundField>
90
New Ways to Handle Data
Figure 4-13
Specifying the ReadOnly attribute as True means that although the end user can edit some rows in the table, he can’t edit the CustomerID field. This is shown in the previous screen shots of this table.
Now that the columns specified in the <Columns> section of the GridView control are in place, you must associate the primary key to identify a row when it is sent back to the server for an update or deletion. This is done in the main <asp:GridView> element:
<asp:gridview id=”GridView1” Runat=”server” DataSourceId=”SqlDataSource1” AutoGenerateColumns=”False” DataKeyNames=”CustomerID”
BackColor=”White” GridLines=”Vertical” BorderStyle=”Solid” CellPadding=”3” ForeColor=”Black” BorderColor=”#999999” BorderWidth=”1px”>
You make this association with the DataKeyNames attribute (shown in bold). You can see that the value assigned to this attribute in the example points to the CustomerID field. Without this specification, the selected row is not updated. After this is in place, the GridView control is ready. Now turn your attention to the SqlDataSource control used by the GridView control.
You want the table not only to display data (using the SelectCommand attribute), but also to enable the end user to push updates of the data to SQL Server. You do this by adding an UpdateCommand attribute to the SqlDataSource control:
<asp:SqlDataSource Id=”SqlDataSource1” Runat=”server” SelectCommand=”Select * From Customers”
UpdateCommand=”UPDATE Customers SET CompanyName = @CompanyName,
Country = @Country, Region = @Region WHERE (CustomerID = @CustomerID)”
ConnectionString=”Server=(local);Trusted_Connection=True;Integrated Security=SSPI;Persist Security Info=True;Database=Northwind”
ProviderName=”System.Data.SqlClient”>
91