然后为discontinued state 添加一个CheckBox ,为name添加一个TextBox 。将他们的ID分别设为Discontinued和ProductName。为product name添加一个RequiredFieldValidator 确保用户必须提供这个值。
最后添加Update 和Cancel button。记得这两个button的CommandName属性必须分别设为“Update” 和“Cancel”。你可以将编辑界面以你喜欢的方式展示。我选择使用和只读界面一样的界面来显示,见下面的声明代码和截图。
<EditItemTemplate> <h4> <asp:Label runat="server" Text='<%# Eval("ProductName") %>' /> </h4> <table> <tr> <td>Name:</td> <td colspan="3"> <asp:TextBox runat="server" /> <asp:RequiredFieldValidator ControlToValidate="ProductName" ErrorMessage="You must enter a name for the product." runat="server">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td>Category:</td> <td> <asp:DropDownList runat="server" DataSourceID="CategoriesDataSource" DataTextField="CategoryName" DataValueField="CategoryID" /> </td> <td>Supplier:</td> <td> <asp:DropDownList DataTextField="CompanyName" DataSourceID="SuppliersDataSource" DataValueField="SupplierID" runat="server" /> </td> </tr> <tr> <td>Discontinued:</td> <td> <asp:CheckBox runat="server" /> </td> <td>Price:</td> <td> <asp:Label runat="server" Text='<%# Eval("UnitPrice", "{0:C}") %>' /> </td> </tr> <tr> <td colspan="4"> <asp:Button runat="Server" CommandName="Update" Text="Update" /> <asp:Button runat="Server" CommandName="Cancel" Text="Cancel" CausesValidation="False" /> </td> </tr> </table> <br /> <asp:ObjectDataSource runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="GetCategories" TypeName="CategoriesBLL"> </asp:ObjectDataSource> <asp:ObjectDataSource runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="GetSuppliers" TypeName="SuppliersBLL"> </asp:ObjectDataSource> </EditItemTemplate>
图 7: 编辑界面和只读界面的展示差不多
第三步: 创建 EditCommand和CancelCommand Event Handlers
现在在EditItemTemplate里除了UnitPriceLabel外还没有绑定语法(从ItemTemplate复制过来的代码)。在添加绑定语法前我们首先为DataList的EditCommand和CancelCommand创建事件处理。EditCommand事件处理的目标是为了将Edit button被点击的item展示为编辑状态,而CancelCommand的目标是将DataList返回到编辑前状态。见下面的代码:
protected void Products_EditCommand(object source, DataListCommandEventArgs e) { // Set the DataList's EditItemIndex property and rebind the data Products.EditItemIndex = e.Item.ItemIndex; Products.DataBind(); } protected void Products_CancelCommand(object source, DataListCommandEventArgs e) { // Return to DataList to its pre-editing state Products.EditItemIndex = -1; Products.DataBind(); }
完成这些后,点击Edit button会进入编辑界面,点击Cancel button会返回只读模式。见图8。由于现在还没有为编辑界面添加绑定语法,TextBox是空白的,CheckBox 未被选中,两个DropDownList里都是第一个item被选中。
图 8: 点击Edit Button显示编辑界面
第四步: 为编辑界面增加绑定语法
为了让编辑界面显示当前product的值,我们需要使用绑定语法将字段的值赋给web控件。绑定语法可以通过选择web控件的智能标签的“Edit DataBindings”或者直接添加声明语法来实现。
将ProductName字段的值赋给ProductName TextBox的Text属性,CategoryID和SupplierID字段赋给Categories和Suppliers DropDownList的SelectedValue属性,Discontinued字段赋给Discontinued CheckBox的Checked属性。完成这些后,浏览页面并点击Edit button.见图9。
图 9: 点击Edit Button 显示编辑界面
第五步: 在UpdateCommand Event Handler保存用户的更改