如何创建可点击的gridview行?

时间:2015-07-30 09:53:04

标签: c# asp.net gridview

我想创建一个gridview行,其中整行是可点击的,当我点击该行的任何位置时,它会打开另一个包含行信息的aspx页面。

我正在使用asp.net和C#。 任何人都可以帮助我。提前谢谢。

3 个答案:

答案 0 :(得分:5)

触发Gridview的两个事件

OnRowDataBound和OnSelectedIndexChanged

然后在这些事件中编写代码

protected void OnRowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(GridView1, "Select$" + e.Row.RowIndex);
        e.Row.ToolTip = "Click to select this row.";
    }
}

protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
    foreach (GridViewRow row in GridView1.Rows)
    {
        if (row.RowIndex == GridView1.SelectedIndex)
        {
            row.BackColor = ColorTranslator.FromHtml("#A1DCF2");
            row.ToolTip = string.Empty;
        }
        else
        {
            row.BackColor = ColorTranslator.FromHtml("#FFFFFF");
            row.ToolTip = "Click to select this row.";
        } 
    }
}

还在

中设置了属性EnableEventValidation = "false"

答案 1 :(得分:3)

只需在RowDataBound上调用以下代码即可点击Gridview行上的任意位置以点击SelectedIndexChanged事件

你必须<%@ Page EnableEventValidation="False" %>

protected void grdYourGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{   
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Attaching one onclick event for the entire row, so that it will
        // fire SelectedIndexChanged, while we click anywhere on the row.
        e.Row.Attributes["onclick"] = 
          ClientScript.GetPostBackClientHyperlink(this.grdYourGrid, "Select$" + e.Row.RowIndex);
    }
}

答案 2 :(得分:0)

我将添加一些选项来以不同的方式回答这个问题。如果整行都是可点击的,您可以使用转发器而不是 GridView。但是,此答案也适用于 GridView。在转发器模板或 GridView TempletedField 中,将一个普通的 ol' div 放入其中。

关于如何使整个 div 可点击的搜索 stackoverflow。有几种方法可以做到。有一些仅使用 CSS 的方法,有些涉及一些 javascript/jquery。

它看起来像这样:

 <asp:TemplateField HeaderText="From">
                          <ItemTemplate><div class="container"> <a class="add_to_cart" onclick="DoTest('<%# DataBinder.Eval(Container.DataItem, "Guid") %>');" title="Add to Cart!"><asp:Label ID="Label1" runat="server" Text='<%# Bind("Created_by") %>'></asp:Label></a>                                 
                              </div>
                         </ItemTemplate>

确保您的 div 填充整个单元格或行高和宽。一旦可点击,它就可以正常工作。

上面示例中的 onclick="DoTest 只是将 guid 传递给代码隐藏的一种方式。但是,如果您不需要这样做,那么普通的旧锚标记也可以使用。

您不需要 OnRowDataBound 事件。您不需要关闭 EventValidation。您甚至不需要 javascript,具体取决于您要尝试做什么。

如果你做对了,行上的任何地方都将是一个可点击的链接。

我补充一下,如果你做多列,你需要把div放在每个列模板中。你也可以做一个模板化的字段并在其中放入一个 html 表格,就像你可以在一个中继器中一样。

无论如何,无论哪种方式都行。我最终将 div 放在每个列模板中,这样我的 GridView 标题就会在那里。