Вложенный вид сетки для создания эффекта дерева с асинхронным связыванием дочерней сетки в asp.net/C#/AJAX

Question

По сути, я пытаюсь создать эффект дерева в виде вложенных сеток. Это будет выглядеть примерно так:

-кол 1 цв 2 цв 3 цв 4

  childcol1  childcol2  childcol3

  childcol1  childcol2  childcol3

+ цв 1 цв 2 цв 3 цв 4

+ цв 1 цв 2 цв 3 цв 4

+ цв 1 цв 2 цв 3 цв 4

Родительская сетка заполняется при загрузке страницы, но когда нажимается «плюс», сбор данных и привязка дочерней сетки выполняется асинхронно и заполняется «на лету» на основе значения выбранной записи. Данные извлекаются из БД, и, как правило, я использую DataSets для привязки к сеточным представлениям, но, похоже, я не смогу сделать это здесь.

Я читал об ajax и jquery, и кажется, что решение может быть где-то там, так как оно кажется специально для асинхронных вызовов, но я ОЧЕНЬ незнаком с ним. Кажется, мне нужно создать дочернюю сетку как поле шаблона, вложенное в родительскую сетку.

Обратите внимание: меня попросили держаться подальше от использования "UpdatePanel", так что это НЕ вариант.

Answer 1

Это очень возможно, но я бы использовал 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>

И когда пользователь нажимает кнопку LinkButton / Button в DataList1, выполните что-то вроде этого:

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();
            }  
        }
    }
}

Answer 2

Я сделал это, используя вложенные таблицы и jQuery, Ajax-вызовы с возвращенным json и jtemplate для шаблонизатора

Я создал быструю скрипку , чтобы показать, как я это делаю концептуально.Основной макет будет выглядеть так:

Table
-row
-subrow
  -Table
    -row
    -row