Question

我正在尝试在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>

问题是第一个标签内容显示正常 - 但第二个是空的。似乎部分视图没有渲染。

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

Answer 1

这是我正在积极研究的代码，工作得很好：

<强> 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>

我的部分视图位于“帐户”子文件夹的“共享”文件夹中。此外，每个局部视图都有自己的模型。除此之外，实施并不特别......

<强>更新

我添加了代码来在两个标签上实现Ajax调用。选项卡部分上方的代码块包含两个AjaxOptions元素的<form>个对象。您的控制器需要看起来像这样：

<强> AccountController.cs

public class AccountController : Controller
{
   ...
   [HttpGet]
   public ActionResult Login()
   {
       ...
       return View();
   }

   [HttpPost]
   public ActionResult Login(LoginModel model)
   {
       ...
       if (ModelState.IsValid)
           return RedirectToAction("Index", "Home")
       else
           return PartialView("/Account/_Login", model);
   }

   [HttpPost]
   public ActionResult Register(RegisterModel model)
   {
       ...
       if (ModelState.IsValid)
           return RedirectToAction("Index", "Home")
       else
           return PartialView("/Account/_Register", model);
   }
}

Login GET操作方法呈现整个页面，包括_Layout.cshtml和_ViewStart.cshtml视图。我的部分观看次数_Login.cshtml和_Register.cshtml包含输入表单的HTML元素。每个局部视图都有自己的提交按钮：

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

因为每个部分视图调用都包含在自己的using (Ajax.BeginForm(...))块中，并且我已经为每个<form>提供了自己的id属性，所以我可以添加JavaScript代码来劫持{{1}事件。根据按下的submit，它将执行与submit调用中指定操作和控制器关联的操作方法。在我的情况下，如果表单数据通过验证，控制器将自动重定向到Ajax.BeginForm(...)。

但是，如果验证失败，则action方法将简单地将我的局部视图的渲染版本发送回浏览器，并将其放在/Home/Index对象关联的UpdateTargetId属性中指定的元素中使用AjaxOptions。由于默认<form>为InsertionMode，因此视图引擎只会将旧版本的部分视图替换为新版本，并附带表单数据和验证消息（如果包含）。

我没有包含的唯一与代码相关的项目是我的部分视图，就jQuery选项卡功能而言，这无关紧要。我的部分视图中没有任何其他JavaScript，Replace中我没有包含的其他代码特定于调用我的外部Web API控制台应用程序和设置授权cookie。我使用谷歌的CDN作为我的jQuery和jQuery UI声明，而不是在本地托管JavaScript。

需要一段时间才能绕过你必须做的事情。但是，一旦你得到它，你就得到了它，知识是可以转移的。这是不 WebForms，谢天谢地。

带有MVC4内容的jQuery选项卡

1 个答案: