在ASP.NET 2.0中操作数据之五十:为GridView控件添加Checkbox_自学过程

导言:

  在前面的教程里我们探讨了如何为GridView控件添加radio buttons列。当用户最多只能选择一项数据时,我们可以在用户界面里添加radio buttons列,而有时候,我们需要选择任意多项数据。比如,基于Web的邮箱客户端列出了一系列的邮件,及一列checkboxes,用户可选择任意封邮件并执行相同的操作,比如移动到另一个文件夹或将之删除。

  在本教程,我们将探讨如何添加checkboxes列,以及发生页面回传后如何确定到底选择了哪些checkboxes。特别的,我们将练习一个类似于基于web的邮箱客户端用户界面。实例将包含一个启用了分页功能的GridView,用于列出表Products中的产品,每行记录包含一个checkbox(见图1)。当点击“Delete Selected Products”按钮时,删除选中的产品。


图1:每个Product Row包含一个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)”。

  完成设置后,Visual Studio会自动为相关数据域(data fields)创建BoundColumns及一个CheckBoxColumn。就像我们在前面的教程做的那样,将除了 ProductName, CategoryName和UnitPrice外的其它BoundFields删除,并将相关HeaderText属性设置为“Product”, “Category”和“Price”。将UnitPrice BoundField格式化为货币形式。在智能标签里选择“Enable Paging”启用GridView的分页功能。

  为了在用户界面里可以删除选中的产品,在GridView下面添加一个Button Web控件,设其ID为DeleteSelectedProducts,Text属性为“Delete Selected Products”。在本例中我们不会直接从数据库删除数据,而是显示一条消息,说明要删除的是什么产品。因此,在按钮下面添加一个Label Web控件,设其ID为DeleteResults,清空其Text属性, 将Visible和EnableViewState属性都设为false。

做完上述修改后,GridView, ObjectDataSource, Button和Label的声明代码应和下面的差不多:

<p>
 <asp:GridView ID="Products" runat="server" AutoGenerateColumns="False"
  DataKeyNames="ProductID" DataSourceID="ProductsDataSource"
  AllowPaging="True" EnableViewState="False">
  <Columns>
   <asp:BoundField DataField="ProductName" HeaderText="Product"
    SortExpression="ProductName" />
   <asp:BoundField DataField="CategoryName" HeaderText="Category"
    ReadOnly="True" SortExpression="CategoryName" />
   <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}"
    HeaderText="Price" HtmlEncode="False"
    SortExpression="UnitPrice" />
  </Columns>
 </asp:GridView>

 <asp:ObjectDataSource ID="ProductsDataSource" runat="server"
  OldValuesParameterFormatString="original_{0}"
  SelectMethod="GetProducts" TypeName="ProductsBLL">
 </asp:ObjectDataSource>
</p>
<p>
 <asp:Button ID="DeleteSelectedProducts" runat="server"
  Text="Delete Selected Products" />
</p>
<p>
 <asp:Label ID="DeleteResults" runat="server" EnableViewState="False"
  Visible="False"></asp:Label>
</p>

花几分钟在浏览器里观看页面(见图5),你可以看到前10个产品的name, category以及price。


图5:显示前10个产品的name, category以及price

 第2步:添加一个Checkboxes列

  由于ASP.NET 2.0 包含一个CheckBoxField,我们也许自然会想到用它来为GridView控件添加一个Checkboxes列。然而,并不是那样回事。因为CheckBoxField是专门设计来与布尔数据域(Boolean data field)打交道。
也就是说,当数据域的值可以用来判断是否选中了checkbox时,CheckBoxField才派地上用场。CheckBoxField不能正确的包含一列未选中的checkboxes。

  作为替换,我们必须添加一个模板,并在其ItemTemplate模式里添加一个CheckBox Web控件。我们要在GridView控件Products里添加一个模板,并放在最左边。在GridView的智能标签里点“编辑模板”,在ItemTemplate模式里添加一个CheckBox Web控件,设其ID为ProductSelector。


