65.9K
CodeProject 正在变化。 阅读更多。
Home

使用服务器端(.Net) 和客户端(JQuery)显示/隐藏网格内容

vinodkumarnie
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.87/5 (13投票s)

2013 年 4 月 3 日

CPOL

3分钟阅读

viewsIcon

63939

downloadIcon

939

使用 RowCommand 和 jQuery 处理 GridView 内部的控件。

别忘了投票！ ! 

引言

GridView 是 ASP.NET 中一个强大的控件，我们可以在其中包含其他控件，也可以在 GridView 内部包含 GridView。本文介绍了如何访问 GridView 内部的控件和事件。

本文还包括

  1. 使用 数据表 通过代码隐藏将行插入到 GridView 中
  2. RowCommand 事件的功能及其用法
  3. 通过 客户端 以及 代码隐藏 处理控件
  4. jQuery 的重要性及其用法
  5. 使用 jQuery 处理控件
  6. jQuery 函数，如 parent()、next()、show()、hide() 控件的功能。

背景

在许多情况下，嵌套控件是非常必要的。所以 GridView 是完成此操作的最佳控件。而且有些人甚至不知道如何处理 GridView 内部的控件。而且 jQuery 如今在 客户端 处理控件方面变得非常有名。这就是我决定撰写一篇关于此的文章的原因，以便每个人都能轻松理解。

使用代码 

GridView 视图模式通过将数据字段绑定到列并显示列标题来标识字段，从而显示数据项列表。 默认的 GridView 样式将按钮实现为列标题。通过使用按钮作为列标题，您可以实现重要的用户交互功能；例如，用户可以单击列标题以根据特定列的内容对 GridView 数据进行排序。

GridView 列由 GridViewColumn 对象表示，这些对象可以自动调整其大小以适应其内容。 您可以选择显式将 GridViewColumn 设置为特定的宽度。 您可以通过拖动列标题之间的抓手来调整列的大小。 您还可以动态地添加、删除、替换和重新排序列，因为此功能内置于 GridView 中。 但是，GridView 无法直接更新其显示的数据。

GridView 事件是 点击这里

现在我将解释如何使用 RowCommand 和 jQuery 访问控件和事件

1. 使用 RowCommand 

当在 GridView 控件中单击按钮时，会引发 RowCommand 事件。 这使您能够提供一个事件处理方法，该方法在每次发生此事件时执行自定义例程。 也就是说，单击 GridView 内部的按钮时，您可以执行自定义操作。 CommandName 用于为事件提供唯一的名称以进行标识。 CommandArgument 将 Row index 值传递给 Command Event。

示例

在下面的示例中，我使用 DataTable 在 PageLoad 事件上向 GridView 添加行。 

GridView_CodeBehind.aspx.cs

