To implement the functionality of item editing, follow these steps:
1. Add a Button or LinkButton Server control in ItemTemplate. Using the following code, set the CommandName property of the Button or LinkButton control to "edit":
2. <asp:LinkButton ID=LinkButton3 runat="Server" Text="Edit" commandName="edit"/ >
3. Create EditItemTemplate. You can add text, elements, and controls to be rendered on the page when an item needs to be edited. The template should contain the controls for all the values that need to be edited, along with two buttons. Both the buttons are either Button or LinkButton controls. One button should have the Text property set to "Update" and the CommandName property set to "update". This button is used to implement the functionality of saving the changes to the data source. The other button should have the Text
property set to "Cancel" and the CommandName property set to
"cancel". This button is used to implement the functionality of quitting without saving the changes to the data source. The following code snippet shows a typical EditItemTemplate that displays the Update and Cancel buttons and other controls to display the bound data in Edit mode:
4. <EditItemTemplate> 5. <tr>
6. <td>
7. <asp:LinkButton ID=LinkButton1 runat="Server" 8. Text="Update" CommandName="update" />
9. </td> 10. <td>
11. <asp:LinkButton Id=LinkButton2 runat="Server" 12. Text="Cancel" CommandName="cancel" />
13. </td> 14. <td>
15. <! Other controls go here > 16. </td>
</EditItemTemplate>
17. Create an event handler for the EditCommand event of the control to implement item editing. In this event handler, set the
EditItemIndex property of the control to the index of the item to be edited. Also, call the DataBind() method of the control, using the following code:
18. DataList1.EditItemIndex = e.Item.ItemIndex DataList1.DataBind()
19. Create an event handler for the UpdateCommand event of the control to update the data source with the edited values. In the
event handler, after you update the data source, you need to come out of the Edit mode and bind data to DataList:
20. DataList1.EditItemIndex = -1 DataList1.DataBind()
21. Create an event handler for the CancelCommand event of the control to cancel the changes in the edited values. In this event handler, you simply need to come out of the Edit mode and bind data to DataList.
Combining templates with the DataGrid control
The DataGrid control usually has bound columns. However, different types of columns, such as Hyperlink columns, Button columns, and Template columns, can provide
additional functionality. Template columns enable you to create many templates, such as ItemTemplate, HeaderTemplate, FooterTemplate, and EditItemTemplate. Therefore, Template columns provide complete flexibility to present data.
You can create different types of columns by using the DataGrid Properties window. In the Properties window, click the ellipsis in the Columns property to open the Properties dialog box, as shown in Figure 11-5.
Figure 11-5: The Properties dialog box
Button columns provide functionality for selecting, editing, and deleting items. You can create three types of Button columns: Select, Edit, and Delete. If you create the Edit button column, the Edit button is created in each row. To add the functionality to the Edit button, create the event handler for the EditCommand event of the DataGrid control in the same way you created the event handler for the EditCommand event of the DataList control. Then, to update the changes in the data source, you need to create the event handler for the UpdateCommand event. And, to cancel any changes made by users, you need to create the event handler for the CancelCommand event of the DataGrid control.
Cross- Reference
Template columns provide complete flexibility to give a custom layout to the column. When you add a Template column, you can specify the header and footer text, and a header image in the Properties dialog box. You can also specify a sort expression. After adding a template column, when you switch to the HTML view, the following code automatically appears in the file:
<asp:TemplateColumn> <asp:/TemplateColumn>
You can create HeaderTemplate, FooterTemplate, ItemTemplate, and EditItemTemplate in the TemplateColumn element. To display values in the Template column, you must create at least the ItemTemplate.
You'll implement the same example that you implemented for the Repeater and DataList controls. First, you need to add a DataGrid control to the form.
Note You can add the DataGrid control in the same form, or you can add another Web form and add the control in the new form. After adding the DataGrid control to the form, follow these steps to add the Template column:
1. Display the Properties window for the DataGrid control by right-clicking the control and choosing Properties from the shortcut menu.
2. Display the Properties dialog box by clicking the ellipsis in the Columns property.
3. Click Columns in the left pane.
4. Select TemplateColumn from the Available Columns list and click the > button to add TemplateColumn to the Selected Columns list. 5. In the Header Text box, enter Product Category and click OK. Note You can also specify the header image, footer text, and a sort
expression.
After adding the Template column to the DataGrid control, you can create templates. To do so, switch to the HTML view of the ASPX file. Because you'll be using the DataView
object to bind data to the DataGrid control, import the System.Data namespace in the page using the following code:
<%@ Import namespace="System.Data" %>
Then, in the Page_Load method, write the code to create the DataView object and bind the DataGrid control with it. To create the DataView object, use the same code you used for the Repeater and DataList controls.
Finally, create the ItemTemplate in the Template column as follows: <asp:TemplateColumn HeaderText="Product Category">
<ItemTemplate>
<asp:Image ID=Image1 runat="Server" ImageUrl="category.tif" /> </ItemTemplate>
<asp:/TemplateColumn>
Note Because the image file Category.tif has been added to the project, the ImageUrl property is set to the filename instead of the complete URL.
In the preceding code, an Image control is created as an item in the Template column. The ImageUrl property of the Image control is set to the image to be displayed in the column. Figure 11-6 shows the DataGrid control after creating the ItemTemplate for the Template column.
Figure 11-6: DataGrid implementing a Template column
Summary
This chapter introduced you to the ASP.NET Server control templates. First, you learned the different types of templates that can be created. You identified the Server controls that support templates. Then, you learned the basic features of the Repeater, DataList, and DataGrid controls and identified the templates that each of these controls supports. Finally, you learned how to create templates for the Repeater, DataList, and DataGrid controls to customize their look and layout.
Chapter 12:
Using SQL Server with ASP.NET
Overview
With more and more applications shifting to the Internet, e-business is booming. To conduct business on the Internet, Web applications need to access data stored on a server. Thus, data access is most critical to real-world applications.
Visual Studio .NET provides Web Forms controls, such as the DataGrid control that you can use to access data from various data sources, such as a SQL server or a Jet database. This chapter introduces you to the Structured Query Language (SQL), which is used to access data stored on a SQL server through Web Forms. You'll also learn how to use ADO Extensions to create and manage different schema objects, such as
databases and tables.