aspnet_tutorial20_CustomizingDataModUI_cs.doc

ASP.NET 2.0中的数据操作:定制数据修改界面Working with Data in ASP.NET 2.0 : Customizing the Data Modification Interface简介IntroductionGridView和DetailsView控件通过绑定列和CheckBox列，可以简化数据编辑界面制作，呈现只读，编辑和新增界面，我们不需要增加元素标记或编写任何额外代码就可以得到这些界面。然而，绑定列和CheckBox列呈现的界面却缺乏实际应用中经常用到的定制功能。为了对GridView和DetailsView的编辑、新增界面进行定制，需要用模板列（TemplateField）替换原有列。The BoundFields and CheckBoxFields used by the GridView and DetailsView controls simplify the process of modifying data due to their ability to render read-only, editable, and insertable interfaces. These interfaces can be rendered without the need for adding any additional declarative markup or code. However, the BoundField and CheckBoxFields interfaces lack the customizability often needed in real-world scenarios. In order to customize the editable or insertable interface in a GridView or DetailsView we need to instead use a TemplateField.在上节教程中我们讨论如何增加验证控件来定制数据编辑界面，而本节教程将演示如何使用Web控件对实际的数据集合进行定制：将绑定列和CheckBox列中默认的TextBox、CheckBox控件替换成其他的输入控件。为此，我们将创建一个可编辑的GridView，并允许编辑更新产品的名字、类别、提供商和废弃状态等。而且编辑某行时，类别category和提供商supplier我们将使用DropDownList来显示，以供用户进行选择。此外，还将CheckBox列中默认的CheckBox控件替换成RadioButtonList控件，并提供2个单选选项：Active和Discontinued。 如图1：In the preceding tutorialPlease link this to the previous tutorial. we saw how to customize the data modification interfaces by adding validation Web controls. In this tutorial well look at how to customize the actual data collection Web controls, replacing the BoundField and CheckBoxFields standard TextBox and CheckBox controls with alternative input Web controls. In particular, well build an editable GridView that allows a products name, category, supplier, and discontinued status to be updated. When editing a particular row, the category and supplier fields will render as DropDownLists, containing the set of available categories and suppliers to choose from. Furthermore, well replace the CheckBoxFields default CheckBox with a RadioButtonList control that offers two options: “Active” and “Discontinued”.图1：在GridView的编辑界面使用DropDownList和RadioButton控件Figure 1: The GridViews Editing Interface Includes DropDownLists and RadioButtons一、重载UpdateProduct方法Step 1: Creating the Appropriate UpdateProduct Overload本节教程我们将创建一个可编辑的GridView并允许编辑更新产品的名字、类别、提供商和废弃状态等。因此，我们要重载UpdateProduct方法，并接受5个输入参数：4个产品参数值加上一个产品ID。像以前那样，本重载将：In this tutorial we will build an editable GridView that permits editing of a products name, category, supplier, and discontinued status. Therefore, we need an UpdateProduct overload that accepts five input parameters these four product values plus the ProductID. Like in our previous overloads, this one will:1. 根据指定的ProductID从数据库中获取产品信息；2. 更新ProductName，categoryID，supplierID和Discontinued字段；3. 通过TableAdapter的Update()方法向数据访问层DAL发出更新请求。4. Retrieve the product information from the database for the specified ProductID,5. Update the ProductName, CategoryID, SupplierID, and Discontinued fields, and6. Send the update request to the DAL through the TableAdapters Update() method.简单起见，这个重载方法省略了一个重要的业务逻辑检查并确保一个将会标记为discontinued的产品不是它的提供商提供的唯一产品。你愿意的话也可以加进来，或者做的更完善一些，将这个逻辑写到一个独立的方法中。For brevity, for this particular overload Ive omitted the business rule check that ensures a product being marked as discontinued isnt the only product offered by its supplier. Feel free to add it in if you prefer, or, ideally, refactor out the logic to a separate method.下面的代码是我们在ProductsBLL类中新增的UpdateProduct重载方法：The following code shows the new UpdateProduct overload in the ProductsBLL class:System.ComponentModel.DataObjectMethodAttribute(System.ComponentModel.DataObjectMethodType.Update, false)public bool UpdateProduct(string productName, int? categoryID, int? supplierID, bool discontinued, int productID) Northwind.ProductsDataTable products = Adapter.GetProductByProductID(productID);if (products.Count = 0)/ 如果没有匹配记录，返回false / no matching record found, return false return false; Northwind.ProductsRow product = products0; product.ProductName = productName; if (supplierID = null) product.SetSupplierIDNull(); else product.SupplierID = supplierID.Value; if (categoryID = null) product.SetCategoryIDNull(); else product.CategoryID = categoryID.Value; product.Discontinued = discontinued; / 更新产品记录 / Update the product record int rowsAffected = Adapter.Update(product); / 成功更新后返回true，否则返回false / Return true if precisely one row was updated, otherwise false return rowsAffected = 1;二、手工处理可编辑的GridViewStep 2: Crafting the Editable GridView编写完UpdateProduct重载方法，下面要做的是创建可编辑的GridView：在设计器窗口中打开EditInsertDelete 文件夹中的CustomizedUI.aspx页，为其增加一个GridView控件;接着通过GridView的智能标记创建一个新的ObjectDataSource，配置这个ObjectDataSource使用ProductBLL类的GetProducts()方法来获取产品信息，并让其使用上面创建的UpdateProduct重载方法来进行产品的更新。在新增和删除标签上，从下拉列表中选择（None）。With the UpdateProduct overload added, were ready to create our editable GridView. Open the CustomizedUI.aspx page in the EditInsertDelete folder and add a GridView control to the Designer. Next, create a new ObjectDataSource from the GridViews smart tag. Configure the ObjectDataSource to retrieve product information via the ProductBLL classs GetProducts() method and to update product data using the UpdateProduct overload we just created. From the INSERT and DELETE tabs, select (None) from the drop-down lists.图2：配置ObjectDataSource使用上面创建的UpdateProduct重载方法Figure 2: Configure the ObjectDataSource to Use the UpdateProduct Overload Just Created像data modification缺少链接教程中那样，Visual Studio创建了ObjectDataSource的元素标记并指定OldValuesParameterFormatString属性为original_0。由于我们编写的方法不支持传入的原始的ProductID值，所以业务逻辑层不会生效。因此，像上节教程中那样，我们需要从元素标记中移除这些属性，或者设置这些属性。As weve seen throughout the data modification tutorials, the declarative syntax for the ObjectDataSource created by Visual Studio assigns the OldValuesParameterFormatString property to original_0. This, of course, wont work with our Business Logic Layer since our methods dont expect the original ProductID value to be passed in. Therefore, as weve done in previous tutorials, take a moment to remove this property assignment from the declarative syntax or, instead, set this propertys value to 0.改动后的ObjectDataSource元素标记将如下所示：After this change, the ObjectDataSources declarative markup should look like the following: 注意上面代码中OldValuesParameterFormatString已经被移除，并且在UpdateParameters集合中为UpdateProduct重载方法的每个入口参数提供了一个Parameter。Note that the OldValuesParameterFormatString property has been removed and that there is a Parameter in the UpdateParameters collection for each of the input parameters expected by our UpdateProduct overload.虽然ObjectDataSource被配置为只对产品的部分信息进行更新，而GridView却显示了所有的产品信息。我们需要按照下面几点来调整GridView：While the ObjectDataSource is configured to update only a subset of product values, the GridView currently shows all of the product fields. Take a moment to edit the GridView so that: 只包括ProductName, SupplierName, CategoryName字段的绑定列和Discontinued字段的CheckBox列。 CategoryName 和 SupplierName字段在Discontinued前面显示（左边） 将CategoryName 和 SupplierName的标题分别改为“Category” 和 “Supplier” 启用编辑模式（在GridView的智能标记中选择启用编辑复选框） It only includes the ProductName, SupplierName, CategoryName BoundFields and the Discontinued CheckBoxField The CategoryName and SupplierName fields to appear before (to the left of) the Discontinued CheckBoxField The CategoryName and SupplierName BoundFields HeaderText property is set to “Category” and “Supplier”, respectively Editing support is enabled (check the Enable Editing checkbox in the GridViews smart tag)这些调整之后，设计器中的页面将如图3所示： After these changes, the Designer will look similar to Figure 3, with the GridViews declarative syntax shown below.图3：移除GridView中无用的字段Figure 3: Remove the Unneeded Fields from the GridViewGridView的元素标记也像下面所示： 这时GridView的只读界面就改好了。查看数据时，每种产品就作为GridView中的一行，并显示产品的name，category,supplier和discontinued状态。At this point the GridViews read-only behavior is complete. When viewing the data, each product is rendered as a row in the GridView, showing the products name, category, supplier, and discontinued status.图4： GridView调整后的只读界面Figure 4: The GridViews Read-Only Interface is Complete三、在编辑界面中使用DropDownList显示Category和SupplierStep 3: Using a DropDownList for the Category and Supplier Editing Interfaces我们注意到ProductsRow对象包含产品的CategoryID，CategoryName，SupplierID和SupplierName属性，但是Products数据库只保存了外键，而对应的Name保存在Categories和Suppliers表中。ProductsRow对象中的CategoryID和SupplierID可以读取和写入，而CategoryName和SupplierName属性则标记为只读。Recall that the ProductsRow object contains CategoryID, CategoryName, SupplierID, and SupplierName properties, which provide the actual foreign-key ID values in the Products database table and the corresponding Name values in the Categories and Suppliers tables. The ProductRows CategoryID and SupplierID can both be read from and written to, while the CategoryName and SupplierName properties are marked read-only.由于CategoryName和SupplierName的只读状态，相应绑定列的ReadOnly属性也被置为true，防止编辑某行时它们的值被修改。尽管也可以通过设置ReadOnly属性为false，使其在编辑状态将这些绑定列转为TextBox，但是这样以来当用户尝试更新产品信息时系统就会抛出异常，因为UpateProduct重载中并不接受CategoryName和SupplierName参数。事实上，我们也不想编写这种重载方法，原因如下：Due to the read-only status of the CategoryName and SupplierName properties, the corresponding BoundFields have had their ReadOnly property set to true, preventing these values from being modified when a row is edited. While we can set the ReadOnly property to false, rendering the CategoryName and SupplierName BoundFields as TextBoxes during editing, such an approach will result in an exception when the user attempts to update the product since there is no UpdateProduct overload that takes in CategoryName and SupplierName inputs. In fact, we dont want to create such an overload for two reasons: Products表没有SupplierName和CategoryName字段，而是对应的外键SupplierID和CategoryID。因此，我们希望在更新方法中传递外键ID，而不是查找外键表中的值。 要求用户键入supplier或者category的名字也很不合理，因为这要求用户必须知道合法的category和supplier，并且拼写正确无误。 The Products table doesnt have SupplierName or CategoryName fields, but SupplierID and CategoryID. Therefore, we want our method to be passed these particular ID values, not their lookup tables values. Requiring the user to type in the name of the supplier or category is less than ideal, as it requires the user to know the available categories and suppliers and their correct spellings.我们打算在只读模式Supplier和category列分别显示了分类和提供商的名字，而在编辑时，通过下拉列表显示可用选项。这样以来，用户可以快速查看有效的category和supplier并且可以很便捷直观的进行选择。The supplier and category fields should display the category and suppliers names when in read-only mode (as it does now) and a drop-down list of applicable options when being edited. Using a drop-down list, the end user can quickly see what categories and suppliers are available to choose among and can more easily make their selection.要实现这一点，需要将SupplierName和CategoryName对应的绑定列转换为模板列，在ItemTemplate模板中显示SupplierName和CategoryName，而EidtItemTemplate模板则使用DropDownList控件列出有效的cagegory和supplier。To provide this behavior, we need to convert the SupplierName and CategoryName BoundFields into TemplateFields whose ItemTemplate emits the SupplierName and CategoryName values and whose EditItemTemplate uses a DropDownList control to list the available categories and suppliers. 添加Categories和Suppliers 的DropDownList控件Adding the Categories and Suppliers DropDownLists我们要先将SupplierName和CategoryName绑定列转换为模板列：点击GridView智能标记中的编辑列链接；选择左下的BoundField；点击“将此字段转换为TemplateField”链接，转换过程将创建一个模板列，包括ItemTemplate和EditItemTemplate，最终的元素标记大致如下：Start by converting the SupplierName and CategoryName BoundFields into TemplateFields by: clicking on the Edit Columns link from the GridViews smart tag; selecting the BoundField from the list in the lower left; and clicking the “Convert this field into a TemplateField” link. The conversion process will create a TemplateField with both an ItemTemplate and an EditItemTemplate, as shown in the declarative syntax below: asp:Label ID=Label1 runat=server Text= asp:Label ID=Label1 runat=server Text= 由于绑定列标记为只读，ItemTemplate和EditItemTemplate都将用Label控件的Text属性绑定显示相关数据（如上面的CategoryName）。因此需要修改EditItemTemplate模板，用DropDownList控件来替换原来的Label控件。Since the BoundField was marked as read-only, both the ItemTemplate and EditItemTemplate contain a Label Web control whose Text property is bound to the applicable data field (CategoryName, in the syntax above). We need to modify the EditItemTemplate, replacing the Label Web control with a DropDownList control.像上节教程讲的，即可在设计器中编辑模板也可直接修改模板的元素标记。要在设计器中修改，可以通过GridView的智能标记点击“编辑模板”链接并选择Category字段的EditItemTemplate模板。删除Label控件用DropDownList控件代替，并设置DropDownList的ID属性为Categories。As weve seen in previous tutorials, the template can be edited through the Designer or directly from the declarative syntax. To edit it through the Designer, click on the Edit Templates link from the GridViews smart tag and choose to work with the Category fields EditItemTemplate. Remove the Label Web control and replace it with a DropDownList control, setting the DropDownLists ID property to Categories.图5：删除EditItemTemplate模板中的TextBox并增加一个DropDownListFigure 5: Remove the TexBox and Add a DropDownList to the EditItemTemplate下一步我们需要为DropDownList绑定category。从智能标记中点击“选择数据源”链接并选择创建一个新的ObjectDataSource，命名为CategoriesDataSource。We next need to populate the DropDownList with the available categories. Click on the Choose Data Source link from the DropDownLists smart tag and opt to create a new ObjectDataSource named CategoriesDataSource.图6：创建一个新的ObjectDataSource控件CategoriesDataSourceFigure 6: Create a New ObjectDataSource Control Named CategoriesDataSource为了使ObjectDataSource显示所有的category，我们将它与CategoriesBLL类的GetCategories()方法进行绑定。To have this ObjectDataSource return all of the categories, bind it to the CategoriesBLL classs GetCategories() method.图7：将ObjectDataSource控件用GategoriesBLL的GetCategories()方法进行绑定Figure 7: Bind the ObjectDataSource to the CategoriesBLLs GetCategories() Method最后，配置DropDownList，用CategoryName字段作为显示字段而CategoryID作为Value字段。Finally, configure the DropDownLists settings such that the CategoryName field is displayed in each DropDownList ListItem with the CategoryID field used as the value.图8：用CategoryName作为显示字段并用CategoryID作为Value字段Figure 8: Have the CategoryName Field Displayed and the CategoryID Used as the Value改动后CategoryName的模板项将拥有一个DropDownList控件和一个ObjectDataSource，元素标记大致如下：After making these changes the declarative markup for the EditItemTemplate in the CategoryName TemplateField will include both a DropDownList and an ObjectDataSource: asp:Label ID=Label1 runat=server Text= 注意：EditItemTemplate模板中的DropDownList必须启用视图状态（view state）。下面我们将会在DropDownList的元素标记中增加数据绑定语法和数据绑定命令例如Eval()和Bind()，它们要求启用视图状态，否则将无法显示。 Note: The DropDownList in the EditItemTemplate must have its view state enabled. We will soon add databinding syntax to the DropDownLists declarative syntax and databinding commands like Eval() and Bind() can only appear in controls whose view state is enabled.重复以上步骤为SupplierName的模板列中EditItemTemplate模板添加DropDownList控件，并命名为Suppliers。包括增加DropDownList控件和创建另一个ObjectDataSource，注意新的ObjectDataSource调用的是SuppliersBLL 类的 GetSuppliers()方法。另外，配置Suppliers下拉框的显示字段为CompanyName，value字段为SupplierID。Repeat these steps to add a DropDownList named Suppliers to the SupplierName TemplateFields EditItemTemplate. This will involve adding a DropDownList to the EditItemTemplate and creating another ObjectDataSource. The Suppliers DropDownLists ObjectDataSource, however, should be configured to invoke the SuppliersBLL classs GetSuppliers() method. Additionally, configure the Suppliers DropDownList to display the CompanyName field and use the SupplierID field as the value for its ListItems.两个下拉框都增加完成后，在浏览器中查看页面并点击“Chef Antons Cajun Seasoning”产品的编辑按钮。如图9所示，产品的category和supplier列都变成了下拉框并包含了对应的category和supplier选项集。但是，你会发现下拉框中默认选择的是下拉框的第一项（category是Beverages，supplier是Exotic Liquids），事实上它们分别应该是Condiment和New Orleans Cajun Delights。After adding