图6:在模板的ItemTemplate模式里添加一个名为ProductSelector的CheckBox Web控件

添加模板和CheckBox Web控件后,每一行记录将包含一个CheckBox按钮,如图7所示:


图7:每个产品行包含一个CheckBox按钮

第3步:页面回传后确定点击了哪些Checkboxes按钮

  现在我们已经创建了一个checkboxes列,但在页面发生回传后还不能确定点击了哪些Checkboxes按钮,但当点击“Delete Selected Products”按钮时,我们需要确定要删除的是哪些产品,也即点击了哪些Checkboxes按钮。

  我们可以运用GridView的Rows属性访问其数据行(data rows),编程访问该记录行的CheckBox控件,根据其Checked属性来判断是否选中了该按钮。

为名为DeleteSelectedProducts的Button Web控件的Click事件创建一个事件处理器,添加如下代码:

protected void DeleteSelectedProducts_Click(object sender, EventArgs e)
{
 bool atLeastOneRowDeleted = false;

 // Iterate through the Products.Rows property
 foreach (GridViewRow row in Products.Rows)
 {
  // Access the CheckBox
  CheckBox cb = (CheckBox)row.FindControl("ProductSelector");
  if (cb != null && cb.Checked)
  {
   // Delete row! (Well, not really...)
   atLeastOneRowDeleted = true;

   // First, get the ProductID for the selected row
   int productID =
    Convert.ToInt32(Products.DataKeys[row.RowIndex].Value);

   // "Delete" the row
   DeleteResults.Text += string.Format(
    "This would have deleted ProductID {0}<br />", productID);
  }
 }

 // Show the Label if at least one row was deleted...
 DeleteResults.Visible = atLeastOneRowDeleted;
}

  GridView控件的Rows属性返回构成GridView数据行的GridViewRow实例集合。而foreach()循环将遍历集合中的每一个实例。在一个GridViewRow对象中,我们通过使用row.FindControl("controlID")的形式来访问该行记录的CheckBox按钮。如果选择了该按钮,从DataKeys集合里获取与该行记录相对应的ProductID值。

  在本例,我们仅仅是在Label控件DeleteResults里显示相关提示信息,而在实际的应用程序中,我们应该调用ProductsBLL类的DeleteProduct(productID)方法。

  添加完上述事件处理器后,点击“Delete Selected Products”按钮,将会显示那些被选中的产品的ProductID值。


图8:当点击“Delete Selected Products”时,将列出所选产品的ProductID值

第4步:添加“Check All”和“Uncheck All”按钮

  如果用户想删除当前页面上的所有产品,则必须点击每行的checkbox按钮,稍
显麻烦。我们可以添加一个“Check All”按钮,当点击该按钮时可以选中页面上的所有checkbox按钮。反之,添加一个“Uncheck All”按钮。

  在页面上添加2个Button Web控件,放在GridView的上面。设第一个的ID为CheckAll,Text属性为“Check All”; 设第二个的ID为UncheckAll,Text属性为“Uncheck All”,如下:

<asp:Button ID="CheckAll" runat="server" Text="Check All" />
 
<asp:Button ID="UncheckAll" runat="server" Text="Uncheck All" />

  接着,在后台代码类(code-behind class)里创建一个名为ToggleCheckState(checkState)的方法。调用该方法时,其遍历GridView控件Products的Rows集合,根据传入的参数checkState对每个CheckBox的Checked属性赋值。

private void ToggleCheckState(bool checkState)
{
 // Iterate through the Products.Rows property
 foreach (GridViewRow row in Products.Rows)
 {
  // Access the CheckBox
  CheckBox cb = (CheckBox)row.FindControl("ProductSelector");
  if (cb != null)
   cb.Checked = checkState;
 }
}

  然后,为button控件CheckAll和UncheckAll创建Click事件处理器,在CheckAll的Click事件处理器中,仅仅简单的调用ToggleCheckState(true); 在UncheckAll的事件处理器中,调用ToggleCheckState(false),如下:

