Вкладки jQuery с содержимым MVC4

Question

Я пытаюсь заставить некоторые представления 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 обновлять содержимое для ВСЕХ вкладок при загрузке страницы, или способ заставить мое частичное представление отображаться при загрузке страницы?

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>

Мои частичные представления находятся в папке Shared в подпапке Account. Кроме того, каждый частичный вид имеет свою модель. Кроме этого, реализация ничего особенного...

ОБНОВИТЬ

Я добавил код для реализации вызовов 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, чтобы захватить submit событие. В зависимости от того submit нажата, он выполнит метод действия, связанный с указанным действием и контроллером в Ajax.BeginForm(...) вызов. В моем случае, если данные формы проходят проверку, контроллер автоматически перенаправит на /Home/Index,

Однако, если проверка не удалась, метод действия просто отправит обратно отрендеренную версию моего частичного представления в браузер и поместит ее в элемент, указанный в UpdateTargetId недвижимость в AjaxOptions объект, связанный с <form>, Так как по умолчанию InsertionMode является Replaceмеханизм просмотра просто заменит старую версию частичного представления новой версией, дополненной данными формы и сообщениями проверки, если они включены.

Единственные элементы, связанные с кодом, которые я не включил, - это мои частичные представления, которые действительно не имеют значения, насколько функциональность вкладок jQuery идет. У меня нет никакого дополнительного JavaScript в моих частичных представлениях, и дополнительный код в AccountController Я не включил специально для вызова моего внешнего консольного веб-приложения API и установки куки авторизации. Я использую CDN Google для своих объявлений jQuery и jQuery UI, а не размещаю JavaScript локально.

Требуется время, чтобы обернуть голову вокруг того, что вы должны сделать. Как только вы это получите, вы получите это, и знания могут быть переданы. Это не WebForms, слава богу.