Asp.net 如何在gridview行下显示div标记单击

我想在我放在gridview下的div标记中显示所选用户信息，当用户单击该行下面的gridview所选行时，我想显示用户信息。

---

只需一点jQuery就可以实现这一点。我希望下面的答案对你有所帮助

代码隐藏：

protected void Page_Load(object sender, EventArgs e)
{
    var users = new List<object>();

    users.Add(new { Name = "Name 1", Surname = "Surname 1" });
    users.Add(new { Name = "Name 2", Surname = "Surname 2" });
    users.Add(new { Name = "Name 3", Surname = "Surname 3" });
    users.Add(new { Name = "Name 4", Surname = "Surname 4" });
    users.Add(new { Name = "Name 5", Surname = "Surname 5" });
    users.Add(new { Name = "Name 6", Surname = "Surname 6" });
    users.Add(new { Name = "Name 7", Surname = "Surname 7" });
    users.Add(new { Name = "Name 8", Surname = "Surname 8" });
    users.Add(new { Name = "Name 9", Surname = "Surname 9" });
    users.Add(new { Name = "Name 10", Surname = "Surname 10" });

    gvUsers.DataSource = users;
    gvUsers.DataBind();
}

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default2.aspx.cs" Inherits="WebApplication6.Default2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var gridId = "<%= gvUsers.ClientID %>";
            var rowClickEvent = "#" + gridId + " tr"
            var current = "";

            $("#" + gridId).on("click", "span.close", function () {
                //Remove the row when user click on X
                $(this).parent().parent().empty();
            });

            $(rowClickEvent).click(function () {
                //Add row containing aditional info when user click on a row inside the grid view
                var row = this;
                var name = row.children[0].innerHTML;
                var surname = row.children[1].innerHTML;

                if ((name + surname) != current) {
                    $("<tr style='background-color:yellow;'><td style='height:200px;vertical-align:top;'>Dear " + name + " " + surname + "<br />Your Account Was Created Successfully<td><td style='vertical-align:top;'><span class='close'>X</span></td></tr>").insertAfter(row);
                }

                current = name + surname;
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <asp:GridView ID="gvUsers" runat="server">
    </asp:GridView>
</asp:Content>

受保护的无效页面加载（对象发送方，事件参数e）
{
var users=新列表（）；
添加（新的{Name=“Name 1”，姓氏=“姓氏1”}）；
添加（新的{Name=“Name 2”，姓氏=“姓氏2”}）；
添加（新的{Name=“Name 3”，姓氏=“姓氏3”}）；
添加（新的{Name=“Name 4”，姓氏=“姓氏4”}）；
添加（新的{Name=“Name 5”，姓氏=“姓氏5”}）；
添加（新的{Name=“Name 6”，姓氏=“姓氏6”}）；
添加（新的{Name=“Name 7”，姓氏=“姓氏7”}）；
添加（新的{Name=“Name 8”，姓氏=“姓氏8”}）；
添加（新的{Name=“Name 9”，姓氏=“姓氏9”}）；
添加（新的{Name=“Name 10”，姓氏=“姓氏10”}）；
gvUsers.DataSource=用户；
gvUsers.DataBind（）；
}

ASPX:

protected void Page_Load(object sender, EventArgs e)
{
    var users = new List<object>();

    users.Add(new { Name = "Name 1", Surname = "Surname 1" });
    users.Add(new { Name = "Name 2", Surname = "Surname 2" });
    users.Add(new { Name = "Name 3", Surname = "Surname 3" });
    users.Add(new { Name = "Name 4", Surname = "Surname 4" });
    users.Add(new { Name = "Name 5", Surname = "Surname 5" });
    users.Add(new { Name = "Name 6", Surname = "Surname 6" });
    users.Add(new { Name = "Name 7", Surname = "Surname 7" });
    users.Add(new { Name = "Name 8", Surname = "Surname 8" });
    users.Add(new { Name = "Name 9", Surname = "Surname 9" });
    users.Add(new { Name = "Name 10", Surname = "Surname 10" });

    gvUsers.DataSource = users;
    gvUsers.DataBind();
}

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default2.aspx.cs" Inherits="WebApplication6.Default2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var gridId = "<%= gvUsers.ClientID %>";
            var rowClickEvent = "#" + gridId + " tr"
            var current = "";

            $("#" + gridId).on("click", "span.close", function () {
                //Remove the row when user click on X
                $(this).parent().parent().empty();
            });

            $(rowClickEvent).click(function () {
                //Add row containing aditional info when user click on a row inside the grid view
                var row = this;
                var name = row.children[0].innerHTML;
                var surname = row.children[1].innerHTML;

                if ((name + surname) != current) {
                    $("<tr style='background-color:yellow;'><td style='height:200px;vertical-align:top;'>Dear " + name + " " + surname + "<br />Your Account Was Created Successfully<td><td style='vertical-align:top;'><span class='close'>X</span></td></tr>").insertAfter(row);
                }

                current = name + surname;
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <asp:GridView ID="gvUsers" runat="server">
    </asp:GridView>
</asp:Content>

编码工作正常，但问题是当我单击其显示div标记下面的行时，如果我再次单击同一行，其显示另一个div标记，我想在第二次单击gridview行时关闭div标记，只需使用javascript稍微调整一下，使其完全按照您想要的方式工作。请查看编辑以防止重复显示。您将看到我创建了一个名为current的变量，您需要将该变量设置为id或其他唯一值（我以姓名组合为例）然后每次我添加一行时，我都会检查这个变量，以确保没有为该行添加其他div。我发现上面的代码存在一些问题。您能建议我如何解决这个问题吗？例如，我单击了名称1，在行div 1下，如果我再次单击名称1，则该行已打开。名称1未打开……这很好……但如果我单击名称2或名称，则问题不会关闭div 13..--第2行或第3行下…打开但未关闭再次打开我返回到名称1如果我再次单击另一个第1行打开bcz我的旧分区1仍然存在我不想在名称1行下打开新分区1