protected void CheckAll_Click(object sender, EventArgs e)
{
 ToggleCheckState(true);
}

protected void UncheckAll_Click(object sender, EventArgs e)
{
 ToggleCheckState(false);
}

  当点击“Check All”按钮时,引发页面回传,并选中所有的checkbox按钮;点击“Uncheck All”时,弃选所有的checkbox按钮。图9为点击“Check All”按钮后的界面。


图9:点“Check All”按钮选择所有的Checkbox

  注意:如果要全选或弃选checkbox按钮的话,我们也可以通过点击标题行(header row)的checkbox来实现,并且在页面发生回转后才能生效。完全使用客户端脚本(client-side script)来执行全选或弃选checkbox按钮,那将是一种更爽的用户体验。

总结:

  当用户需要在GridView里任意的选择记录时,我们可以添加一列checkbox按按钮。正如本章探究的那样,在GridView里添加一个模板,再在模板里添加一个CheckBox Web控件。如果使用Web控件(对比上一章,我们直接在模板里注入代码),在页面发生回转后,ASP.NET自动的记得选中了或没选中哪些CheckBox控件。我们也可以编程访问这些CheckBox,判断是否选中了某个CheckBox,或改变其checked状态。

  祝编程快乐!

作者简介

  本系列教程作者 Scott Mitchell,著有六本ASP/ASP.NET方面的书,是4GuysFromRolla.com的创始人,自1998年以来一直应用 微软Web技术。大家可以点击查看全部教程《[翻译]Scott Mitchell 的ASP.NET 2.0数据教程》,希望对大家的学习ASP.NET有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索asp.net
, checkbox
gridview
,以便于您获取更多的相关知识。

时间: 2024-10-07 20:59:51

在ASP.NET 2.0中操作数据之五十:为GridView控件添加Checkbox_自学过程的相关文章

ASP.NET 2.0数据教程之五十一:为GridView控件添加Radio Buttons列

返回"ASP.NET 2.0数据教程目录" 第51到53章为优化GridView系列 导言: GridView控件提供了大 量的内置功能.它包含了一系列的域(field)来显示诸如text.images. hyperlinks和buttons.另外它支持模板(template)用于用户自定义界面.我们 可以构建这样一个GridView控件,用户仅需要点击控件里的一个按钮,每一条记 录行都可以选择.编辑.删除.除了控件本身内置的功能外,在某些情况下,我 们添加一些额外的.控件没有内置的功

在ASP.NET 2.0中操作数据之四十:自定义DataList编辑界面_自学过程

导言 DataList的编辑界面由EditItemTemplate里的标记语言和web控件定义.在目前为止所做的DataList编辑功能的例子里,编辑界面都只包含TextBox.在前面一章里,我们通过添加验证控件来增加了用户体验,提高了可用性. EditItemTemplate可以包含除了TextBox以外的很多控件,比如DropDownList, RadioButtonList, Calendar等.和使用TextBox一样,使用这些控件自定义编辑界面时,步骤如下: 为EditItemTemp

在ASP.NET 2.0中操作数据之五十九:使用SQL缓存依赖项SqlCacheDependency_自学过程

导言: 在56和57章探讨的缓存技术使用的是基于时间的缓存周期,当过了某段时间后便将缓存数据从内存清除.当设置缓存时间为x秒时,数据在x秒内都是"新"的.当然,就像在60章谈到的那样,对静态数据来说,x可延伸到web应用程序的整个生命周期(lifetime). 当缓存数据时,基于时间周期的技术因为其易用性而常常被采用,不过又常常不那么完美.理想的状态是这样的:数据库数据还是应缓存在内存,直到源数据(underlying data)发生改变时才从内存清除.这样的话可以最大化的获取缓存带来

在ASP.NET 2.0中操作数据之五十八:在程序启动阶段缓存数据_自学过程

