为什么 GridView 不在 asp:Panel 中显示数据

Question

我的Default.aspx 页面中有以下内容（默认情况下，Status 选项卡在页面加载时显示为content）：

<asp:Content runat="server" ID="FeaturedContent3" ContentPlaceHolderID="ContentMain">
    <div style="padding-left: 10px; padding-top: 10px;">
        <asp:BulletedList ID="tabs" ClientIDMode="Static" runat="server" DisplayMode="HyperLink">
            <asp:ListItem Text="Status" Value="#tab1"></asp:ListItem>
            <asp:ListItem Text="Your Tasks" Value="#tab2"></asp:ListItem>
            <asp:ListItem Text="Messages" Value="#tab3"></asp:ListItem>
            <asp:ListItem Text="Dependencies" Value="#tab4"></asp:ListItem>
            <asp:ListItem Text="Documents" Value="#tab5"></asp:ListItem>
            <asp:ListItem Text="Pro-Forma" Value="#tab6"></asp:ListItem>
            <asp:ListItem Text="Admin Controls" Value="#tab7"></asp:ListItem>
        </asp:BulletedList>

        <asp:Panel ID="content" runat="server" ClientIDMode="Static">
            <asp:Panel ID="tab1" ClientIDMode="Static" runat="server">THIS IS A STATUS
                <asp:GridView ID="yourTasksGV" runat="server" ClientIDMode="Static">
                </asp:GridView>
            </asp:Panel>
            <asp:Panel ID="tab2" ClientIDMode="Static" runat="server">THIS IS YOUR TASKS
            </asp:Panel>
            <asp:Panel ID="tab3" ClientIDMode="Static" runat="server">THIS IS A MESSAGE</asp:Panel>
            <asp:Panel ID="tab4" ClientIDMode="Static" runat="server">THIS IS A DEPENDENCIES</asp:Panel>
            <asp:Panel ID="tab5" ClientIDMode="Static" runat="server">THIS IS A DOCUMENT</asp:Panel>
            <asp:Panel ID="tab6" ClientIDMode="Static" runat="server">THIS IS A PRO-FORMA</asp:Panel>
            <asp:Panel ID="tab7" ClientIDMode="Static" runat="server">THIS IS A ADMIN CONTROLS</asp:Panel>
        </asp:Panel>
    </div>
</asp:Content>

各自的content 是根据点击的标签显示的，这是通过JQuery 控制的。我正在从Default.aspx 的代码隐藏中填充状态选项卡内容中的GridView：

public void PullData()
{
    DataTable taskData = new DataTable();
    string connString = @"user id = myid1;" + "password= myP@$$w0Rd; server= dev-mag; database= Ob;" + "connection timeout=30";
    string query = @"SELECT column1, column2, column3, column4, column5
        FROM dbo.table13934";

    using (SqlConnection conn = new SqlConnection(connString))
    {
        try
        {
            SqlCommand cmd = new SqlCommand(query, conn);

            // create data adapter
            SqlDataAdapter da = new SqlDataAdapter(query, conn);
            // this will query your database and return the result to your datatable
            da.Fill(taskData);
            //conn.Close();
            yourTasksGV.DataSource = taskData;
            yourTasksGV.DataBind();

        }
        catch (Exception ex)
        {
            string error = ex.Message;
        }
    }
}
protected void Page_Load(object sender, EventArgs e)
{
    PullData();
}

当页面加载时，content 只显示THIS IS A STATUS 而GridView 中没有任何内容，但是如果我将GridView 从content 中取出并放置在页面上的任何其他位置，它会显示数据从 SQL 查询中检索到的。

为什么会发生这种情况，我该如何解决？

调试器：

不确定额外的 DIV 是从哪里创建的：/

这是 Jquery 代码：

<script type="text/javascript">
        $(document).ready(function () {
            $("#content div").hide(); // Initially hide all content
            $("#tabs li:first").attr("id", "current"); // Activate first tab
            $("#content div:first").fadeIn(); // Show first tab content

            $('#tabs a').click(function (e) {
                e.preventDefault();
                $("#content div").hide(); //Hide all content
                $("#tabs li").attr("id", ""); //Reset id's
                $(this).parent().attr("id", "current"); // Activate this
                //$('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
                $($(this).attr('href')).fadeIn();
            });
        });
    </script>

不确定JQuery################ 来自哪里...

Answer 1

您没有看到显示的gridview 的原因是您的jquery 检查$("#content div:first").fadeIn();

#content div // references your main panel and tab1 panel

并且 html 会为 gridview 本身生成另一个 <div>，这在您的代码中未检查。所以改变你的脚本如下。我在这两个条件中都添加了$("#content div div:first").fadeIn();。

<script type="text/javascript">
    $(document).ready(function () {
        $("#content div").hide(); // Initially hide all content
        $("#tabs li:first").attr("id", "current"); // Activate first tab
        $("#content div:first").fadeIn(); // Show first tab content

        $("#content div div:first").fadeIn(); // New code to show the gridview

        $('#tabs a').click(function (e) {
            e.preventDefault();
            $("#content div").hide(); //Hide all content
            $("#tabs li").attr("id", ""); //Reset id's
            $(this).parent().attr("id", "current"); // Activate this
            //$('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
            $($(this).attr('href')).fadeIn();

            $("#content div div:first").fadeIn(); // New code to show the gridview
        });
    });
</script>

这应该会在页面加载时显示第一个带有 gridview 的选项卡，并在您单击 Status 链接时再次显示。可能有比这更复杂的解决方案，但这是我根据您的代码方法提出的。

Answer 2

确保您有数据。 See this link 测试你有没有数据