在 ASP.NET 中发生回发后不选择第一个选项卡？答案

【问题标题】：Not to get first tab selected after a postback is occurred in ASP.NET?在 ASP.NET 中发生回发后不选择第一个选项卡？
【发布时间】：2012-02-20 19:54:54
【问题描述】：

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

当我在 Asp.net 下拉列表中选择一个值时，会出现回发，并且将选择第一个选项卡。使用上面给定的代码，如何防止在回发后第一个选项卡不被选中。

【问题讨论】：

标签： javascript asp.net ajax postback

【解决方案1】：

问题在于 javascript 变量将在回发时重置。您可以使用隐藏字段来跟踪页面状态以解决此问题。所以在你的页面上你可以有类似的东西

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

你可以像这样检索值：

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

所以在你后面的代码中你可以告诉它

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

【讨论】：

【解决方案2】：

我在我的 asp.net mvc 应用程序中遇到并修复了同样的事情，例如：

简单的方法是在 Action 中将 Selected 选项卡的 Value 设置为 1。您可以在模型类中将 SelectedTab 作为 int，因此当您将此模型传递给视图时，会自动选择第一个选项卡，但在文档加载中您必须获取值或在视图数据或隐藏字段中

 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 %>';
       });

【讨论】：