【问题标题】:jQuery tabs with MVC4 content带有 MVC4 内容的 jQuery 选项卡
【发布时间】:2013-04-09 12:22:21
【问题描述】:

我正在尝试让一些 MVC4 视图显示在 jQuery 选项卡中。这是我的代码:

<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 选项卡更新所有选项卡的内容,或者强制我的局部视图在页面加载时呈现?

【问题讨论】:

  • 您应该为那些调用 ActionResults,而不是直接输入视图。这可能就是它不适合你的原因,因为它没有在框架的上下文中执行。
  • 是的,我是使用 jQuerys load('AppOne') 来做的。这行得通,但我在使用 javascript 时遇到了问题。它也适用于 ajax 加载器中内置的选项卡,但每次单击都会重新加载选项卡,从而丢失表单数据。缓存标签似乎不起作用。
  • 如果他们每个人都有自己的模型,你只需要使用 RenderAction 而不是 RenderPartial。这样,您就可以为每个人提供他们所期望的自己的模型。通过按照您的方式进行操作,它们都在该视图中您手头的模型的上下文中进行渲染。
  • 那没有用 - 用 RenderAction 替换 RenderPartial 显示第一个选项卡没问题,但第二个选项卡又是空的。也许我理解错了?

标签: jquery asp.net-mvc-4 asp.net-web-api jquery-tabs


【解决方案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>

我的部分视图位于 Account 子文件夹的 Shared 文件夹中。此外,每个局部视图都有自己的模型。除此之外,实现没什么特别的......

更新

我添加了代码以在两个选项卡上实现 Ajax 调用。选项卡部分上方的代码块包含两个 &lt;form&gt; 元素的 AjaxOptions 对象。您的控制器需要如下所示:

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(...)) 块中,并且我为每个&lt;form&gt; 赋予了自己的id 属性,所以我可以添加JavaScript 代码来劫持submit 事件。根据按下的submit,它将执行Ajax.BeginForm(...)调用中与指定动作和控制器相关联的动作方法。在我的例子中,如果表单数据通过验证,控制器会自动重定向到/Home/Index

但是,如果验证失败,操作方法将简单地将我的局部视图的渲染版本发送回浏览器,并将其放置在与@987654340 关联的AjaxOptions 对象中的UpdateTargetId 属性中指定的元素中@。由于默认的InsertionModeReplace,因此视图引擎将简单地将旧版本的部分视图替换为新版本,并包含表单数据和验证消息(如果包含)。

我没有包含的唯一与代码相关的项目是我的部分视图,就 jQuery 选项卡功能而言,这真的无关紧要。我的部分视图中没有任何额外的 JavaScript,我没有包含的 AccountController 中的额外代码专门用于调用我的外部 Web API 控制台应用程序和设置授权 cookie。我将 Google 的 CDN 用于我的 jQuery 和 jQuery UI 声明,而不是在本地托管 JavaScript。

你需要一段时间来思考你必须做的事情。但是,一旦你掌握了它,你就掌握了它并且知识是可以转移的。这不是WebForms,谢天谢地。

【讨论】:

  • 您正在使用 jQuery 选项卡?在那里做任何花哨的事情?你的第二个标签显示得很好?如果这对你有用,我一定有其他事情发生。我去看看。
  • 我将我的 jQuery 调用添加到现有代码中,但这就是使选项卡正常工作所需的全部内容。如果你想让每个选项卡代表一个表单,这就是我正在做的,你必须将每个 DIV 包装在一个调用 Ajax.BeginForm(...) 的 using 块中。您只需要确保在控制器中为每个被调用的表单操作都有一个操作方法。
  • 我的标签正在工作......只是在第二个标签中没有内容 - 尽管我知道它在标签之外或在第一个标签中工作得很好。我在剃刀方面的代码看起来就像你的......虽然我不确定你所说的'将每个 DIV 包装在一个调用 Ajax.BeginForm 的 using 块中'是什么意思......也许这就是我所缺少的。跨度>
  • 我已经更改了答案,以更详细地解释我在做什么。希望它对您有用...
  • 谢谢尼尔!即使问题对我来说仍然存在,我也会将此标记为答案。我怀疑对我来说还有更多事情要做——而且你很好地证明了我可以做我想做的事。但是,第二个选项卡中仍然没有内容 - 即使 Html.Partial 链接是相同的。我怀疑某些 JS 问题对我造成了破坏,因此我将尝试进一步隔离这一点。为一个很好的解释干杯。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多