40自定义DataList编辑界面.docx

1、40自定义DataList编辑界面导言DataList的编辑界面由EditItemTemplate里的标记语言和web控件定义。在目前为止所做的DataList编辑功能的例子里，编辑界面都只包含TextBox。在前面一章里，我们通过添加验证控件来增加了用户体验，提高了可用性。EditItemTemplate可以包含除了TextBox以外的很多控件，比如DropDownLists, RadioButtonLists, Calendars等。和使用TextBox一样，使用这些控件自定义编辑界面时，步骤如下：为EditItemTemplate添加控件. 使用绑定语法将相关的字段值赋给控件的属性. 在

2、UpdateCommand事件处理里, 编程访问web控件的值，并将它传给相关的BLL的方法. 本章我们将为DataList创建一个更丰富的编辑界面，它将包含DropDownList和CheckBox。我们将创建一个列出product信息的DataList，用户可以更新它的name，supplier，category和discontinued status。见图1。图 1: 编辑界面包含一个TextBox, 两个 DropDownLists和一个CheckBox第一步: 显示Product 信息在创建DataList的编辑界面前，我们需要先创建一个只读界面。先打开EditDeleteDataL

3、ist文件夹下的CustomizedUI.aspx页，拖一个DataList进来，将ID设为Products。通过DataList的智能标签，创建一个名为ProductsDataSource的ObjectDataSource，用ProductsBLL类的GetProducts方法配置它。象前面一章一样，我们将直接通过BLL来更新product信息。在UPDATE,INSERT,DELETE标签里选择None.图 2: 在UPDATE, INSERT, DELETE 标签的下拉列表里选择 (None)配置完ObjectDataSource后，Visual Studio会自动创建默认的ItemTe

4、mplate，列出每个字段的值。将product name用表示，并添加一个Edit button，确保将它的CommandName属性设为 “Edit”. 我的标记语言如下：ASP.NET asp:Label ID=ProductNameLabel runat=server Text= / Category: asp:Label ID=CategoryNameLabel runat=server Text= / Supplier: asp:Label ID=SupplierNameLabel runat=server Text= / Discontinued: asp:Label ID=Di

5、scontinuedLabel runat=server Text= / Price: asp:Label ID=UnitPriceLabel runat=server Text= / 上面的标记语言用表示product name，4列的展示其它字段。前面已经讨论过Styles.css里定义的ProductPropertyLabel和productPropertyValue类。浏览该页，见图3。图 3: 显示product信息第二步: 为编辑界面添加web控件首先向EditItemTemplate里添加需要的web控件。我们需要用一个DropDownList表示category，一个DropD

6、ownList表示supplier，一个CheckBox 表示discontinued state。由于本例中不用编辑price，所以仍然用Label来表示它。点击DataList的智能标签上的“Edit Templates”，选择EditItemTemplate,为它添加一个ID为Categories的EditItemTemplate。图 4: 为Categories添加一个DropDownList然后从DropDownList的智能标签里选择“Choose Data Source”，创建一个名为CategoriesDataSource的ObjectDataSource。用Categorie

7、sBLL类的GetCategories()方法配制它（见图5）。数据源配置向导会要求为ListItem Text和Value选择字段。让DropDownList 显示CategoryName，CategoryID作为Value,见图6。图 5: 创建 ObjectDataSource图 6: 配置DropDownList的 Display 字段和Value 字段重复上面的步骤，为suppliers创建一个ID为Suppliers的DropDownList 和一个名为SuppliersDataSource的ObjectDataSource。然后为discontinued state 添加一个Ch

8、eckBox ，为name添加一个TextBox 。将他们的ID分别设为Discontinued和ProductName。为product name添加一个RequiredFieldValidator 确保用户必须提供这个值。最后添加Update 和Cancel button。记得这两个button的CommandName属性必须分别设为“Update” 和“Cancel”。你可以将编辑界面以你喜欢的方式展示。我选择使用和只读界面一样的界面来显示，见下面的声明代码和截图。ASP.NET asp:Label ID=ProductNameLabel runat=server Text= / Nam

