您现在的位置是:网站首页> 编程资料编程资料

在ASP.NET 2.0中操作数据之四十九:为GridView控件添加RadioButton_自学过程_

2023-05-24 399人已围观

简介 在ASP.NET 2.0中操作数据之四十九:为GridView控件添加RadioButton_自学过程_

导言:

  GridView控件提供了大量的内置功能。它包含了一系列的域(field)来显示诸如text、images、hyperlinks和buttons。另外它支持模板(template)用于用户自定义界面。我们可以构建这样一个GridView控件,用户仅需要点击控件里的一个按钮,每一条记录行都可以选择、编辑、删除。除了控件本身内置的功能外,在某些情况下,我们添加一些额外的、控件没有内置的功能。在本章及接下来的2篇教程里我们将探讨如何优化GridView,以支持额外的功能。

  本篇及接下来的教程将主要探讨优化行选择程序(row-selection process),就像在教程《使用 GridView和DetailView实现的主/从报表》里考察的一样,我们在GridView控件里添加一个包含选择按钮的命令域(CommandField),点击该按钮后产生回传(postback),所选行的index值传给GridView控件的SelectedIndex属性。在那篇教程里我们看到了如何使用该功能显示所选行的详细信息。

  除了Select button,我们经常在用户界面包含radio button和checkbox用于选择记录。在某些情况下我们可以对GridView扩充,在每条记录里用radio button或checkbox替换掉Select button。比如,我们只希望选择GridView记录中的一条时,用radio button比用Select button好;再比如,当用户要选择多条记录时——就像在邮箱里同时删除几份邮件一样,用checkbox是最好的。本教程先考察为GridView添加radio buttons,再考察添加checkboxes。

第一步:创建优化GridView的Web页面

  在开始之前让我们在网站项目里创建一个本节及后面2节要用到的ASP.NET页面。新建一个名为EnhancedGridView的文件夹,然后,添加如下所示的页面,确保使用Site.master母版。

Default.aspx
RadioButtonField.aspx
CheckBoxField.aspx
InsertThroughFooter.aspx

//img.jbzj.com/file_images/article/201605/2016051609571910.gif
图1:添加相关页面

  像其它文件夹一样,Default.aspx页面将显示本节的所有教程。记得用户控件SectionLevelTutorialListing.ascx提供该功能,从解决方案管理器里将其拖到Default.aspx页面上。

//img.jbzj.com/file_images/article/201605/2016051609571911.gif
图2:添加用户控件SectionLevelTutorialListing.ascx

  最后,将这4篇教程添加到Web.sitemap文件里,特别的,加在“Using the SqlDataSource Control” 后:

完成后,花几分钟在浏览器查看该系列教程,如图所示:

//img.jbzj.com/file_images/article/201605/2016051609571912.gif
图3:Site Map里完整地列出了本系列教程

第2步:在GridView控件里显示供应商

  让我们创建一个GridView控件,用于显示来自美国的供应商列表,同时每行记录包含一个radio button。当点击radio button后,用户将查看到供应商提供的产品。在开始具体研究如何实现以前,我们先创建一个显示供应商的GridView。

  在文件夹EnhancedGridView里打开adioButtonField.aspx页面,进入设计模式,从工具箱拖一个GridView到页面。设其ID为Suppliers,在智能标签里选“创建新数据源”,特别的,我们选用ObjectDataSource,命名为SuppliersDataSource,然后选用SuppliersBLL 。

//img.jbzj.com/file_images/article/201605/2016051609571913.gif
图4:创建一个名为SuppliersDataSource的ObjectDataSource

//img.jbzj.com/file_images/article/201605/2016051609572214.gif
图5:设置该ObjectDataSource使用SuppliersBLL类

因为我们只想列出来自美国的供应商,在SELECT选项卡的下拉列表里选择 GetSuppliersByCountry(country)方法。

//img.jbzj.com/file_images/article/201605/2016051609572215.gif
图6:设置该ObjectDataSource使用SuppliersBLL类(原文如此)

在UPDATE选项卡选择“(None)”,点下一步

//img.jbzj.com/file_images/article/201605/2016051609572216.gif
图7:设置该ObjectDataSource使用SuppliersBLL类(原文如此)

  因为GetSuppliersByCountry(country)方法需要接受一个参数,向导提示我们设置参数源,在这里我们指定一个“硬编码”值(就本例而言,我们指定USA),在数据源下拉列表里选“None”,在指定值文本框输入“USA”。点“完成”结束向导设置。

//img.jbzj.com/file_images/article/201605/2016051609572617.gif
图8:为参数country使用默认值“USA”

  只保留GridView里的CompanyName, City和Country三列(BoundFields),其余的全部删除。同时将CompanyName列的HeaderText属性改为“Supplier”。设置完以后, GridView和ObjectDataSource控件的声明代码看起来和下面的差不多:

  在本篇教程,当点击某个供应商时,将在本业或另一页显示该供应商提供的产品。为达到该目的,我们在页面添加2个Button Web控件。ID分别为ListProducts和SendToProducts,当点击ListProducts按钮时,发生回传(postback),接着将在本页面显示该供应商的产品,当点击SendToProducts按钮时,将会链接到另一个页面,显示该供应商的产品。
