使Gridview中的整行可单击

时间:2013-01-09 03:53:00

标签: asp.net gridview

我一直在尝试按照这个答案: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所以我真的不知道这是什么失败以及我需要做些什么来添加数据库逻辑。

由于

2 个答案:

答案 0 :(得分:2)

如果您准备好使用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'); });
});

答案 1 :(得分:2)

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

对于我的.aspx文件,对于gridview,我只是添加了:

AutoGenerateSelectButton ="true"

在我的C#中,在MsgInbox_SelectedIndexChanged下,我把所有的RowCommand逻辑都放了。

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

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