Блог

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

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

#asp.net-mvc #asp.net-mvc-3 #model-view-controller

#asp.net-mvc #asp.net-mvc-3 #модель-представление-контроллер

Вопрос:

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

Вид

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

Спасибо

Комментарии:

1. Просто для пояснения: у вас есть две вкладки. Один из них предназначен для просмотра созданных контактов, другой — для создания нового контакта. Когда кто-то создает новый контакт, вы хотите, чтобы он переключился на просмотр созданного контакта «Просмотр», а не переключал вкладки обратно .. это правильно?

Ответ №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 скрывает элементы, которые в данный момент не видны, и автоматически управляет переключением.

Комментарии:

1. 1. Согласен. Нет необходимости даже использовать ajax, поскольку эти действия ничего не делают, кроме рендеринга частичного (без данных). Таким образом, методы действий могут быть полностью удалены.

Ответ №2:

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

Это приведет к асинхронной отправке вашей формы в ваш метод контроллера. Если вы установите AjaxOptions.Режим вставки должен быть AjaxOptions.Режим вставки.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);
    }
}

Редактировать

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

Метки: