使 Gridview 中的整行可点击答案

【问题标题】：Making entire row in Gridview clickable使 Gridview 中的整行可点击
【发布时间】：2013-01-09 03:52:59
【问题描述】：

我一直在尝试关注这个答案：How to implement full row selecting in GridView without select button?

但我还是有点困惑。在关注了那个问题之后，我的行现在可以点击了。但是我如何在被点击后实现它来做某事呢？目前，我使用一个按钮来对每行数据库执行我需要的操作：

这是 .aspx 代码：

<Columns>
<asp:ButtonField Text = "Click Me" CommandName = "Clicked" ButtonType = "Button" />
...other columns stuff
</Columns>

后面的C#代码：

  protected void RowCommand(object sender, GridViewCommandEventArgs e)
    {
        //if button is clicked
        if (e.CommandName == "Clicked")
        {
            //go find the index on the gridview
            int selectedIndex = MsgInbox.SelectedIndex;
            if (int.TryParse(e.CommandArgument.ToString(), out selectedIndex))
            {
                //do something with database
            }

现在效果很好。但是，我不希望按钮可以点击，我希望整行都可以点击。我知道这目前是错误的，但这是我到目前为止的代码：

.aspx 代码

   <Columns>
    <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="SelectRow" runat="server" ForeColor="red" CommandName="Clicked"></asp:LinkButton>
                </ItemTemplate>
    </asp:TemplateField>

C#代码：

    protected void Gridview_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes["onmouseover"] = "this.style.cursor='pointer';this.style.textDecoration='underline';";
            e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';";
            var selectButton = e.Row.FindControl("SelectRow") as Button;
            e.Row.Attributes["onclick"] = ClientScript.GetPostBackEventReference(selectButton, "");

当我这样做时，我得到了一个简单的空指针异常，但我对 e.Row.Attributes 不是很熟悉，所以我真的不知道失败的地方以及添加数据库逻辑需要做什么。

谢谢

【问题讨论】：

具体是哪一行抛出异常？什么样的异常？请注意，您应该使用as LinkButton 而不是as Button，因为SelectRow 是LinkButton。
天哪！现在我把它变成了一个链接按钮，现在没有错误了。你知道我应该在哪里输入数据库代码的逻辑（例如，单击这一行并对数据库执行此操作）吗？现在，当我单击它时，什么也没有发生，因为我不确定在哪里/如何添加代码。谢谢！
处理 GridView 的 RowCommand 事件。

标签： asp.net gridview

【解决方案1】：

如果你准备好使用 jquery 会简单很多。例如，

<asp:GridView rowStyle-CssClass="row" ...
...
<asp:TemplateField>
  <ItemTemplate>
    <asp:LinkButton ID="SelectRow" runat="server" CommandName="Clicked" CssClass="selButton" />   
  </ItemTemplate>
</asp:TemplateField>

请注意，每个数据行将具有 css 类 row，选择按钮将具有 selButton

CSS 类似于

tr.row { }   /* normal row styling */
tr.row-highlight { background-color: blue; }   /* highlighted row styling */
tr.row .selButton { display:none; visibility:hidden; }   /* select button styling, I am using hidden button */

最后是java脚本

$(document).ready(function() {
   $('tr.row').click(
      function() {
        // simulate click of select button
        $(this).find('.selButton').click();
      }).hover(
      // add/remove css class to highlight on mouse over/out
      function() { $(this).addClass('row-highlight'); },
      function() { $(this).removeClass('row-highlight'); });
});

【讨论】：

【解决方案2】：

所以我想通了，我确信有更好的方法通过 jquery 或 javascript 来实现它，但我还不太擅长。

对于我的 .aspx 文件，对于 gridview，我只是添加了：

AutoGenerateSelectButton ="true"

在我的 C# 中，在 MsgInbox_SelectedIndexChanged 下，我放置了我所有的 RowCommand 逻辑。

最后，在 C# 中，在我的 Gridview_RowCreated 下，我添加了这一行来隐藏 Select 链接：

e.Row.Cells[0].Style["display"] = "none";

【讨论】：