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