简单的 GridView 单选按钮行选择器

• 下载源码 - 4.33 KB

引言

本文提供了一种拖放方式来创建单选按钮 GridView 行选择器，其行为方式与 GridView 自身的“Select”链接按钮相同。

背景

GridView 控件提供的用于选择单行的 Select 链接的直观性一直让我感到困扰。鉴于您几乎每次要求用户从列表中选择一个项目时都会使用单选按钮，我觉得将 Select 按钮改为单选按钮会更直观。事实上，这在我两年前开始学习 ASP.NET 时就想到了。但结果证明实现起来并不容易。我找到了一些文章告诉了我如何做到这一点，但这需要为每个控件进行一些配置，而且，如果您要在整个站点中应用单选按钮行选择功能，从可维护性的角度来看，应该更简单一些。

现在，我有了更多的经验并获得了一些资格认证，我再次遇到了同样的问题，并决定彻底解决它，以免以后再担心。我想要一个纯粹的拖放控件，无需配置，来替换 Select 链接，这就是我找到的解决方案。

代码

由于总体上代码很简单，您可以在下面看到这个控件的全部功能。

[DefaultProperty("Text")]
[ToolboxData("<{0}:GridViewRowSelector 
  runat="\""server\"></{0}:GridViewRowSelector>")]
public class GridViewRowSelector : RadioButton
{
    protected override void Render(HtmlTextWriter writer)
    {
        GridViewRow row = (GridViewRow)this.NamingContainer;
        int currentIndex = row.RowIndex;
        GridView grid = (GridView)row.NamingContainer;
        this.Checked = (grid.SelectedIndex == currentIndex);
        this.Attributes.Add("onClick", "javascript:" + 
             Page.ClientScript.GetPostBackEventReference(grid, 
             "Select$" + currentIndex.ToString(), true));
        base.Render(writer);
   }
}

Using the Code

使用代码很简单，只需按照以下步骤操作即可：

1. 在解决方案资源管理器中单击您的网站，然后单击“添加引用...”
2. 在“.NET 组件”选项卡上选择“浏览”按钮，或者在 VS2008 中选择“浏览”选项卡。
3. 选择提供的 DLL（即 zip 文件中 Debug/bin 目录下的 Utilities.dll）。

然后，只需将 GridViewRowSelector 从工具箱拖放到 GridView 控件的模板字段中。

要创建 GridView 上的模板字段，请选择 GridView 的“常用功能”菜单（设计视图右上角的小箭头），选择“添加列”，然后添加一个没有标题文本的 TemplateColumn。

要启动设计器以便您将元素拖放到模板字段中，请再次选择 GridView 的“常用功能”菜单，然后选择“编辑模板”。您应该能够选择模板列的 ItemTemplate，并将 GridViewRowSelector 拖放到设计器中的相应框中。不用担心它显示错误，这仅仅是因为我还没有添加一个处理设计模式的适当控件设计器。我以后可能会这样做，但我觉得它不是必需的，因为控件在模板编辑之外的设计时显示正确。

如果您将 GridView 的 SelectedRow 样式设置为显示不同的背景颜色，那么您选择的行也将以该颜色突出显示（如文章顶部的图片所示）。

关注点

要使其正常工作不得不经历的曲折主要是由于 GridView 控件中的一个主要问题：缺少一个 SelectRow 函数，该函数允许您选择一行并触发 GridView.SelectionChanged 事件。如果您可以不使用 GridView.SelectionChanged 事件，那么创建用于选择行的控件的过程也并不算太糟糕。您可以直接捕获 RadioButton 的 CheckedChanged 事件，将 GridView.SelectedIndex 更新为单选按钮所属的行号，然后就可以开始使用了。但是，我喜欢在页面中使用 GridView.SelectionChanged 事件来显示辅助数据（特别是现在 AJAX 已集成进来），因此，由于我将大量使用此控件，我真的不希望失去这一特定功能。

由于没有 GridView.SelectRow 方法，并且由于 GridView 的 SelectionChanged 事件是 protected 的，因此无法调用它，我能想到的唯一现实的方法是创建一个客户端 onClick 事件处理程序，该处理程序将以与 GridView 本身的 Select 链接完全相同的方式触发，从而欺骗它以为其自己的 Select 链接已被点击。

当然，您不能仅仅触发相同的 JavaScript 命令来模仿 Select 链接的帖子回发，因为 ASP.NET 出于安全原因（例如防止 XSS 攻击）提供了此类措施，因此您需要注册帖子回发链接。

简单的一点是使单选按钮的显示与所选行保持一致。服务器控件本身只是一个扩展的单选按钮，它在 Render 事件期间通过遍历其控件父级层次结构以到达它所在的 GridView 行，然后强制转换为 GridViewRow 对象并使用行的 Selected 属性来更新其自己的 Checked 属性。