MVC3 - 如何在回发时维护选项卡索引

时间:2012-04-13 15:49:41

标签: jquery asp.net-mvc asp.net-mvc-3 jquery-ui razor

我对MVC很新。我有一个jQuery标签的视图(如下图所示)。

<div class="demo">
<div id="demoTabs">
    <ul aria-labelledby="demoTabsLabel">
        <li><a href="#basicInfo">Basic Information</a> </li>
        <li><a href="#address">Address</a> </li>
        <li><a href="#tabbs">Tab 3</a> </li>
    </ul>
    <div id="basicInfo">
        @using (Html.BeginForm("Create", "Organisation", FormMethod.Post)) {
        <div class="editor-label">
            @Html.LabelFor(model => @Model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => @Model.Name) @Html.ValidationMessageFor(model => @Model.Name)
        </div>
        <div>
            <a class="nexttab" href="#address">
                <input id="Submit2" type="submit" value="Continue" /></a>
        </div>
        }
    </div>
    <div id="address">
        @Html.Label("Address") <a class="nexttab" href="#tabbs">
            <input id="Submit4" type="submit" value="Continue" /></a>
    </div>
    <div id="tabbs">
        @Html.Label("optional") </fieldset>
        <input id="Submit5" type="submit" value="Submit" />
    </div>
</div>

当用户按下继续按钮时,控件将使用下面的脚本移动到下一个选项卡。

$("#demoTabs").tabs();
$(".nexttab").click(function () {
    $("#demoTabs").tabs("select", this.hash);
});

但是当保存信息后请求从控制器返回时,它会重新加载页面并再次将控件移动到第一个选项卡。

你能告诉我正确的做法吗?

非常感谢

控制器

[HttpPost]
public ActionResult Create(Xrm.Account account)
{
    //create
    org = orgModel.CreateOrUpdateOrg(account);
    return Redirect(Url.Action("Create", "Organisation") + "#tabbs");           
}

2 个答案:

答案 0 :(得分:3)

在您的控制器中,使用此行返回ActionResult。您需要在末尾添加正确的选项卡名称:

return Redirect(Url.Action("Action", "Controller") + "#tabname");

然后在您的页面中,添加此代码以在加载时显示正确的标签:

$("#demoTabs").tabs("select", window.location.hash);

答案 1 :(得分:1)

更改你的功能

$(".nexttab").click(function () {
    $("#demoTabs").tabs("select", this.hash);
});

要 此

$(".nexttab").click(function () {
        $("#demoTabs").tabs("select", this.hash);
window.location.hash = this.hash
    });

和功能

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

$("#demoTabs").tabs("select", window.location.hash);