使用 ASP.NET AJAX TAB 控制

• 下载源代码 - 2.19 KB

引言

ASP.NET AJAX 工具包是当今可用的最实用和免费的工具之一，可以创建具有丰富用户界面的交互式 ASP.NET 应用程序。 在本文中，我将讨论此工具包中一个非常重要的工具。 它就是 TabContainer 控件。 在你的项目中引用了 AJAXControlToolkit.dll 后，你可以将所有 AJAXControl 工具包添加到 Visual Studio .NET IDE 的工具箱中。 你可以从以下位置下载 AJAXControlToolkit.dll

• ASP.NET AJAX Control Toolkit

或者请参考以下文章

• 模态弹出窗口扩展器基础

TabContainer 控件是一个非常简单的选项卡控件，就像我们在 Windows 应用程序中常用的那样。 只需将所需的控件放置在不同的选项卡面板中（就像 Windows 窗体一样），并捕获 ActiveTabChanged 事件，然后执行所有满足应用程序要求的必要操作。

背景

我见过很多人（包括我自己）习惯于手动创建单独的面板和图像，以在 ASP.NET 应用程序中创建选项卡。 那些实际上并不是选项卡，而是以一种用户可以可视化并感觉他们正在使用选项卡的方式创建和显示的。 我实际上在这些类型的应用程序中工作过，请相信我，维护起来并不容易，代码行数肯定会增加。 AJAXControlToolikit 在这方面确实很有帮助。

使用示例

我确信没有人会在没有实际看到代码的情况下信服。 在此代码演示中，我正在使用一个 TabContainer 控件，该控件具有三个选项卡，我通过单击属性面板中可用的“**添加选项卡面板**”选项添加了这些选项卡。 现在，三个不同的网格视图被添加到三个不同的选项卡中，我尝试做的是在每个选项卡的 ActiveTabChanged 事件中填充依赖的网格视图。 你可以下载与本文一起提供的代码。 可以通过简单地设置来避免回发...

AutoPostBack = "False" 

...在选项卡容器的 ActiveTabChanged 事件中。 默认情况下，它设置为 true。

using System; 
using System.Data; 
using System.Configuration; 
using System.Collections;
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts; 
using System.Web.UI.HtmlControls; 

public partial class TabControl : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 
        if (!IsPostBack) 
        { 
            TabContainer1_ActiveTabChanged(TabContainer1, null); 
        } 
    } 

    protected void TabContainer1_ActiveTabChanged(object sender, EventArgs e) 
    { 
        DataTable dTable_rgstrtn = null; 
        DataTable dTable_btch = null; 
        DataTable dTable_crs = null; 
        
        try 
        { 
            if (TabContainer1.ActiveTabIndex == 0) 
            { 
                dTable_rgstrtn = new DataTable();
                        dTable_rgstrtn.Columns.Add("stdnt_cd"); 
                dTable_rgstrtn.Columns.Add("rgstrtn_cd");
                        dTable_rgstrtn.Columns.Add("sbjct_chsn"); 
                dTable_rgstrtn.Columns.Add("stdnt_stts");
                        
                dTable_rgstrtn.Rows.Add(dTable_rgstrtn.NewRow()); 
                
                dTable_rgstrtn.Rows[0]["stdnt_cd"] = "S0080032003023"; 
                dTable_rgstrtn.Rows[0]["rgstrtn_cd"] = "R0080032003023"; 
                dTable_rgstrtn.Rows[0]["sbjct_chsn"] = "ASP.NET 3.0, SQL 2005, XML"; 
                dTable_rgstrtn.Rows[0]["stdnt_stts"] = "VALID";
            
                GridView1.DataSource = dTable_rgstrtn; 
                GridView1.DataBind(); 
                GridView1.Visible = true; 
            } 
        
            if (TabContainer1.ActiveTabIndex == 1) 
            { 
                dTable_btch = new DataTable();
    
                        dTable_btch.Columns.Add("btch_cd"); 
                dTable_btch.Columns.Add("smstr_cd"); 
                dTable_btch.Columns.Add("smstr_vrsn");
                        dTable_btch.Columns.Add("mx_nmbr_stdnt"); 
                
                dTable_btch.Rows.Add(dTable_btch.NewRow());
                        
                dTable_btch.Rows[0]["btch_cd"] = "B0001"; 
                dTable_btch.Rows[0]["smstr_cd"] = "SM100";
                        dTable_btch.Rows[0]["smstr_vrsn"] = "1.00"; 
                dTable_btch.Rows[0]["mx_nmbr_stdnt"] = "20"; 
                
                GridView2.DataSource = dTable_btch; 
                GridView2.DataBind(); 
                GridView2.Visible = true; 
            } 
            
            if (TabContainer1.ActiveTabIndex == 2) 
            { 
                dTable_crs = new DataTable();
                    
                dTable_crs.Columns.Add("crs_ttl"); 
                dTable_crs.Columns.Add("crs_drtn"); 
                dTable_crs.Columns.Add("smrt_crd_rqrd");
                        
                dTable_crs.Rows.Add(dTable_crs.NewRow()); 
                
                dTable_crs.Rows[0]["crs_ttl"] = "Introducing ASP.NET 3.5"; 
                dTable_crs.Rows[0]["crs_drtn"] = "48 Hrs"; 
                dTable_crs.Rows[0]["smrt_crd_rqrd"] = "Yes"; 
                
                GridView3.DataSource = dTable_crs; 
                GridView3.DataBind(); 
                GridView3.Visible = true; } 
            } 
            
            catch 
            { 
                throw; 
            } 
            finally 
            { 
                dTable_btch = null; 
                dTable_crs = null; 
                dTable_rgstrtn = null; 
            } 
        } 
    }

如代码所示，无需复杂的逻辑或处理即可实现选项卡控件。 如果选项卡面板中的不同选项卡不包含任何动态数据或验证，那么最好将 AutoPostBack 属性设置为 false。 这将使选项卡操作更快。 通过使用 AJAX 更新进度，你可以使选项卡操作更具用户交互性。

历史

• 2008 年 7 月 29 日：初始发布