40自定义DataList编辑界面.docx
《40自定义DataList编辑界面.docx》由会员分享，可在线阅读，更多相关《40自定义DataList编辑界面.docx（13页珍藏版）》请在冰豆网上搜索。
40自定义DataList编辑界面
导言
DataList的编辑界面由EditItemTemplate里的标记语言和web控件定义。
在目前为止所做的DataList编辑功能的例子里，编辑界面都只包含TextBox。
在前面一章里，我们通过添加验证控件来增加了用户体验，提高了可用性。
EditItemTemplate可以包含除了TextBox以外的很多控件，比如DropDownLists,RadioButtonLists,Calendars等。
和使用TextBox一样，使用这些控件自定义编辑界面时，步骤如下：
为EditItemTemplate添加控件.
使用绑定语法将相关的字段值赋给控件的属性.
在UpdateCommand事件处理里,编程访问web控件的值，并将它传给相关的BLL的方法.
本章我们将为DataList创建一个更丰富的编辑界面，它将包含DropDownList和CheckBox。
我们将创建一个列出product信息的DataList，用户可以更新它的name，supplier，category和discontinuedstatus。
见图1。
图1:
编辑界面包含一个TextBox,两个DropDownLists和一个CheckBox
第一步:
显示Product信息
在创建DataList的编辑界面前，我们需要先创建一个只读界面。
先打开EditDeleteDataList文件夹下的CustomizedUI.aspx页，拖一个DataList进来，将ID设为Products。
通过DataList的智能标签，创建一个名为ProductsDataSource的ObjectDataSource，用ProductsBLL类的GetProducts方法配置它。
象前面一章一样，我们将直接通过BLL来更新product信息。
在UPDATE,INSERT,DELETE标签里选择None.
图2:
在UPDATE,INSERT,DELETE标签的下拉列表里选择（None）
配置完ObjectDataSource后，VisualStudio会自动创建默认的ItemTemplate，列出每个字段的值。
将productname用
表示，并添加一个Editbutton，确保将它的CommandName属性设为“Edit”.我的标记语言如下：
ASP.NET
LabelID="ProductNameLabel"runat="server"
Text='<%#Eval（"ProductName"）%>'/>
Category:
LabelID="CategoryNameLabel"runat="server"
Text='<%#Eval（"CategoryName"）%>'/>
Supplier:
LabelID="SupplierNameLabel"runat="server"
Text='<%#Eval（"SupplierName"）%>'/>
|
Discontinued:
LabelID="DiscontinuedLabel"runat="server"
Text='<%#Eval（"Discontinued"）%>'/>
Price:
LabelID="UnitPriceLabel"runat="server"
Text='<%#Eval（"UnitPrice","{0:
C}"）%>'/>
|
Buttonrunat="Server"ID="EditButton"
Text="Edit"CommandName="Edit"/>
|
上面的标记语言用
表示productname，4列的
展示其它字段。前面已经讨论过Styles.css里定义的ProductPropertyLabel和productPropertyValue类。
浏览该页，见图3。
图3:
显示product信息
第二步:
为编辑界面添加web控件
首先向EditItemTemplate里添加需要的web控件。
我们需要用一个DropDownList表示category，一个DropDownList表示supplier，一个CheckBox表示discontinuedstate。
由于本例中不用编辑price，所以仍然用Label来表示它。
点击DataList的智能标签上的“EditTemplates”，选择EditItemTemplate,为它添加一个ID为Categories的EditItemTemplate。
图4:
为Categories添加一个DropDownList
然后从DropDownList的智能标签里选择“ChooseDataSource”，创建一个名为CategoriesDataSource的ObjectDataSource。
用CategoriesBLL类的GetCategories（）方法配制它（见图5）。
数据源配置向导会要求为ListItemText和Value选择字段。
让DropDownList显示CategoryName，CategoryID作为Value,见图6。
图5:
创建ObjectDataSource
图6:
配置DropDownList的Display字段和Value字段
重复上面的步骤，为suppliers创建一个ID为Suppliers的DropDownList和一个名为SuppliersDataSource的ObjectDataSource。
然后为discontinuedstate添加一个CheckBox，为name添加一个TextBox。
将他们的ID分别设为Discontinued和ProductName。
为productname添加一个RequiredFieldValidator确保用户必须提供这个值。
最后添加Update和Cancelbutton。
记得这两个button的CommandName属性必须分别设为“Update”和“Cancel”。
你可以将编辑界面以你喜欢的方式展示。
我选择使用和只读界面一样的界面来显示，见下面的声明代码和截图。
ASP.NET
LabelID="ProductNameLabel"runat="server"
Text='<%#Eval（"ProductName"）%>'/>
Name:
TextBoxrunat="server"ID="ProductName"Width="90%"/>
RequiredFieldValidatorID="RequiredFieldValidator1"
ControlToValidate="ProductName"
ErrorMessage="Youmustenteranamefortheproduct."
runat="server">*
RequiredFieldValidator>
|
Category:
DropDownListID="Categories"runat="server"
DataSourceID="CategoriesDataSource"
DataTextField="CategoryName"DataValueField="CategoryID"/>
Supplier:
DropDownListID="Suppliers"
DataSourceID="SuppliersDataSource"DataTextField="CompanyName"
DataValueField="SupplierID"runat="server"/>
|
Discontinued:
CheckBoxrunat="server"id="Discontinued"/>
Price:
LabelID="UnitPriceLabel"runat="server"
Text='<%#Eval（"UnitPrice","{0:
C}"）%>'/>
|
Buttonrunat="Server"ID="UpdateButton"CommandName="Update"
Text="Update"/>
Buttonrunat="Server"ID="CancelButton"CommandName="Cancel"
Text="Cancel"CausesValidation="False"/>
|
ObjectDataSourceID="CategoriesDataSource"runat="server"
OldValuesParameterFormatString="original_{0}"SelectMethod="GetCategories"
TypeName="CategoriesBLL">
ObjectDataSource>
ObjectDataSourceID="SuppliersDataSource"runat="server"
OldValuesParameterFormatString="original_{0}"SelectMethod="GetSuppliers"
TypeName="SuppliersBLL">
ObjectDataSource>
图7:
编辑界面和只读界面的展示差不多
第三步:
创建EditCommand和CancelCommandEventHandlers
现在在EditItemTemplate里除了UnitPriceLabel外还没有绑定语法（从ItemTemplate复制过来的代码）。
在添
加绑定语法前我们首先为DataList的EditCommand和CancelCommand创建事件处理。
EditCommand事件处理的目标是为了将Editbutton被点击的item展示为编辑状态，而CancelCommand的目标是将DataList返回到编辑前状态。
见下面的代码：
C#
protectedvoidProducts_EditCommand（objectsource,DataListCommandEventArgse）
{
//SettheDataList'sEditItemIndexpropertyandrebindthedata
Products.EditItemIndex=e.Item.ItemIndex;
Products.DataBind（）;
}
protectedvoidProducts_CancelCommand（objectsource,DataListCommandEventArgse）
{
//ReturntoDataListtoitspre-editingstate
Products.EditItemIndex=-1;
Products.DataBind（）;
}
完成这些后，点击Editbutton会进入编辑界面，点击Cancelbutton会返回只读模式。
见图8。
由于现在还没有为编辑界面添加绑定语法，TextBox是空白的，CheckBox未被选中，两个DropDownList里都是第一个item被选中。
图8:
点击EditButton显示编辑界面
第四步:
为编辑界面增加绑定语法
为了让编辑界面显示当前product的值，我们需要使用绑定语法将字段的值赋给web控件。
绑定语法可以通过选择web控件的智能标签的“EditDataBindings”或者直接添加声明语法来实现。
将ProductName字段的值赋给ProductNameTextBox的Text属性，CategoryID和SupplierID字段赋给Categories和SuppliersDropDownList的SelectedValue属性，Discontinued字段赋给DiscontinuedCheckBox的Checked属性。
完成这些后，浏览页面并点击Editbutton.见图9。
图9:
点击EditButton显示编辑界面
第五步:
在UpdateCommandEventHandler保存用户的更改
当用户编辑product并点Updatebutton后，会postback并激发UpdateCommand事件。
在事件处理里，我们需要从EditItemTemplate里读出web控件的值，并和BLL交互，然后更新数据库里的product。
如我们在前面一章看到的那样，被更新的product的ProductID可以通过DataKeys集合来获取。
用户输入的值可以通过FindControl（"controlID"）来编程获取，见下面的代码：
C#
protectedvoidProducts_UpdateCommand（objectsource,DataListCommandEventArgse）
{
//Makesurethepageisvalid...
if（!
Page.IsValid）
return;
//ReadintheProductIDfromtheDataKeyscollection
intproductID=Convert.ToInt32（Products.DataKeys[e.Item.ItemIndex]）;
//Readintheproductnameandpricevalues
TextBoxproductName=（TextBox）e.Item.FindControl（"ProductName"）;
DropDownListcategories=（DropDownList）e.Item.FindControl（"Categories"）;
DropDownListsuppliers=（DropDownList）e.Item.FindControl（"Suppliers"）;
CheckBoxdiscontinued=（CheckBox）e.Item.FindControl（"Discontinued"）;
stringproductNameValue=null;
if（productName.Text.Trim（）.Length>0）
productNameValue=productName.Text.Trim（）;
intcategoryIDValue=Convert.ToInt32（categories.SelectedValue）;
intsupplierIDValue=Convert.ToInt32（suppliers.SelectedValue）;
booldiscontinuedValue=discontinued.Checked;
//CalltheProductsBLL'sUpdateProductmethod...
ProductsBLLproductsAPI=newProductsBLL（）;
productsAPI.UpdateProduct（productNameValue,categoryIDValue,supplierIDValue,
discontinuedValue,productID）;
//ReverttheDataListbacktoitspre-editingstate
Products.EditItemIndex=-1;
Products.DataBind（）;
}
代码首先检查Page.IsValid属性来确保所有的验证控件都返回合法值。
如果Page.IsValid为True，从DataKeys集合里读出被编辑的product的ProductID的值，并引用EditItemTemplate里的web控件。
然后将这些控件的值读到变量里，并传给UpdateProduct方法。
完成更新后，DataList会返回到编辑前的状态。
注意：
我省略了某章异常处理，目的是为了使本章的代码看起来目的性更强。
你可以在完成本章后自己添加异常处理的功能作为练习。
第六章:
处理空的CategoryID和SupplierID值
Northwind数据库允许Products表里的CategoryID和SupplierID列为空。
然而我们的编辑界面目前还没有提供可选空值。
如果我们试图编辑一个无论是Categ
升级会员 