Как улучшить функцию сверления в GridView?

Question

Я новый разработчик ASP.NET, и я пытаюсь разработать GridView с функцией Drill-Down. Я выполняю шаги в the following post in the CodeProject, но я потерпел неудачу, и я не знаю, как это исправить.

В моем случае, у меня есть две таблицы: Таблица

курс: CourseID, CourseName, GroupID

Group Таблица: GroupID GroupName

(Первый атрибут в каждой таблице первичный ключ)

Я хочу показать вторую таблицу в GridView и когда пользователь нажимает на изображение значка поиска, информирует в первой таблице. Итак, КАК ДЕЛАТЬ?

Мой 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"