Визуализация ASP.NET MVC 3 ViewModels в виде ListView, Accordian или простого списка в виде Razor

Question

Я пытаюсь создать пример для себя, используя MVC3, Razor View Engine и JQuery UI.

Из контроллера я возвращаю ViewModel (у которого есть List) и могу обернуть JQuery Accordion вокруг сегментов html. Все работает как положено.

Теперь я пытаюсь сделать это немного лучше. 1) Хотелось бы иметь панель разбиения на страницы, которая может обновлять Аккордеон в зависимости от выбранной страницы и количества элементов на выбранной странице (я знаю, что нужно сделать в контроллере и т. Д. Мои навыки работы с JavaScript не так хороши по сравнению с c # :-()

2) Я хотел бы иметь возможность выбрать «тип отображения» для данных. Например, если вы видите сайт Slickdeals, мы можем выбрать Grid или Accordion или простой список. Похоже, он просто применяет шаблон к данным и обновляет HTML.

Мне интересно, как лучше всего этого достичь. (Одна мысль, которая пришла мне в голову, это отправить AJAX-запрос на контроллер с желаемым типом отображения, и контроллер может визуализировать представление и вернуть строку в качестве ответа, который затем может быть применен в качестве html для элемента. Есть ли лучший способ, Я имею в виду, что данные уже есть в браузере, так что мы можем просто применить какой-то шаблон и просто заново отрендерить те же данные?)

Как для (1), так и для (2) я бы хотел избежать пост-странички назад.

(я постараюсь добавить более подробную информацию)

Заранее спасибо

Answer 1

Re (2): Я думаю, что генерировать HTML внутри контроллера - плохая идея - разделение интересов предполагает, что View должен нести полную ответственность за HTML.

Однако вы можете иметьсвойство в вашей модели представления, которое сообщает представлению, какую версию генерировать: например,

public class XyzModel
{
    public string displayType { get; set; }
    // ... other properties
}

Затем в представлении вы можете проверить эту переменную:

@if (Model.displayType == "grid")
{
   // html for grid
}
else if (Model.displayType == "accordian")
{
   // html for accordian
}

и т. д., все блоки HTMLиспользуя те же данные.

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

$.post(
    form.attr("action"),
    form.serialize(),
    function (data) {
          $("#dataDisplay").html(data);
    });

гдераздел dataDisplay может выглядеть так:

<div id="dataDisplay">
@Html.Partial("DataDisplayPartial", Model)
</div>

, а представление DataDisplayPartial будет содержать приведенный выше код ... что-то вроде этого.