关于asp.net Tab选项卡的应用注意

最新推荐文章于 2019-10-05 05:33:20 发布

原创最新推荐文章于 2019-10-05 05:33:20 发布 · 4.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#asp.net #textbox #server #asp #工作 #function

Net 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何使用 ASP.NET AJAX 控件 TabContainer 实现选项卡动态切换及标题更改的方法，包括通过 JavaScript 和 C# 后台代码来改变选项卡的显示顺序和标题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>未命名頁面</title> </head> <mce:script language="javascript"></mce:script> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="520px" Width="100%"> <cc1:TabPanel runat="server" HeaderText="汇报本周工作" ID="TabPanel1" OnClientClick="LoadTabShow"> <HeaderTemplate> 汇报本周工作 </HeaderTemplate> <ContentTemplate> <table align="left" class="style4" align="center"> <tr> <td style="text-align: center" mce_style="text-align: center"> 汇报状态: </td> <td> <asp:Literal ID="LitState" runat="server"></asp:Literal> 时间：<asp:Literal ID="LitTime" runat="server"></asp:Literal> </td> </tr> <tr> <td style="text-align: center" mce_style="text-align: center"> 汇报内容:* </td> <td> <asp:TextBox ID="txtContent" runat="server" Width="600px" TextMode="MultiLine" Height="150px"></asp:TextBox> </td> </tr> <tr> <td style="text-align: center" mce_style="text-align: center"> 下周计划: </td> <td> <asp:TextBox ID="txtNextContent" runat="server" Width="600px" TextMode="MultiLine" Height="150px"></asp:TextBox> </td> </tr> <tr> <td style="text-align: center" mce_style="text-align: center"> 附件: </td> <td> <asp:FileUpload ID="FileUpload1" runat="server" /> <asp:Button ID="btnFileUp" runat="server" Text="提交" /> </td> </tr> <tr> <td colspan="2"> <hr /> </td> </tr> <tr> <td style="text-align: center" mce_style="text-align: center"> 浏览人员: </td> <td> <asp:TextBox ID="txtBrowsePeople" runat="server" Width="600px" Enabled="False"></asp:TextBox> </td> </tr> <tr> <td style="text-align: center" mce_style="text-align: center"> 领导批示: </td> <td> <asp:TextBox ID="txtAuthor" runat="server" Width="600px" Enabled="False" Height="24px"></asp:TextBox> </td> </tr> </table> </ContentTemplate> </cc1:TabPanel> <cc1:TabPanel runat="server" HeaderText="参考本周日程" ID="TabPanel02" Height="500px" OnClientClick="LoadTabHide"> <HeaderTemplate> 参考本周日程 </HeaderTemplate> <ContentTemplate> <asp:Repeater ID="RepWeekRiCheng" runat="server"> <HeaderTemplate> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;"> <tr style="height: 20px;"> <td style="width: 60%;"> 标题 </td> <td style="width: 20%;"> 开始时间 </td> <td style="width: 20%;"> 结束时间 </td> </tr> </HeaderTemplate> <ItemTemplate> <tr style="height: 25px;"> <td> <span onclick="window.parent.parent.Div_Show('../schedule/add.aspx?id=<%# Eval("id") %>&v=v',345,653)" style="cursor: pointer; text-decoration: underline;"> <%# Eval("title") %></span> </td> <td> <%# Eval("start_Date")%> </td> <td> <%# Eval("end_date")%> </td> </tr> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> </ContentTemplate> </cc1:TabPanel> </cc1:TabContainer> </div> </form> </body> </html>

1：用js 改变Tab选显示顺序

实现方法如下：

        function changeTab(tabIndex) {
            var tabBehavior = $get('<%=TabContainer1.ClientID%>').control;
            tabBehavior.set_activeTabIndex(tabIndex);
        }

1.1 通过后台方法更改

      public void SetTabIndex()
    {
        if (Request.QueryString["tab"] != null)
        {
            string strIndex = Request.QueryString["tab"].Trim();
            TabContainer1.ActiveTabIndex = int.Parse(strIndex);

}
}

2：更改Tab的显示名称

<cc1:TabPanel runat="server" HeaderText="汇报本周工作" ID="TabPanel1" OnClientClick="LoadTabShow">
                    <HeaderTemplate>
                        汇报本周工作
                    </HeaderTemplate>

还有一点，更改Tab选项卡的HeaderText 的值，如果不配置 <HeaderTemplate> 节点，就是不存在的意思，可从后台直接更改。