四十自定义DataList编辑界面.docx
《四十自定义DataList编辑界面.docx》由会员分享,可在线阅读,更多相关《四十自定义DataList编辑界面.docx(17页珍藏版)》请在冰豆网上搜索。
四十自定义DataList编辑界面
在ASP.NET2.0中操作数据之四十:
自定义DataList编辑界面
作者:
heker2007字体:
[增加 减小]类型:
转载时间:
2016-05-12 我要评论
先前的编辑界面清一色的都是TextBox控件,当然EditItemTemplate还可以包含很多其他的控件,比如DropDownLists,RadioButtonLists,Calendars等,这一节就让我们看看如何实现添加其他的控件。
导言
DataList的编辑界面由EditItemTemplate里的标记语言和web控件定义。
在目前为止所做的DataList编辑功能的例子里,编辑界面都只包含TextBox。
在前面一章里,我们通过添加验证控件来增加了用户体验,提高了可用性。
EditItemTemplate可以包含除了TextBox以外的很多控件,比如DropDownList,RadioButtonList,Calendar等。
和使用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”.我的标记语言如下:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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”。
你可以将编辑界面以你喜欢的方式展示。
我选择使用和只读界面一样的界面来显示,见下面的声明代码和截图。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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"DataTextField="CompanyName"
DataSourceID="SuppliersDataSource"
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返回到编辑前状态。
见下面的代码:
?
1
2
3
4
5
6
7
8
9
10
11
12
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")来编程获取,见下面的代码:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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列为空。
然而我们的编辑界面目前还没有提供可选空值。
如果我们试图编辑一个无论是CategoryID还是SupplierID为空的product,将会产生ArgumentOutOfRangeException异常。
目前我们也没有将product的category或supplier的值从一个非空值转换为空值的方法。
为了在DropDownLists里添加空值,我们需要添加一个ListItem。
我将ListItem里的Text显示为"(None)",你可以将它赋为任何你希望的值(比如空字符串)。
最后,记得将DropDownLists的AppendDataBoundItems设为True。
如果你没有这么做,绑定到DropDownList的categories和suppliers会被添加的ListItem覆盖。
完成这些后,DropDownLists的标记语言看起来应该和下面差不多:
?
1
2
3
4
5
6
7
8
9
10
11
DropDownListID="Categories"DataSourceID="CategoriesDataSource"
DataTextField="CategoryName"DataValueField="CategoryID"runat="server"
SelectedValue='<%#Eval("CategoryID")%>'AppendDataBoundItems="True">
ListItemValue="Selected="True">(None)
ListItem>
<