具有延迟加载可折叠面板数据的 ASP.NET GridView答案

【问题标题】：ASP.NET GridView with lazy loading collapsible panel data具有延迟加载可折叠面板数据的 ASP.NET GridView
【发布时间】：2023-03-23 06:25:01
【问题描述】：

在 vb.net asp.net webforms 项目中，我需要将记录列表加载到 gridview 中，一旦用户单击行中的行，需要在行下方展开显示记录详细信息的面板.只有在选择记录时，我才需要加载记录的详细信息。实现这一目标的最佳方法是什么？我可以将 jQuery 可折叠面板插件与 gridview 一起使用并仅在选择行时加载数据吗？还是应该使用 ajax CollapsiblePanel？

【问题讨论】：

标签： jquery asp.net ajax vb.net gridview

【解决方案1】：

如果您想使用gridview，那么您需要使用单个项目模板来绑定所有字段，并且您可以为要折叠和展开的任何字段分配适当的类名。然后您可以使用 slideToggle 函数来显示/隐藏包含所选记录详细信息的下一个元素。请检查以下示例。

 <asp:GridView ID="GridView1"
 runat="server" AutoGenerateColumns="False" dataSourceID="ObjectDataSource1"> 
 <Columns>

<asp:TemplateField HeaderText="columname" >

<ItemTemplate>
    <asp:Label ID="Label1" runat="server" cssclass="expand"
        Text='<%# Bind("fieldname") %>'></asp:Label>
 <div class="details">
 your detail binding
 </div>
</ItemTemplate>
</asp:TemplateField>
</Columns> 
</asp:GridView>

---------------jquery 折叠/展开---------------

$(".expand").click(function () {
        if ($(this).attr("class") == "collapse") {
            $(this).attr("class", "expand")
        }
        else {
            $(this).attr("class", "collapse")
        }
        $(this).next(".details").slideToggle();

    })

    $(".collapse").click(function () {
        if ($(this).attr("class") == "collapse") {
            $(this).attr("class", "expand")
        }
        else {
            $(this).attr("class", "collapse")
        }

        $(this).next(".details").slideToggle()

    })

【讨论】：

【解决方案2】：

您的问题缺乏细节，答案完全取决于每行可能显示的“详细信息”的构成。

但是，我会执行以下操作，使用带有 asp.net ajax 处理程序的 jquery 来获取数据（按需）并将其注入新的 gridview 行。

在单击事件导致您的行进入“选定”模式时，我会触发一个 jquery 函数。

此 jquery 函数将触发对 GrabRowDetails.aspx 的 ajax 命中。

GrabRowDetails.aspx 将在查询字符串中输入。

根据这个输入，它会查询数据库。

最终，GrowRowDetails.aspx 必须将相关数据打包成 JSON，然后再渲染回客户端。

Response.ContentType = "application/json"
Response.Write(SB.ToString()) 'emits the JSON

最后，您的 ajax-success 处理程序将负责创建一个新的表行并将相关数据塞入该新行。

它如何知道将新行放在哪里？顶部提到的单击处理程序应传递对触发单击事件的控件的引用。

使用此引用，您可以使用nearest 函数。 this.nearest("tr").after(..new_row_with_max_colspan_cell..)。

after 函数将在选定元素之后插入一个元素。因此，您只需要插入一个具有最大 colspan 的单个 TD 的新 TR。然后，您可以在该区域内工作。

当涉及到做这样的事情时，我使用原始 jquery 而不是 ASP.NET 控件会更好。

注意事项

.ashx 在处理 ajax 请求方面比 .aspx 性能更高，但我遇到了一些 http 处理程序的调试问题。因此，我使用了成熟的 .aspx。如果速度是一个问题，我肯定会使用 ashx。
您的 jquery 函数还应该删除任何以前打开的详细信息行。这可以通过在详细信息行上设置特定的 css 类来完成，例如details，然后使用remove 函数删除任何持久的详细信息行。

【讨论】：