C# 嵌套gridview，在asp.net/C/AJAX中通过子网格的异步绑定生成treeview效果

本质上，我试图通过嵌套的GridView创建一个treeview效果。它看起来像这样：

protected void LinkButton1_Command(object sender, CommandEventArgs e)
{
    //pass index of item in command argument
    int itemIndex = Convert.ToInt32(e.CommandArgument);      

    //find the pnlChildView control
    Panel childViewPanel = (Panel)DataList1.Items[itemIndex].FindControl("pnlChildView");
    if (childViewPanel != null)
    {
        //toggle visibility of childViewPanel and bind child list if panel is visible

        if (childViewPanel.Visible)
        {
            DataList childList = childViewPanel.FindControl("DataList2");
            if (childList != null)
            {
                int keyValue = (int)DataList1.DataKeys[itemIndex];

                //bind the list using DataList1 data key value
                childList.DataSource = <DATA SOURCE>; //get data using keyValue
                childList.DataBind();
            }  
        }
    }
}

-第1列第2列第3列第4列

  childcol1  childcol2  childcol3

  childcol1  childcol2  childcol3

+第1列第2列第3列第4列

  childcol1  childcol2  childcol3

  childcol1  childcol2  childcol3

+第1列第2列第3列第4列

  childcol1  childcol2  childcol3

  childcol1  childcol2  childcol3

+第1列第2列第3列第4列

  childcol1  childcol2  childcol3

  childcol1  childcol2  childcol3

父网格在页面加载时填充，但单击加号时，子网格的数据和绑定的收集是异步的，并根据所选记录的值动态填充。数据是从数据库中提取的&一般来说，我一直在使用数据集绑定到gridview，但看起来我在这里可能无法做到这一点

我一直在阅读ajax和jquery，似乎解决方案可能在某个地方，因为它似乎是为异步调用定制的，但我对它非常不熟悉。似乎我必须创建子网格作为嵌套在父网格中的模板字段

---

请注意：我被要求不要使用UpdatePanel，因此这不是一个选项。

我使用嵌套表和jQuery、返回json的Ajax调用以及模板引擎的jtemplate来完成这项工作

我已经创建了一个快速的示例来展示我在概念上是如何做到这一点的。基本布局如下

Table
-row
-subrow
  -Table
    -row
    -row

---

这是非常可能的，但我会使用ListView或DataList作为父容器，因为如果使用GridView，则必须将子列表放在列中，这看起来很难看。这将使您走上正确的道路：

<table width="595px">
    <asp:DataList BackColor="#ffffff" id="DataList1" DataKeyField="<ID>" OnItemDataBound="DataList1_ItemDataBound" runat="server" Width="100%">     
        <ItemTemplate>
           <tr>
              <td>
                  <asp:LinkButton ID="LinkButton1" runat="server" Text="+" OnCommand="LinkButton1_Command" CommandArgument='<%#Container.ItemIndex%>'></asp:LinkButton>    
              </td>
              <td><%#Eval("<COLUMN NAME>")%></td>
              <td><%#Eval("<COLUMN NAME>")%></td>
              <td><%#Eval("<COLUMN NAME>")%></td>
           </tr>
           <asp:Panel ID="pnlChildView" runat="server">
               <asp:DataList ID="DataList2" runat="server" Width="100%">
                   <ItemTemplate>
                       <tr>
                          <td><%#Eval("<CHILD OLUMN NAME>")%></td>
                          <td><%#Eval("<CHILD COLUMN NAME>")%></</td>
                          <td><%#Eval("<CHILD COLUMN NAME>")%></</td>                           
                       </tr>
                   </ItemTemplate>
               </asp:DataList>
           </asp:Panel>
        </ItemTemplate>
    </asp:DataList>
</table>

当用户单击DataList1中的LinkButton/按钮时，执行如下操作：

protected void LinkButton1_Command(object sender, CommandEventArgs e)
{
    //pass index of item in command argument
    int itemIndex = Convert.ToInt32(e.CommandArgument);      

    //find the pnlChildView control
    Panel childViewPanel = (Panel)DataList1.Items[itemIndex].FindControl("pnlChildView");
    if (childViewPanel != null)
    {
        //toggle visibility of childViewPanel and bind child list if panel is visible

        if (childViewPanel.Visible)
        {
            DataList childList = childViewPanel.FindControl("DataList2");
            if (childList != null)
            {
                int keyValue = (int)DataList1.DataKeys[itemIndex];

                //bind the list using DataList1 data key value
                childList.DataSource = <DATA SOURCE>; //get data using keyValue
                childList.DataBind();
            }  
        }
    }
}

---

显然，您可以根据需要操纵上述概念，以获得所需的外观和感觉。您的方法似乎是预先绑定所有数据。在DatList1的ItemDataBound事件上，您打算绑定DataList2。问题是单击树扩展器时如何绑定它。单击展开按钮时编辑以绑定子列表。请参阅编辑后的答案。只需将数据列表包装在UpdatePanel中即可满足AJAX要求。