导言: 前面2章考察了在表现层和缓存层缓存数据.在第56章,我们探讨了在表现层设置ObjectDataSource的相关cache属性来缓存数据.在第57章,我们探讨了创建一个单独的分开的缓存层.这2章都是采用"应激装载"(reactive loading)的模式来缓存数据.该模式下,每次请求数据时,系统先检查其是否在内存,如果没有,则从数据源--比如数据库,来获取数据,然后将其存储在内存里.该模式的优势在于执行起来很容易:而缺点之一在于应"请求"(requests

在ASP.NET 2.0中操作数据之五十四:添加新记录时包含一个文件上传选项_自学过程

导言: 在前面2节教程,我们探讨了如何使用FileUpload控件从客户端向服务器上传文件,以及如何在数据Web控件里显示二进制数据. 在本节,我们将创建一个web页面以添加新的种类.除了为类的name和description属性添加TextBoxes控件外,我们还要在页面上添加2个FileUpload控件--一个用来上传新类的图片,另一个用来上传类的小说明册子.上传的图片将直接存储在新记录的Picture列.与此相反,小册子将存储在~/Brochures 文件夹,同时将文件路径存储在新记录的B

在ASP.NET 2.0中操作数据之五十五:编辑和删除现有的二进制数据_自学过程

导言: 在前面的3章里我们为处理二进制数据添加了很多的功能.我们首先在表Categories里添加BrochurePath列,并更新了体系结构.同样,为了处理表Categorie里现有的Picture列,我们在数据访问层和业务逻辑层里增加了相应的方法.同时我们创建一个页面,在GridView控件里显示二进制数据--包含一个指向说明小册子的下载链接,并将每个类的图片显示在<img>元素里.同时我们添加一个DetailsView控件,供用户添加新的类,并上传其图片和小册子数据. 剩下的就是添加编辑

在ASP.NET 2.0中操作数据之二十一:实现开放式并发_自学过程

导言 对于那些仅仅允许用户查看数据,或者仅有一个用户可以修改数据的web应用软件,不存在多用户并发冲突的问题.然而对于那些允许多个用户修改或删除数据的web应用软件,则有可能发生一个用户所做的更改与另一个并发用户的更改冲突.在没有任何并发策略的地方,当两个用户同时编辑某一条记录,最后提交的用户的更改将覆盖先提交的用户所作的更改. 例如,假设两个用户,Jisun和Sam,都访问我们的应用软件中的一个页面,这个页面允许访问者通过一个GridView控件更新和删除产品数据.他们都同时点击GridVie

在ASP.NET 2.0中操作数据之一:创建一个数据访问层_自学过程

导言 作为web开发人员,我们的生活围绕着数据操作.我们建立数据库来存储数据,写编码来访问和修改数据,设计网页来采集和汇总数据.本文是研究在ASP.NET 2.0中实现这些常见的数据访问模式之技术的长篇系列教程的第一篇.我们将从创建一个软件框架开始,这个框架的组成部分包括一个使用强类型的DataSet的数据访问层(DAL),一个实施用户定义的业务规则的业务逻辑层(BLL),以及一个由共享页面布局的ASP.NET网页组成的表现层.在打下这个后端的基础工作之后,我们将开始转向报表,示范如何显示,汇总

在ASP.NET 2.0中操作数据之六:编程设置ObjectDataSource的参数值_自学过程

导言 正如我们在上一节的教程中所看到的,有很多可供选择的方式把参数的值传递到OjbectDataSource的方法里.假如参数值是采用硬编码方式,来源于页面上的一个Web控件,又或者其他可被数据源Parameter对象读取的源,那么这个值可以绑定到输入参数而不需要写一行的代码. 然而有些时候,参数值来自某些在数据源的内置Parameter对象里还没有计算出来的源.假如我们的站点支持我们的考虑那么我们也许希望参数基于当前登录用户.又或者我们在参数传送到ObjectDataSource的隐含对象的方