Jquery 选项卡 MVC 4 - 从控制器重定向到选项卡

Question

我有以下代码，其中在控制器中设置了 'SelectedTabToFind'。这用于验证，以便显示正确的选项卡。

$("#tabs").tabs(
{
active: $("#SelectedTabToFind").val(),
cache: false
});

<div id="tabs">
<ul>
    <li><a href="#tabs-1" title="View">View</a></li>
    <li><a href="#tabs-2" title="Update">Update</a></li>
    <li><a href="#tabs-3" title="Validate">Validate</a></li>
    <li><a href="#tabs-4" title="Notes">Notes</a></li>
</ul>
<div id="tabs-1">
     @Html.Partial("View",Model)
</div>
<div id="tabs-2">
     @Html.Partial("Update",Model)
</div>
<div id="tabs-3">
     @Html.Partial("Validate",Model.ValidateModel)
</div>
<div id="tabs-4">
    @Html.Partial("Notes", Model)
</div>

查看选项卡 - 显示信息

更新选项卡 - 可以更新选项卡上的信息

验证选项卡 - 可以更新选项卡上的信息

注释选项卡 - 显示带有单独页面的信息列表 add/update 注释

验证有效并正确显示“更新”和“验证”选项卡。当我 add/update 注释时重定向不起作用，因为它使用单独的页面而不是选项卡。

我之前使用过以下代码重定向到一个选项卡

return Redirect(Url.Action("View", new { id = note.Id }) + "#tabs-4");

这不适用于上面的代码

如果我注释掉 'active' 它会正常工作

$("#tabs").tabs(
    {
    //active: $("#SelectedTabToFind").val(),
    cache: false
    });

如何重定向到正确的选项卡但保持活动选项以进行验证？

Answer 1

当您重定向到一个选项卡时，该选项卡会自动变为活动状态。你不能做某事而它恰恰相反！

来自jquery tabs doc

active Type: Boolean or Integer Default: 0 Which panel is currently open. Multiple types supported:

Boolean: Setting active to false will collapse all panels. This requires the collapsible option to be true. Integer: The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.

Answer 2

在JQuery UI tabs: How do I navigate directly to a tab from another page?

的帮助下

验证表单时会显示正确的选项卡，并且来自另一个页面的重定向也能正常工作。

查看页面

if (document.location.hash != '')
        {
           var tabSelect = document.location.hash.substr(1, document.location.hash.length);
            //Used to return to tab using return Redirect(Url.Action("View", new { id = note.Id }) + "#4");
           $("#tabs").tabs(
           {
               active: tabSelect,
               cache: false
           });
        }
        else
        {
            $("#tabs").tabs(
            {
                //Used to return to tab using return ViewModel.SelectedTab = 2;
                active: $("#SelectedTabToFind").val(),
                cache: false
            });
        }

用于控制器中的注释部分

return Redirect(Url.Action("View", new { id = note.Id}) + "#4");

用于控制器中的更新和验证部分

ViewModel.SelectedTab = 2;

Jquery 选项卡 MVC 4 - 从控制器重定向到选项卡

Jquery Tabs MVC 4 - Redirect to to tab from controller

jquery-tabs

asp.net-mvc-4