9、e: * Category: Supplier: Discontinued: Price: asp:Label ID=UnitPriceLabel runat=server Text= /     图 7: 编辑界面和只读界面的展示差不多第三步: 创建 EditCommand和CancelCommand Event Handlers现在在EditItemTemplate里除了UnitPriceLabel外还没有绑定语法（从ItemTemplate复制过来的代码）。在添加绑定语法前我们首先为DataList的EditCommand和CancelCommand创建事件

10、处理。EditCommand事件处理的目标是为了将Edit button被点击的item展示为编辑状态，而CancelCommand的目标是将DataList返回到编辑前状态。见下面的代码：C# protected void Products_EditCommand(object source, DataListCommandEventArgs e) / Set the DataLists EditItemIndex property and rebind the data Products.EditItemIndex = e.Item.ItemIndex; Products.DataBind

11、(); 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里都是第一个

12、item被选中。图 8: 点击Edit Button显示编辑界面第四步: 为编辑界面增加绑定语法为了让编辑界面显示当前product的值，我们需要使用绑定语法将字段的值赋给web控件。绑定语法可以通过选择web控件的智能标签的“Edit DataBindings”或者直接添加声明语法来实现。将ProductName字段的值赋给ProductName TextBox的Text属性，CategoryID和SupplierID字段赋给Categories和Suppliers DropDownList的SelectedValue属性，Discontinued字段赋给Discontinued Check

13、Box的Checked属性。完成这些后，浏览页面并点击Edit button.见图9。图 9: 点击Edit Button 显示编辑界面第五步: 在UpdateCommand Event Handler保存用户的更改当用户编辑product并点Update button后，会postback并激发UpdateCommand事件。在事件处理里，我们需要从EditItemTemplate里读出web控件的值，并和BLL交互，然后更新数据库里的product。如我们在前面一章看到的那样，被更新的product的ProductID可以通过DataKeys集合来获取。用户输入的值可以通过FindCont

14、rol(controlID)来编程获取，见下面的代码：C# protected void Products_UpdateCommand(object source, DataListCommandEventArgs e) / Make sure the page is valid. if (!Page.IsValid) return; / Read in the ProductID from the DataKeys collection int productID = Convert.ToInt32(Products.DataKeyse.Item.ItemIndex); / Read in

15、the product name and price values TextBox productName = (TextBox)e.Item.FindControl(ProductName); DropDownList categories = (DropDownList)e.Item.FindControl(Categories); DropDownList suppliers = (DropDownList)e.Item.FindControl(Suppliers); CheckBox discontinued = (CheckBox)e.Item.FindControl(Discont

16、inued); string productNameValue = null; if (productName.Text.Trim().Length 0) productNameValue = productName.Text.Trim(); int categoryIDValue = Convert.ToInt32(categories.SelectedValue); int supplierIDValue = Convert.ToInt32(suppliers.SelectedValue); bool discontinuedValue = discontinued.Checked; /

17、Call the ProductsBLLs UpdateProduct method. ProductsBLL productsAPI = new ProductsBLL(); productsAPI.UpdateProduct(productNameValue, categoryIDValue, supplierIDValue, discontinuedValue, productID); / Revert the DataList back to its pre-editing state Products.EditItemIndex = -1; Products.DataBind();

18、代码首先检查Page.IsValid属性来确保所有的验证控件都返回合法值。如果Page.IsValid为True，从DataKeys集合里读出被编辑的product 的ProductID的值，并引用EditItemTemplate里的web控件。然后将这些控件的值读到变量里，并传给UpdateProduct方法。完成更新后，DataList会返回到编辑前的状态。注意：我省略了某章异常处理，目的是为了使本章的代码看起来目的性更强。你可以在完成本章后自己添加异常处理的功能作为练习。第六章: 处理空的CategoryID 和SupplierID 值Northwind 数据库允许Products表里的CategoryID和SupplierID列为空。然而我们的编辑界面目前还没有提供可选空值。如果我们试图编辑一个无论是Categ