GridViewのドリルダウン機能を強化する方法は？

Question

私は新しいASP.NET開発者です。私はドリルダウン機能付きGridViewを開発しようとしています。私はthe following post in the CodeProjectの手順に従っていますが、失敗してしまい、修正方法がわかりません。私の場合は

、私は2つのテーブルがあります。

コース表：CourseID、CourseName、グループID

グループ表：グループID GroupNameの

（各テーブルの最初の属性があるが

私はGridViewに2番目のテーブルを表示したいと思います。ユーザーが検索アイコンイメージをクリックすると、通知最初のテーブルのアトリオンが表示されます。だからそれをする方法？

私のASP.NET：

<div align="center"> 


       <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="CourseID" DataSourceID="SqlDataSource1"> 
        <Columns> 
         <asp:TemplateField HeaderText="Item Details"> 
          <ItemTemplate> 
           <table> 
            <tr> 
             <td> 
              <img src="images/system-search-md.png" alt="click here to see details" 
               onclick='ToggleDisplay(<%# Eval("GroupID") %>);' style="cursor:pointer; height:15px; width:15px" /> 
             </td> 
             <td<> 
              <p><%# Eval("CourseID") %></p> 
             </td> 
             <td> 
              <a href="Group.aspx?id=<%# Eval("CourseID") %>"><%# Eval("CourseName") %> </a> 
             </td> 
             <td> 
              <%# Eval("CourseName") %> 
             </td> 
            </tr> 

            <tr> 
             <td colspan="4"> 
              <div id'coldiv<%# Eval("GroupID") %>' style="display:none;"> 
               <asp:Literal runnat="server" ID="ltrl" Text='<%# Eval("GroupName") %>'></asp:Literal> 
              </div> 
             </td> 
            </tr> 
           </table> 
          </ItemTemplate> 
         </asp:TemplateField> 
        </Columns> 
       </asp:GridView> 

       <script language="JavaScript"> 
        function ToggleDisplay(id) { 
         var elem = document.getElementById('coldiv' + id); 
         if (elem) { 
          if (elem.style.display != 'block') { 
           elem.style.display = 'block'; 
           elem.style.visibility = 'visible'; 
          } 
          else { 
           elem.style.display = 'none'; 
           elem.style.visibility = 'hidden'; 
          } 
         } 
        } 
</script> 

       <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:testConnectionString %>" 
        SelectCommand="SELECT  dbo.groups.*, dbo.courses.* 
            FROM   dbo.courses INNER JOIN 
            dbo.groups ON dbo.courses.GroupID = dbo.groups.ID"></asp:SqlDataSource> 
      </div> 

Answer 1

あなたのアプローチが合理的であると思われます。あなたのToggleDisplay関数が正しく動作していることを確認して、マークアップエラーを修正する必要があります。

<td<> = <td> 
<div id'coldiv<%# Eval("GroupID") %>' = <div id='coldiv<%# Eval("GroupID") %>' 
<asp:Literal runnat="server" = <asp:Literal runat="server"