protected void Page_Load(object sender, EventArgs e)//page load event
{
    if (!this.IsPostBack)
    {
        load_gridviewrecords();// calling function to add rows into GridView 
    }
}
private void load_gridviewrecords() // adding 3 rows
{
    DataTable dt = new DataTable();
    dt.Columns.Add("jobid");
    dt.Columns.Add("jobtitle");
    dt.Columns.Add("positions");
    dt.Columns.Add("Description");
    DataRow dr1 = dt.NewRow();
    dr1["jobid"] = "JOB122";
    dr1["jobtitle"] = "Software Engineer";
    dr1["positions"] = "10";
    dr1["Description"] = "This job not direct. You have to apply through online. " + 
      "Qualification required BE (Computer Science), M.Tech(Computer Science), " + 
      "MCA. Year of passout 2011, 2012.";
    dt.Rows.Add(dr1);
    DataRow dr2 = dt.NewRow();
    dr2["jobid"] = "JOB123";
    dr2["jobtitle"] = "Associate System Engineer";
    dr2["positions"] = "100";
    dr2["Description"] = "This job not direct. You have to apply through online. " + 
      "Basic knowledge of web development. Qualification required BE (Computer Science), " + 
      "M.Tech(Computer Science), MCA. Year of passout 2011, 2012.";
    dt.Rows.Add(dr2);
    DataRow dr3 = dt.NewRow();
    dr3["jobid"] = "JOB124";
    dr3["jobtitle"] = "Web designer";
    dr3["positions"] = "5";
    dr3["Description"] = "This job not direct. You have to apply through online. " + 
      "Required skills css, Jquery, Html, Photoshop. Qualification required BE " + 
      "(Computer Science), M.Tech(Computer Science), MCA. Year of passout 2011, 2012.";
    dt.Rows.Add(dr3);
    dt.AcceptChanges();
    GridView1.DataSource = dt;
    GridView1.DataBind();
    
}
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)// on imagebutton click
{
    if (e.CommandName == "showhide")
    {
        int index = int.Parse(e.CommandArgument.ToString());
        GridViewRow gr = GridView1.Rows[index];
        ImageButton imgbtn = (ImageButton)gr.FindControl("ImageButton1");
        Panel pnl = (Panel)gr.FindControl("pnlOrders");
        if (pnl.Visible == false)
        {
            imgbtn.ImageUrl = "minus.jpg";
            pnl.Visible = true;
        }
        else
        {
            imgbtn.ImageUrl = "plus.jpg";
            pnl.Visible = false;
        }
    }
}

GridView_CodeBehind.aspx

<style type="text/css">
        body{font-family:Calibri;}
    .jobid{float:left; width:100px; height:auto;}
    .jobtitle{float:left; width:300px; height:auto;}
    .noofpositions{float:left; width:100px; height:auto;}
    .div_parent{float:left; width:100%; height:auto;}
    .panel_description{float:left; width:100%; height:auto;}
    </style>

<asp:GridView ID="GridView1" runat="server" 
            ShowHeader="false" ShowFooter="false"
            AutoGenerateColumns="false" GridLines="None" Border="1" 
            onrowcommand="GridView1_RowCommand" >
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <div style="width:500px; height:auto;">
                    <div class="jobid">
                        <asp:Label ID="Label1" runat="server" 
                              Text='<%# Eval("jobid") %>'></asp:Label>
                    </div>
                    <div class="jobtitle">
                        <asp:Label ID="Label2" runat="server" 
                              Text='<%# Eval("jobtitle") %>'></asp:Label>
                    </div>
                    <div class="noofpositions">
                        <asp:Label ID="Label3" runat="server" 
                           Text='<%# Eval("positions") %>'></asp:Label>
                    </div>
                    <div style="clear:both; height:auto; border-top:solid 1px #e2e2e2;"></div>
                        <div class="div_parent">
                            <asp:ImageButton ID="ImageButton1" CommandName="showhide" 
                              CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" 
                              style="cursor: pointer" ImageUrl="plus.jpg" 
                              width="40" height="40" 
                              title="Description" runat="server" />
                        </div>
                        <asp:Panel ID="pnlOrders" class="panel_description" 
                                  runat="server" Visible="false">
                            <asp:Label ID="lblMsg" runat="server" 
                              Text='<%# Eval("description") %>'></asp:Label>
                        </asp:Panel>
               </div>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

最初，我正在创建包含描述的 panel 并将 visibility 设置为 false。单击图像按钮时，根据 RowIndex 将 panel 的 visibility 设置为 true，同时将 ImageButton 的图像更改为 minus.jpg。

2. 使用 jQuery 实现相同的目的 

