50为GridView控件添加Checkbox.docx
- 文档编号:9737600
- 上传时间:2023-02-06
- 格式:DOCX
- 页数:13
- 大小:513.76KB
50为GridView控件添加Checkbox.docx
《50为GridView控件添加Checkbox.docx》由会员分享,可在线阅读,更多相关《50为GridView控件添加Checkbox.docx(13页珍藏版)》请在冰豆网上搜索。
50为GridView控件添加Checkbox
五十:
为GridView控件添加Checkbox
导言:
在前面的教程里我们探讨了如何为GridView控件添加radiobuttons列。
当用户最多只能选择一项数据时,我们可以在用户界面里添加radiobuttons列,而有时候,我们需要选择任意多项数据。
比如,基于Web的邮箱客户端列出了一系列的邮件,及一列checkboxes,用户可选择任意封邮件并执行相同的操作,比如移动到另一个文件夹或将之删除。
在本教程,我们将探讨如何添加checkboxes列,以及发生页面回传后如何确定到底选择了哪些checkboxes。
特别的,我们将练习一个类似于基于web的邮箱客户端用户界面。
实例将包含一个启用了分页功能的GridView,用于列出表Products中的产品,每行记录包含一个checkbox(见图1)。
当点击“DeleteSelectedProducts”按钮时,删除选中的产品。
图1:
每个ProductRow包含一个Checkbox
第1步:
添加一个启用分页的GridView控件展示产品信息
在考虑添加checkboxes列前,我们先创建一个展示产品的GridView控件并启用分页。
在文件夹EnhancedGridView里打开CheckBoxField.aspx页面并进入设计模式,从工具箱拖一个GridView到页面,设其ID为Products。
下一步,将其绑定到一个名为ProductsDataSource的ObjectDataSource控件。
该ObjectDataSource控件使用ProductsBLL类,调用GetProducts()方法返回数据。
因为本例的GridView控件是只读的,在UPDATE,INSERT和DELETE选项卡的下拉列表里选“(None)”。
图2:
创建一个名为ProductsDataSource的ObjectDataSource控件
图3:
设置该ObjectDataSource控件调用GetProducts()方法获取数据
图4:
在UPDATE,INSERT和DELETE选项卡的下拉列表里选“(None)”。
完成设置后,VisualStudio会自动为相关数据域(datafields)创建BoundColumns及一个CheckBoxColumn。
就像我们在前面的教程做的那样,将除了ProductName,CategoryName和UnitPrice外的其它BoundFields删除,并将相关HeaderText属性设置为“Product”,“Category”和“Price”。
将UnitPriceBoundField格式化为货币形式。
在智能标签里选择“EnablePaging”启用GridView的分页功能。
为了在用户界面里可以删除选中的产品,在GridView下面添加一个ButtonWeb控件,设其ID为DeleteSelectedProducts,Text属性为“DeleteSelectedProducts”。
在本例中我们不会直接从数据库删除数据,而是显示一条消息,说明要删除的是什么产品。
因此,在按钮下面添加一个LabelWeb控件,设其ID为DeleteResults,清空其Text属性,将Visible和EnableViewState属性都设为false。
做完上述修改后,GridView,ObjectDataSource,Button和Label的声明代码应和下面的差不多:
?
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
GridViewID="Products"runat="server"AutoGenerateColumns="False" DataKeyNames="ProductID"DataSourceID="ProductsDataSource" AllowPaging="True"EnableViewState="False"> BoundFieldDataField="ProductName"HeaderText="Product" SortExpression="ProductName"/> BoundFieldDataField="CategoryName"HeaderText="Category" ReadOnly="True"SortExpression="CategoryName"/> BoundFieldDataField="UnitPrice"DataFormatString="{0: c}" HeaderText="Price"HtmlEncode="False" SortExpression="UnitPrice"/> GridView> ObjectDataSourceID="ProductsDataSource"runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="GetProducts"TypeName="ProductsBLL"> ObjectDataSource> ButtonID="DeleteSelectedProducts"runat="server" Text="DeleteSelectedProducts"/> LabelID="DeleteResults"runat="server"EnableViewState="False" Visible="False"> Label> 花几分钟在浏览器里观看页面(见图5),你可以看到前10个产品的name,category以及price。 图5: 显示前10个产品的name,category以及price 第2步: 添加一个Checkboxes列 由于ASP.NET2.0包含一个CheckBoxField,我们也许自然会想到用它来为GridView控件添加一个Checkboxes列。 然而,并不是那样回事。 因为CheckBoxField是专门设计来与布尔数据域(Booleandatafield)打交道。 也就是说,当数据域的值可以用来判断是否选中了checkbox时,CheckBoxField才派地上用场。 CheckBoxField不能正确的包含一列未选中的checkboxes。 作为替换,我们必须添加一个模板,并在其ItemTemplate模式里添加一个CheckBoxWeb控件。 我们要在GridView控件Products里添加一个模板,并放在最左边。 在GridView的智能标签里点“编辑模板”,在ItemTemplate模式里添加一个CheckBoxWeb控件,设其ID为ProductSelector。 图6: 在模板的ItemTemplate模式里添加一个名为ProductSelector的CheckBoxWeb控件 添加模板和CheckBoxWeb控件后,每一行记录将包含一个CheckBox按钮,如图7所示: 图7: 每个产品行包含一个CheckBox按钮 第3步: 页面回传后确定点击了哪些Checkboxes按钮 现在我们已经创建了一个checkboxes列,但在页面发生回传后还不能确定点击了哪些Checkboxes按钮,但当点击“DeleteSelectedProducts”按钮时,我们需要确定要删除的是哪些产品,也即点击了哪些Checkboxes按钮。 我们可以运用GridView的Rows属性访问其数据行(datarows),编程访问该记录行的CheckBox控件,根据其Checked属性来判断是否选中了该按钮。 为名为DeleteSelectedProducts的ButtonWeb控件的Click事件创建一个事件处理器,添加如下代码: ? 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 protectedvoidDeleteSelectedProducts_Click(objectsender,EventArgse) { boolatLeastOneRowDeleted=false; //IteratethroughtheProducts.Rowsproperty foreach(GridViewRowrowinProducts.Rows) { //AccesstheCheckBox CheckBoxcb=(CheckBox)row.FindControl("ProductSelector"); if(cb! =null&&cb.Checked) { //Deleterow! (Well,notreally...) atLeastOneRowDeleted=true; //First,gettheProductIDfortheselectedrow intproductID= Convert.ToInt32(Products.DataKeys[row.RowIndex].Value); //"Delete"therow DeleteResults.Text+=string.Format( "ThiswouldhavedeletedProductID{0} } } //ShowtheLabelifatleastonerowwasdeleted... DeleteResults.Visible=atLeastOneRowDeleted; } GridView控件的Rows属性返回构成GridView数据行的GridViewRow实例集合。 而foreach()循环将遍历集合中的每一个实例。 在一个GridViewRow对象中,我们通过使用row.FindControl("controlID")的形式来访问该行记录的CheckBox按钮。 如果选择了该按钮,从DataKeys集合里获取与该行记录相对应的ProductID值。 在本例,我们仅仅是在Label控件DeleteResults里显示相关提示信息,而在实际的应用程序中,我们应该调用ProductsBLL类的DeleteProduct(productID)方法。 添加完上述事件处理器后,点击“DeleteSelectedProducts”按钮,将会显示那些被选中的产品的ProductID值。 图8: 当点击“DeleteSelectedProducts”时,将列出所选产品的ProductID值 第4步: 添加“CheckAll”和“UncheckAll”按钮 如果用户想删除当前页面上的所有产品,则必须点击每行的checkbox按钮,稍 显麻烦。 我们可以添加一个“CheckAll”按钮,当点击该按钮时可以选中页面上的所有checkbox按钮。 反之,添加一个“UncheckAll”按钮。 在页面上添加2个ButtonWeb控件,放在GridView的上面。 设第一个的ID为CheckAll,Text属性为“CheckAll”;设第二个的ID为UncheckAll,Text属性为“UncheckAll”,如下: ? 1 2 3 ButtonID="CheckAll"runat="server"Text="CheckAll"/> ButtonID="UncheckAll"runat="server"Text="UncheckAll"/> 接着,在后台代码类(code-behindclass)里创建一个名为ToggleCheckState(checkState)的方法。 调用该方法时,其遍历GridView控件Products的Rows集合,根据传入的参数checkState对每个CheckBox的Checked属性赋值。 ? 1 2 3 4 5 6 7 8 9 10 11 privatevoidToggleCheckState(boolcheckState) { //IteratethroughtheProducts.Rowsproperty foreach(GridViewRowrowinProducts.Rows) { //AccesstheCheckBox CheckBoxcb=(CheckBox)row.FindControl("ProductSelector"); if(cb! =null) cb.Checked=checkState; } } 然后,为button控件CheckAll和UncheckAll创建Click事件处理器,在CheckAll的Click事件处理器中,仅仅简单的调用ToggleCheckState(true);在UncheckAll的事件处理器中,调用ToggleCheckState(false),如下: ? 1 2 3 4 5 6 7 8 9 protectedvoidCheckAll_Click(objectsender,EventArgse) { ToggleCheckState(true); } protectedvoidUncheckAll_Click(objectsender,EventArgse) { ToggleCheckState(false); } 当点击“CheckAll”按钮时,引发页面回传,并选中所有的checkbox按钮;点击“UncheckAll”时,弃选所有的checkbox按钮。 图9为点击“CheckAll”按钮后的界面。 图9: 点“CheckAll”按钮选择所有的Checkbox 注意: 如果要全选或弃选checkbox按钮的话,我们也可以通过点击标题行(headerrow)的checkbox来实现,并且在页面发生回转后才能生效。 完全使用客户端脚本(client-sidescript)来执行全选或弃选checkbox按钮,那将是一种更爽的用户体验。 总结: 当用户需要在GridView里任意的选择记录时,我们可以添加一列checkbox按按钮。 正如本章探究的那样,在GridView里添加一个模板,再在模板里添加一个CheckBoxWeb控件。 如果使用Web控件(对比上一章,我们直接在模板里注入代码),在页面发生回转后,ASP.NET自动的记得选中了或没选中哪些CheckBox控件。 我们也可以编程访问这些CheckBox,判断是否选中了某个CheckBox,或改变其checked状态。
",productID);
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 50 GridView 控件 添加 Checkbox