ASP.NET MVC：如何根据模型属性的值预先选择 jQuery-UI 选项卡？答案

【问题标题】：ASP.NET MVC: How to pre-select a jQuery-UI tab depending on the value of a model-property?ASP.NET MVC：如何根据模型属性的值预先选择 jQuery-UI 选项卡？
【发布时间】：2013-03-01 21:59:50
【问题描述】：

假设我通过使用某些模型属性的值获得了以下标记：

<div id = "tabs">
 <ul>
     <%foreach(var category in Model.Categories){%>
       <li><a href = "#category.Name">category.Name</a></li>
     <%}%>
 </ul>
 <%foreach(var category in Model.Categories){%>
    <div id = "category.Name">
       //Content for each category goes here....
    </div> 
 <%}%>
</div>

使用 JQuery 我可以轻松地创建一个选项卡小部件

$("#tabs").tabs();

模型还包含一个名为 ListOfListArticle 的属性，它是文章列表的列表。内部列表中的文章按类别分组。还有一个名为 ArticleToDisplay 的属性。

public List<List<Articles>> ListOfListArticle { get; set; }
public Article ArticleToDisplay { get; set; } 
public List<Category> Categories { get; set; }

我想首先检查要显示的文章所属的类别，并能够自动选择与该类别对应的选项卡。目前，当页面加载时，总是选择第一个选项卡。

有什么办法解决吗？

感谢您的帮助。

【问题讨论】：

标签： asp.net-mvc jquery-ui

【解决方案1】：

$("#tabs").tabs(
    { selected: <%=Model.Categories.IndexOf(Model.ArticleToDisplay.Category) %> }
);

在你的模型上让它成为一个属性可能会更好

public int Index 
{ 
    get 
    {
        if (Categories == null || ArticleToDisplay == null || ArticleToDisplay.Category == null) 
            return 0;

        return Categories.IndexOf(ArticleToDisplay.Category); 
    } 
}

那么你可以写：

$("#tabs").tabs(
    { selected: <%=Model.Index %> }
);

【讨论】：

我有点失落。这是在检查什么？标签还是内容？
现在有意义吗？它所做的是获取文章类别的索引，该索引应该与您遍历它以生成标签的方式相同

【解决方案2】：

我也有同样的要求。
我使用了一个隐藏字段，然后使用 JS 来获取该值来设置 jquery ui 选项卡

1) 我在表单上放了一个隐藏字段...

<%: Html.HiddenFor(model => model.EnmCreateCaseTab) %>

2) 我有一个为页面定制的 javascript 代码，它为整个页面包装了 js，因此在页面顶部我有

<script type="text/javascript">
    Sys.onReady(function () {
        var page = MyApp.newMyPage();
        page.Setup();
    });
</script>

（这是 Douglas Crockford 风格的 javascript 类...）然后，ctor 或 page.Setup() fn 调用一个私有 fn，该 fn 获取隐藏控件的值并使用 javascript 设置选项卡

var SelectInitiallySelectedTab = function () {
        var formValueEnmCreateCaseTab = $("#EnmCreateCaseTab").val();
        // ...
        // set a jquery tabs control
        SelectTab(tabNum);
}
var SelectTab = function (tabNum) {
        // ensure tabNum is in bounds
        var tabCount = TabCount();
        var maxTabIndex = tabCount - 1;
        tabNum = tabNum < 0 ? 0 : tabNum;
        tabNum = tabNum > maxTabIndex ? maxTabIndex : tabNum;
        $('#tabs').tabs({ selected: tabNum });
    }

隐藏字段，可用于在重新提交时保留用户选择的选项卡...

【讨论】：

【解决方案3】：

只需将ui-tabs-selected 类添加到预期的<li> 元素即可。

详情参见下面的堆栈溢出页面

Opening page with tab preselected that's not the first tab

【讨论】：