图9显示了GridView控件和添加的两个Button Web控件。

//img.jbzj.com/file_images/article/201605/2016051609572618.gif
图9:显示供应商的 Name, City和Country信息

第3步:添加Radio Buttons列

  至此,GridView里包含company name, city和country三列,但还缺少radio buttons列。不幸的是GridView控件并不包含内置的RadioButtonField,因此只有我们自己手动添加。我们可以添加一个模板(TemplateField)并在其ItemTemplate模板里显示一个radio button。这样的话就为GridView控件的每一行记录添加了一个radio button。

  我们首先可能会想到直接在TemplateField的ItemTemplate模版里添加一个RadioButton Web控件。不错,这样将为每一行添加radio button,但是这些radio button不能聚合,因此不能形成互斥关系。造成的后果是,最终用户可以在GridView控件里同时选定多个radio button按钮。

  虽然这样做不能到达我们期望的要求,不过还是值得我们花时间来考察一下为什么这些radio button不能聚合。首先,为GridView添加一个TemplateField,放置在最左边,然后智能标签里选“编辑模板”,进入TemplateField的ItemTemplate 模板,从工具箱拖一个Radio Button控件到模板(见图10),设置其ID为RowSelector , GroupName属性为SuppliersGroup。

//img.jbzj.com/file_images/article/201605/2016051609572919.gif
图10:在ItemTemplate模板添加一个RadioButton控件

完成设置后,GridView的代码看起来应和下面的差不多:

  RadioButton的GroupName属性的作用在于:具有相同GroupName值的RadioButton控件被认为是一个组,在一个组里面只有一个控件可以被选择(即具有互斥性)。GroupName属性为radio button的名称特征(nameattribute)指定值,浏览器检查radio button的名称特征,再对其分组。

  在浏览器里查看页面,选择所有行,可以看出这些radio button并没有聚合(也就是不具有互斥性),如图11所示:

//img.jbzj.com/file_images/article/201605/2016051609573220.gif
图11:GridView的Radio Buttons没有聚合。

  不能聚合的原因在于:尽管将他们的GroupName属性设置为相同的,但提交的名称属性是不同的。在浏览器里点查看/源代码,检查这些radio button的代码:

  我们注意到,这里的name和id值和在属性窗口指定的准确值(exact values)相比,在开头多了一些其它ID值(比如id="ctl00_MainContent_Suppliers_ctl02_RowSelector" 和ID="RowSelector"相比),这些多出来的IDs值来自于这些 radio buttons的父级控件(parent controls)——GridViewRow、GridView、Content control以及Web Form。加上这些IDs的目的是使GridView控件里的每个rendered Web control(具体到本例就是这些radio button)具有唯一的id值和name值。

  这样做的原因在于:在客户端,便于浏览器区分每个rendered control(比如本章的radio button);在网络服务器端,便于服务器区分当页面回传时发生了什么事件或改变。比如,无论何时,当一个 RadioButton的选中状态(checked state)发生改变时,我们希望运行某些服务器端代码。为此,我们可以将RadioButton的AutoPostBack属性设置为true,同时为CheckChanged事件创建一个事件处理器。如果每个radio buttons的name和id值相同的话,当发生页面回转时,我们不能确定到底点击了哪个RadioButton。

  这样做的缺点在于,我们不能用RadioButton Web 控件在GridView里创建一个radio button列。因此,我们必须在GridView row里添加适当的代码。

  注意:和RadioButton Web控件一样,当把radio button HTML控件添加到模板时,它也会包含唯一的名称特征。如果你不熟悉HTML控件,没关系,因为很少使用它,尤其在ASP.NET 2.0里。如果有兴趣了解更多,见 K. Scott Allen的博客里的文章Web Controls and HTML Controls.

用Literal控件注入Radio Button代码

  为了在GridView控件里对radio buttons进行聚合,我们要在ItemTemplate模板里手动注入radio button代码。每个radio button具有相同的name特性,但id特性必须是唯一的(因为我们可能需要通过客户端脚本访问某个radio button)。因为当用户选择了一个radio button,页面回传后,浏览器将返回该按钮的一个值,所以每个radio button要具备一个唯一值特性(unique value attribute)。最后,当选择一个radio button后,我们应确保为该按钮添加checked属性。另外,用户做了选择并发生回传后,radio button将回到默认状态(可任意指定)。

  可以有2种方法在模板里注入代码。其中一种是在代码里调用定义在后台代码类(code-behind class)里的方法,并使用格式化的形式。这个方法我们在教程《在GridView控件中使用TemplateField》里论述过。在本例,代码看起来像这个样子:

-六神源码网