Unidev .NET Technology Blog

by George Zheng

Problem

AJAX Control Toolkit has a neat control – TabContainer, to allow you create tabs on your web page easily. However, one problem with it is that when user refreshes the page, it defaults back to the first tab. This will cause user confusion if you have pagination in third tab let’s say. Every time, when user click a page number on third tab. Page get refreshed and it should show third tab, not the first tab.

Solution

The reason refreshed page always show the first tab is, in fact, one of the benefits of the tab control – switching between tabs doesn’t cause a post back. This is a pure client activity. When server prepares the page, it has no idea which tab is the active tab on client side. So server will set first tab as active tab by default.

One solution for this is to call a web service to update the server status whenever user switching the tabs. This call should be an asynchronous AJAX call in Javascript. So it wouldn’t affect the page performance.

With the help of ASP ScriptManager, such a call is simple and straight forward.

Server side

First, create a web service by Visual Studio to set up the server status.

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

public class ServerUtilities : System.Web.Services.WebService

{

public ServerUtilities () {

//Uncomment the following line if using designed components

//InitializeComponent();

}

 

[WebMethod]

public void SetTabIndex(int index)

{

Session["TabIndex"] = index.ToString();

}

}

Next, to make this web service callable by Javascript, we need to add [ScriptService] for the class and [ScriptMethod] for the method. Since we are using session variable here, we have to set (EnableSession = true) as well.

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[ScriptService]

public class ServerUtilities : System.Web.Services.WebService

{

public ServerUtilities () {

//Uncomment the following line if using designed components

//InitializeComponent();

}

[WebMethod(EnableSession = true)]

[ScriptMethod]

public void SetTabIndex(int index)

{

Session["TabIndex"] = index.ToString();

}

}

Now we can use this session variable to set ActiveTabIndex on the server side whenever page gets refreshed:

tc.ActiveTabIndex = Convert.ToInt32(Session["TabIndex"] ?? “0″);

Client side

We need to call above web service when user changes the tab. First register the web service in the page

<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>

<Services>

<asp:ServiceReference Path=”~/services/ServerUtilities.asmx” />

</Services>

</asp:ScriptManager>

Second write a javascript to call the service

<script type=”text/javascript”>

function OnChanged(sender, args)

{

ServerUtilities.SetTabIndex(sender.get_activeTabIndex());

}

</script>

As you can see, as long as we register web service in ScriptManager, we can call Script Method in a web service from Javascript directly.

Next bind this method into TabContainer’s ActiveTabChanged event. We can do this on server side as well.

tc.OnClientActiveTabChanged = “OnChanged”;

We now have everything setup. You can test it by click refresh button on browser.

Download source code

4 Responses to “Maintaining the Active Tab in TabContainer Control”