GridView_JQuery.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        load_gridviewrecords();
    }
}
private void load_gridviewrecords()
{
    DataTable dt = new DataTable();
    dt.Columns.Add("jobid");
    dt.Columns.Add("jobtitle");
    dt.Columns.Add("positions");
    dt.Columns.Add("Description");
    DataRow dr1 = dt.NewRow();
    dr1["jobid"] = "JOB122";
    dr1["jobtitle"] = "Software Engineer";
    dr1["positions"] = "10";
    dr1["Description"] = "This job not direct. You have to apply through online. " + 
      "Qualification required BE (Computer Science), " + 
      "M.Tech(Computer Science), MCA. Year of passout 2011, 2012.";
    dt.Rows.Add(dr1);
    DataRow dr2 = dt.NewRow();
    dr2["jobid"] = "JOB123";
    dr2["jobtitle"] = "Associate System Engineer";
    dr2["positions"] = "100";
    dr2["Description"] = "This job not direct. You have to apply through online. " + 
      "Basic knowledge of web development. Qualification required BE (Computer Science), " + 
      "M.Tech(Computer Science), MCA. Year of passout 2011, 2012.";
    dt.Rows.Add(dr2);
    DataRow dr3 = dt.NewRow();
    dr3["jobid"] = "JOB124";
    dr3["jobtitle"] = "Web designer";
    dr3["positions"] = "5";
    dr3["Description"] = "This job not direct. You have to apply through " + 
      "online. Required skills css, Jquery, Html, Photoshop. Qualification required BE " + 
      "(Computer Science), M.Tech(Computer Science), MCA. Year of passout 2011, 2012.";
    dt.Rows.Add(dr3);
    dt.AcceptChanges();
    GridView1.DataSource = dt;
    GridView1.DataBind();
}

GridView_JQuery.aspx

<style type="text/css">
        body{font-family:Calibri;}
    .jobid{float:left; width:100px; height:auto;}
    .jobtitle{float:left; width:300px; height:auto;}
    .noofpositions{float:left; width:100px; height:auto;}
    .div_parent{float:left; width:100%; height:auto;}
    .panel_description{float:left; width:100%; height:auto;}
    </style>
 
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $('.div_parent img').each(function()
    {
        var flag_click=0;
        $(this).click(function()
        {
            if(flag_click===0)
            {
                $(this).attr("src","minus.jpg");
                $(this).parent(".div_parent").next(".panel_description").show();
                flag_click++;
            }
            else
            {
                $(this).attr("src","plus.jpg");
                $(this).parent(".div_parent").next(".panel_description").hide();
                flag_click=0;
            }
        });
    });
});
</script>
<asp:GridView ID="GridView1" runat="server" 
            ShowHeader="false" ShowFooter="false"
            AutoGenerateColumns="false" GridLines="None" Border="1">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <div style="width:500px; height:auto;">
                    <div class="jobid">
                        <asp:Label ID="Label1" runat="server" 
                          Text='<%# Eval("jobid") %>'></asp:Label>
                    </div>
                    <div class="jobtitle">
                        <asp:Label ID="Label2" runat="server" 
                          Text='<%# Eval("jobtitle") %>'></asp:Label>
                    </div>
                    <div class="noofpositions">
                        <asp:Label ID="Label3" runat="server" 
                           Text='<%# Eval("positions") %>'></asp:Label>
                    </div>
                    <div style="clear:both; height:auto; border-top:solid 1px #e2e2e2;"></div>
                        <div class="div_parent">
                        <img alt="" style="cursor: pointer"
                           src="plus.jpg" width="40" height="40" 
                           title="Description" /></div>
                        <asp:Panel ID="pnlOrders" class="panel_description" 
                                    runat="server" Style="display:none;">
                            <asp:Label ID="lblMsg" runat="server" 
                               Text='<%# Eval("description") %>'></asp:Label>
                        </asp:Panel>
                   </div>
                        
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

在上面的示例中，jQuery 函数 parent() 用于查找父控件，而 next() 用于查找 直接控件。 找到控件后，使用 show() 和 hide() 函数，我们可以分别使 panel 控件显示和隐藏。

兴趣点 

我们使用 RowCommnad 和 jQuery 完成了显示/隐藏控件。 您需要知道的有趣的事情是，在发生回发事件后，jQuery 将重置为其原始状态。 也就是说，在上面的例子中，如果发生回发，所有描述面板都将被设置为隐藏状态。 因此，处理回发事件与代码隐藏的处理方式不同于 jQuery。  

© . All rights reserved.