jQuery的卡口与MVC4内容 [英] jQuery tabs with MVC4 content

问题描述

我试图得到一些MVC4意见jQuery的标签显示。这里是我的code：

I'm trying to get some MVC4 views to display in jQuery tabs. Here's my code:

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

的问题是，在第一个选项卡的内容显示只是细但第二是空的。这似乎局部视图不渲染。

The problem is that the first tab content displays just fine- but the second is empty. It seems the partial view is not rendered.

有没有办法要么迫使jQuery的标签来更新所有选项卡的内容时，页面加载，还是有办法逼我的局部视图呈现在页面加载？

Is there a way to either force jQuery tabs to update content for ALL tabs when the page is loaded, or a way to force my partial view to render on page load?

推荐答案

下面是code，我积极工作是工作得很好：

Here's code I'm actively working on that is working just fine:

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>

我的部分观点是在一个账户的子文件夹的共享文件夹。此外，每个局部视图有其自己的模型。除此之外，实施没什么特别的......

My partial views are in the Shared folder in an Account subfolder. In addition, each partial view has its own model. Other than that, the implementation is nothing special...

更新

我添加code来实现Ajax的两个标签调用。选项​​卡部分上面的code座持有 AjaxOptions 对象为两＆LT;形式＆GT; 元素。你的控制器需要看起来像这样：

I've added code to implement Ajax calls on the two tabs. The code block above the tabs section holds the AjaxOptions objects for the two <form> elements. Your controller needs to look something like this:

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);
   }
}

的登录GET 操作方法呈现的整个页面，包括 _Layout.cshtml 和 _ViewStart.cshtml 的意见。我的部分景色， _Login.cshtml 和 _Register.cshtml ，保持报名表的HTML元素。每个部分的视图都有自己的提交按钮：

The Login GET action method renders the entire page, including the _Layout.cshtml and _ViewStart.cshtml views. My partial views, _Login.cshtml and _Register.cshtml, hold the HTML elements for the entry forms. Each partial view has its own submit button:

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

由于每个部分的视图调用是在自己的包裹使用（Ajax.BeginForm（...））块，我给每个＆LT ;形式＆GT; 自己的 ID 属性，我可以添加JavaScript code劫持提交事件。根据所提交是pressed，将执行与在 Ajax.BeginForm指定的操作和控制器（相关的操作方法.. 。）电话。在我的情况下，如果表单数据通过验证，控制器将自动重定向到 /首页/指数。

Because each partial view call is encased in its own using (Ajax.BeginForm(...)) block and I have given each <form> its own id attribute, I can add JavaScript code to hijack the submit event. Depending on which submit is pressed, it will execute the action method associated with the specified action and controller in the Ajax.BeginForm(...) call. In my case, if the form data passes validation, the controller will automatically redirect to /Home/Index.

但是，如果验证失败，操作方法将简单地我的局部视图渲染的版本，发送回浏览器，并将其放置在 UpdateTargetId 属性指定的元素与＆LT相关的 AjaxOptions 对象;形式＆GT; 。由于默认 InsertionMode 是替换，视图引擎将简单地用新版本替换旧版本的局部视图，完整的表单数据和验证消息，如果包括在内。

However, if validation fails, the action method will simply send back the rendered version of my partial view to the browser and place it in the element specified in the UpdateTargetId property in the AjaxOptions object associated with the <form>. Since the default InsertionMode is Replace, the view engine will simply replace the old version of the partial view with the new version, complete with form data and validation messages, if included.

我没有包含唯一的code有关的物品是我的局部视图，它真的并不重要，只要jQuery的标签功能去。我没有在我的局部视图任何额外的JavaScript，并在的AccountController 我不包括特定于叫我外部Web API控制台额外code应用和设置授权cookie。我使用谷歌的CDN我的jQuery和jQuery UI的声明，而不是在本地托管的JavaScript。

The only code-related items I haven't included are my partial views, which really don't matter as far as the jQuery tabs functionality goes. I don't have any additional JavaScript in my partial views, and the additional code in the AccountController I didn't include is specific to calling my external Web API console application and setting the authorization cookie. I am using Google's CDN for my jQuery and jQuery UI declarations, rather than hosting the JavaScript locally.

这需要一段时间来回绕，你必须做你的头。一旦你得到了它，虽然，你有它和知识转让。这是不会的WebForms，谢天谢地。

It takes a while to wrap your head around what you have to do. Once you've got it, though, you've got it and the knowledge is transferable. This is not WebForms, thank goodness.

这篇关于jQuery的卡口与MVC4内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！