MVC 3 показать скрыть частичные представления на вкладках пользовательского интерфейса jquery

Question

В нашем приложении мы используем вкладки для отображения информации, например, контактов, на этой вкладке пользователь может переключаться между просмотром контактов и созданным контактом. Когда пользователь нажимает «Создать», я хочу, чтобы частичное представление изменилось на CreateContact на той же вкладке. Каков наилучший способ показать скрытые частичные представления на вкладках пользовательского интерфейса jquery? Должен ли я использовать код Ajax для этого?

View

<div id="tabs">
<ul>
   <li><a href="/Home/GetClaim">Claim</a></li>
   <li><a href="/Home/GetProduct">Products</a></li>
   <li><a href="/Home/GetContact">Contact Us</a></li>
</ul>
</div>

Контроллер

public ActionResult GetContact()
{
    return PartialView();
}

public ActionResult CreateContact()
{
    return PartialView();
}

Частичное представление

<li>@Html.ActionLink("Create", "Test", "Home")</li>

Спасибо

Answer 1

Да, вы можете использовать AJAX. Это в том случае, если вы не хотите загружать все частичные представления одновременно.

Если это не имеет значения, вы можете просто сделать их сразу:

<div id="tabs-1">
     @Html.Partial("GetClaim")
</div>
<div id="tabs-2">
     @Html.Partial("GetProduct")
</div>
<div id="tabs-3">
     @Html.Partial("GetClaim")
</div>

jQuery скрывает элементы, которые в данный момент не видны, и будет управлять переключением автоматически.

Answer 2

Вы можете использовать Ajax.ActionLink () - http://msdn.microsoft.com/en-us/library/dd493106.aspx

Это будет асинхронно отправлять вашу форму для вашего метода контроллера. Если вы установите AjaxOptions.InsertionMode равным AjaxOptions.InsertionMode.Replace, тогда он заменит содержимое частичного представления тем, что вы вернете из контроллера. Затем вам просто нужно вернуть представление GetContacts в действии контроллера creatcontacts, как показано ниже:

[HttpGet]
public ActionResult GetContact()
{
    return PartialView(RetrieveListOfContacts());
}

[HttpPost]
public ActionResult CreateContact(StronglyTypedContactModel contact)
{
    if (ModelState.IsValid)
    {
        // .. write your contact here
        return PartialView("GetContact", RetrieveListOfContacts());
    }
    else
    {
        return PartialView(contact);
    }
}

EDIT

Кроме того, вы можете указать, что это будет запрос GET в HttpMethod AjaxOptions, чтобы не требовать форму (как я изначально предполагал, что вы сделали).