具有MVC4内容的jQuery选项卡

我试图在jQuery选项卡中显示一些MVC4视图。这是我的密码：

<div id="tabs">
    <ul>
        <li><a href="#appone">App One</a></li>
        <li><a href="#apptwo">App Two</a></li>
    </ul>
    <div id="appone">
        @{ Html.RenderPartial("~/Views/AppOne/Index.cshtml"); }
    </div>
    <div id="apptwo">
        @{ Html.RenderPartial("~/Views/AppTwo/Index.cshtml"); }
    </div>
</div>

@{Html.RenderPartial（“~/Views/AppOne/Index.cshtml”）；}
@{Html.RenderPartial（“~/Views/AppTwo/Index.cshtml”）；}

问题是第一个选项卡内容显示得很好，但第二个选项卡是空的。似乎未渲染局部视图

---

有没有一种方法可以在加载页面时强制jQuery选项卡更新所有选项卡的内容，或者在加载页面时强制呈现我的部分视图？

以下是我正在积极处理的代码，这些代码工作正常：

Login.cshtml

@{
    AjaxOptions optsLogin = new AjaxOptions { UpdateTargetId = "login-tab-login" };
    AjaxOptions optsRegister = new AjaxOptions { UpdateTargetId = "login-tab-register" };
}
<section id="login-tabs">
    <ul>
        <li><a href="#login-tab-login">Returning Customers</a></li>
        <li><a href="#login-tab-register">New Customers</a></li>
    </ul>
    @using (Ajax.BeginForm("Login", "Account", optsLogin, new { id = "form-login" }))
    {
        <div id="login-tab-login">
            @Html.Partial("Account/_Login")
        </div>
    }
    @using (Ajax.BeginForm("Register", "Account", optsRegister, new { id = "form-register" }))
    {
        <div id="login-tab-register">
            @Html.Partial("Account/_Register")
        </div>
    }
</section>
<script type="text/javascript">
    $(function() {
        $('#login-tabs').tabs();
    });
</script>

Login GET

操作方法呈现整个页面，包括

\u Layout.cshtml

和

\u ViewStart.cshtml

视图。我的部分视图，

\u Login.cshtml

和

\u Register.cshtml

，包含输入表单的HTML元素。每个局部视图都有自己的提交按钮：

<input type="submit" value="<Whatever you want to display>" />

由于每个局部视图调用都使用（Ajax.BeginForm（…）块封装在自己的

中，并且我已经为每个
赋予了自己的
id
属性，因此我可以添加JavaScript代码来劫持
提交
事件。根据按下哪个
submit
，它将执行与
Ajax.BeginForm（…）
调用中指定的操作和控制器关联的操作方法。在我的例子中，如果表单数据通过验证，控制器将自动重定向到
/Home/Index

但是，如果验证失败，操作方法只需将部分视图的渲染版本发送回浏览器，并将其放置在与
关联的
AjaxOptions
对象的
UpdateTargetId
属性中指定的元素中。由于默认的
InsertionMode
是
Replace
，视图引擎只需将部分视图的旧版本替换为新版本，包括表单数据和验证消息（如果包括）

我唯一没有包括的与代码相关的项目是我的局部视图，就jQuery选项卡功能而言，这并不重要。我的部分视图中没有任何额外的JavaScript，我没有包括的
AccountController
中的额外代码特定于调用我的外部Web API控制台应用程序和设置授权cookie。我正在使用Google的CDN进行jQuery和jQuery UI声明，而不是在本地托管JavaScript

你需要一段时间来思考你必须做的事情。一旦你掌握了它，你就掌握了它，知识是可以转移的。谢天谢地，这不是网络表单。
你应该为这些表单调用ActionResults，而不是直接输入视图。这可能就是它不适合您的原因，因为它不是在框架的上下文中执行的。这是可行的，但我在使用javascript时遇到了问题。它也适用于ajax loader中内置的选项卡，但是每次单击都会重新加载选项卡，从而丢失表单数据。缓存选项卡似乎不起作用。如果每个选项卡都有自己的模型，则只需使用RenderAction而不是RenderPartial。这样你就可以给他们每人提供一个他们期待的模型。按照您现有的方式进行渲染，它们都是在该视图中现有模型的上下文下进行渲染的。这不起作用-用RenderAction替换RenderPartial显示第一个选项卡正常，但第二个选项卡再次为空。也许我误解了？您正在使用jQuery选项卡？在那里有什么好玩的吗？你的第二个标签显示的很好？如果这对你有用的话，我肯定还有别的事。我将检查它。我将jQuery调用添加到现有代码中，但这就是使选项卡正常工作所需的全部内容。如果您想让每个选项卡代表一个表单，这就是我正在做的，那么您必须将每个DIV包装在一个调用Ajax.BeginForm（…）的using块中。您只需要确保在控制器中为调用的每个表单操作都有一个操作方法。我的选项卡正在工作。。。只是在第二个选项卡中没有内容——尽管我知道它在选项卡外或第一个选项卡中工作得很好。我的代码和你的一样。。。虽然我不知道“将每个DIV包装在调用Ajax.BeginForm的using块中”是什么意思。。。也许这就是我所缺少的。我已经改变了我的答案，更详细地解释了我在做什么。希望它对你有用…谢谢尼尔！我将把这个标记为答案，即使这个问题对我来说仍然存在。我怀疑这里还有更多的事情要发生在我身上，而你很好地证明了我想做什么是可能的。尽管如此，第二个选项卡中仍然没有任何内容-即使Html.Partial链接是相同的。我怀疑一些JS问题正在破坏我的工作，所以我将尝试进一步隔离它。为伟大的解释喝彩。
<input type="submit" value="<Whatever you want to display>" />