Using ASP.NET AJAX TAB Control

Background
I have seen many people (I am also one of them) are used to manually creating individual panels and
images to create tabs in ASP.NET applications. Those are actually not tabs, but created and shown in
such a way that users can visualize and get a feeling that they are actually working with tabs. I actually
worked in these kinds of applications and please believe me, it’s not so easy to maintain and definitely
the lines of code get increased. AJAXControlToolikit really helps in this context.
Using the Example
I am quite sure that nobody is convinced without actually seeing the code. In this code demonstration, I
am using a TabContainer control which has three tabs that I added by clicking on Add Tab Panel
option available in the property panel. Now, three different grid views are added in three different tabs
and what I am trying to do is on ActiveTabChanged event of each tab dependant grid views will be
populated. You can download the code which is provided with this article. Postback can be avoided by
simply setting…

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;
}
}
}

As the code suggests, there is no complicated logic or handling needed to implement the tab control. If
different tabs in the tab panel don’t contain any dynamic data or validation, then it is preferred to set
the AutoPostBack property to false. This will make the tab operations much more faster. By using
AJAX Update Progess, you can make the tab operations much more user interactive.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s