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

时间:2014-08-04 19:16:18

标签: c# html asp.net gridview

我的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控制。我在GridView的代码隐藏中填充了状态选项卡内容中的Default.aspx

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 STATUSGridView中没有任何内容,但如果我从GridView中取出content并放置在页面的任何其他位置,它显示从SQL查询中检索的数据。

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

调试器:

enter image description here

不确定从哪里创建额外的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################的来源......

2 个答案:

答案 0 :(得分:1)

确保您拥有数据。 See this link来测试您是否有数据

答案 1 :(得分: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链接时再次显示。可能有比这更复杂的解决方案,但这是我根据您的代码方法提出的。