Not to get first tab selected after a postback is occurred in ASP.NET?

Question

body {
font-size: 80%;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
}

ul#tabs {
list-style-type: none;
margin: 30px 0 0 0;
padding: 0 0 0.3em 0;
}

ul#tabs li {
display: inline;
}

ul#tabs li a {
color: #42454a;
background-color: #dedbde;
border: 1px solid #c9c3ba;
border-bottom: none;
padding: 0.3em;
text-decoration: none;
}

l#tabs li a:hover {
background-color: #f1f0ee;
}

ul#tabs li a.selected {
color: #FFF;
background-color: #047700;
font-weight: bold;
padding: 0.7em 0.3em 0.38em 0.3em;

}

div.tabContent {
border: 1px solid #047700;
padding: 0.5em;
background-color: #f1f0ee;
}

var tabLinks = new Array();
var contentDivs = new Array();

function init() {

    // Grab the tab links and content divs from the page
    var tabListItems = document.getElementById('tabs').childNodes;
    for (var i = 0; i < tabListItems.length; i++) {
        if (tabListItems[i].nodeName == "LI") {
            var tabLink = getFirstChildWithTagName(tabListItems[i], 'A');
            var id = getHash(tabLink.getAttribute('href'));
            tabLinks[id] = tabLink;
            contentDivs[id] = document.getElementById(id);
        }
    }

    // Assign onclick events to the tab links, and
    // highlight the first tab
    var i = 0;

    for (var id in tabLinks) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function () { this.blur() };
        if (i == 0) tabLinks[id].className = 'selected';
        i++;
    }

    // Hide all content divs except the first
    var i = 0;

    for (var id in contentDivs) {
        if (i != 0) contentDivs[id].className = 'tabContent hide';
       i++;
    }
}

function showTab() {
    var selectedId = getHash(this.getAttribute('href'));

    // Highlight the selected tab, and dim all others.
    // Also show the selected content div, and hide all others.
    for (var id in contentDivs) {
        if (id == selectedId) {
            tabLinks[id].className = 'selected';
            contentDivs[id].className = 'tabContent';
        } else {
            tabLinks[id].className = '';
            contentDivs[id].className = 'tabContent hide';
        }
    }

    // Stop the browser following the link
    return false;
}

function getFirstChildWithTagName(element, tagName) {
    for (var i = 0; i < element.childNodes.length; i++) {
        if (element.childNodes[i].nodeName == tagName) return element.childNodes[i];
    }
}

function getHash(url) {
    var hashPos = url.lastIndexOf('#');
    return url.substring(hashPos + 1);
}

When I select a value in Asp.net dropdown there is a postback and the first tab will be selected. with the given code above how to prevent the first tab not being selected after a postback is occurred.

Answer 1

The problem is that the javascript variables will reset on postback. You can use a hidden field to keep track of the page state to get around this. So on your page you can have something like

<input type="hidden" id="selectedTabs" value="" runat="server">

and you can retrieve the value like so:

document.getElementById('<%= selectedTabs.ClientID %>').value

So in your code behind you can tell it

private void Page_Load(object sender, System.EventArgs e)
{
    if (Page.IsPostBack)
        selectedTabs.Value = "postback";
    else
        selectedTabs.Value = "pageload";
}

Answer 2

Same thing i faced and fixed in my asp.net mvc application like as:

Simple way is to set the Value to 1 for Selected tab in your Action.you can take SelectedTab as a int in your model class,so when you pass this model to your view automatically first tab is selected ,but in document load you have to get the value or in viewdata or in hiden field

 example:

In action controller

public action abc()
{
"Intial your model here" and set value as 

model.SelectedTab = 1;
return view("abc",model);
}
 In view:

        $(document).ready(function () {
                   var selected=  '<%=Model.SelectedTab %>';
       });