Question

我是一名新的ASP.NET开发人员，我正在尝试使用Drill-Down功能开发GridView。我正在遵循the following post in the CodeProject中的步骤，但我失败了，我不知道如何解决它。

就我而言，我有两张桌子：

课程表：CourseID，CourseName，GroupID

组表：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"

如何增强GridView中的向下钻取功能？

1 个答案: