ASP.net: TabContainer Maintain Selected Tab Index with Cookies

Methods for reading the cookie created by the clientside script and setting the ActiveTabIndex of the TabContainer.

        private void ReadIndexCookie()
        {
            if (Request.Cookies[CookieName] != null && Request.Cookies[CookieName].Value != null)
            {
                int index;
                int.TryParse(Request.Cookies[CookieName].Value, out index);
                CurrentIndex = index;
                return;
            }
 
            CurrentIndex = 0;
        }
 
        private void SetCurrentTab()
        {
            tcStoreEditor.ActiveTabIndex = CurrentIndex;
        }

Call the two methods in the Page_Load.

        protected void Page_Load(object sender, EventArgs e)
        { 
            if (!Page.IsPostBack)
            {
                //Some Method Calls Here
            }
 
            ReadIndexCookie();
            SetCurrentTab();
        }

JavaScript code which hooks to the TabContainer’s OnClientActiveTabChanged=”OnTabChanged” event. When that event is fired the selected tab index is pulled and written to the cookie.

<script type="text/javascript">

function Set_Cookie(name, value, expires, path, domain, secure) {
// set time, it's in milliseconds
var today = new Date();
today.setTime(today.getTime());

/*
if the expires variable is set, make the correct
expires time, the current script below will set
it for x number of days, to make it for hours,
delete * 24, for minutes, delete * 60 * 24
*/
if (expires) {
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date(today.getTime() + (expires));

document.cookie = name + "=" + escape(value) +
((expires) ? ";expires=" + expires_date.toGMTString() : "") +
((path) ? ";path=" + path : "") +
((domain) ? ";domain=" + domain : "") +
((secure) ? ";secure" : "");
}


function OnTabChanged(sender, args) {
var tabControl = $get("").control;
var currentIndex = tabControl.get_activeTabIndex();
Set_Cookie("", currentIndex, "", "", "", "");
}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
width: 450px;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s