ASP.NET MVC: История одного проекта "Фильтрация" (часть 9)

Немаловажной возможностью на любом из сайтов является фильтрация и сортировка записей. В этой статье я буду делать пока только фильтрацию по категориям и по меткам (tags).

Содержание

Постановка задачи на эту статью

В "Музее юмора" есть залы, а экспонаты в этих залах помечены метками. Было бы не плохо предоставить пользователю возможность фильтровать экспонаты по идентификатору зала или по меткам. Реализуем выше сказанное.

Текущий расклад

Наверное, не трудно догадаться, что всё будет происходить в контролере Museum, в методе Index и в представлении для этого метода. На данный момент метод выглядит так:

public ViewResult Index(int? id) {
  var model = exhibitRepository
    .AllIncluding(exhibit => exhibit.Hall,
      exhibit => exhibit.Tags)
    .ToViewModels();
  return View(model.ToPagedList(id ?? 1));
}

А представление, соответственно, выглядит так:

@model PagedList<Calabonga.Mvc.Humor.Models.ShowExhibitViewModel>
@{
  ViewBag.Title = "Экспонаты музея юмора";
}
@section header{
  <h2>
    Экспонаты музея юмора</h2>
}
@if (Model != null && Model.Count > 0) {

  foreach (Calabonga.Mvc.Humor.Models.ShowExhibitViewModel item in Model) {
    @Html.Partial("Templates/ExhibitBriefTemplate", item);
  }
  @Html.PagerForPagedList(Model.PageIndex, Model, "index")
}

На представление "падает" объект типа PagedList<T> (из nuget-пакета PagedListExt), который позволяет реализовать только постраничный просмотр, значит про фильтрацию он ничего не знает. Следовательно, надо создать другой объект (ViewModel), который сможет расширить функционал представления.

Опять новый ViewModel? Ага...

Надо сделать так, чтобы мой метод Index принимал дополнительные параметры в сигнатуре метода. А раз фильтровать мне хочется по идентификатору зала (HallId) или по метке (tag), то именно эти параметры я и добавлю:

public ViewResult Index(int? id, int? hall, string tagname) {
  // ... много букв
}

Но теперь другая проблема. Когда я первый раз отсортирую экспонаты, то есть применю фильтр, представление не будет знать о том какой фильтр был применен или какую метку нажал посетитель сайта для фильтрации. А значит, пейджер не сможет корректно переключить страницу используя установленный фильтр. Таким образом, надо сделать ViewModel, который будет иметь эту информацию на представлении, и сам будет делать фильтрацию по любому из озвученных параметров. Вот он весь, посмотрите:

/// <summary>
/// ViewModel используется для фильтрации
/// экспонатов на главной
/// странице музея юмора
/// </summary>
public class ExhibitSelectorViewModel {
  public ExhibitSelectorViewModel(int? id, IQueryable<ShowExhibitViewModel> items,
    Hall hall, Tag tag) {

    if (hall != null) {
      items = items.Where(x => x.HallId.Equals(hall.Id));
      this.HallId = hall.Id;
      this.HallName = hall.Name;
    }

    if (tag != null) {
      items = items.Where(x => x.Tags.Contains(tag));
      this.TagName = tag.Name;
    }

    this.Items = items.ToPagedList(id ?? 1);
  }

  /// <summary>
  /// Коллекция ViewModel экспонатов
  /// для отображения на странице
  /// </summary>
  public PagedList<ShowExhibitViewModel> Items { get; private set; }

  /// <summary>
  /// Идентификатор зала
  /// </summary>
  public int? HallId { get; private set; }

  /// <summary>
  /// Наименование тега
  /// будет отображаться на странице для
  /// информирования пользователя
  /// об установленном фильтре
  /// </summary>
  public string TagName { get; private set; }

  /// <summary>
  /// Наименование зала
  /// будет отображаться на странице для
  /// информирования пользователя
  /// об установленном фильтре
  /// </summary>
  public string HallName { get; private set; }
}

Немного подробностей. HallId и TagName потребуются для применении фильтра, свойство Items будет содержать страницу отобранных данных (или не отобранных если не было применено фильтров) по фильтру. Более того, свойство TagName как и HallName будут использованы на представленнии, чтоб показывать пользователю информацию о примененном типе фильтрации:

фильтрация по типу зала

рис. 0. Фильтрация по типу зала

фильтрация по меткам (tags)

рис.1. Фильтрация по метке

Контролер Museum

Метод контролера, естественно, тоже пришлось изменить, чтобы на представление отправлялся новый ViewModel:

public ViewResult Index(int? id, int? hall, string tagname) {
  Tag tag = null; Hall _hall = null;
  if (!string.IsNullOrEmpty(tagname)) {
    tag = tagRepository.FindName(tagname);
  }
  var items = exhibitRepository.AllIncluding(
    exhibit => exhibit.Hall,
    exhibit => exhibit.Tags)
    .ToViewModels();
  if (hall.HasValue) {
    _hall = hallRepository.Find(hall.Value);
  }
  return View(new ExhibitSelectorViewModel(id, items, _hall, tag));
}

Сначала я обрабатываю информацию полученную при запросе, а потом результат отправляю в ViewModel для выборки и фильтрации.

Представление Index

Ну, и на последок еще измененный код представления. Вот так стало выглядеть представление Index после того как я к нему подключил новый ViewModel в качестве модели:

@model Calabonga.Mvc.Humor.Models.ExhibitSelectorViewModel
@{
  ViewBag.Title = "Экспонаты музея юмора";
}
<h2>
  Экспонаты музея юмора
  @if (Model.HallId.HasValue) { <text>: @Model.HallName</text>}
  @if (!String.IsNullOrEmpty(Model.TagName)) { <text>: по метке "@Model.TagName"</text>}
</h2>
@if (Model.Items != null && Model.Items.Count > 0) {

  foreach (Calabonga.Mvc.Humor.Models.ShowExhibitViewModel item in Model.Items) {
  @Html.Partial("Templates/ExhibitBriefTemplate", item);
  }
  if (Model.Items.TotalPages > 1) {
  @Html.PagerForPagedList(
    Model.Items.PageIndex,
    Model.Items,
    "index",
    "museum",
    new { hall = Model.HallId, tagname = Model.TagName },
    null)
  }
}

На самом деле, проделанных манипуляций достаточно чтобы заработала фильтрация на основании номера зала или на основании выбранной метки. Можно, конечно же, расширить функционал, сделав так, чтобы можно было фильтровать и по метке, и по номеру зала однавременно, но меня пока устраевает именно такой функционал, а вы можете попробовать сделать это самостоятельно.

Лирическое отступление

Nuget-пакеты - очень удобное управление сборками, они меняются и обновляются автоматически или по требованию. Именно поэтому никогда не помешает запустить их обновление в проекте. Запустил и я такое обновление, просто набрав в консоле Nuget менеджера команду:

PM> Update-Package

При обновлении набора nuget-пакетов, выяснилось, что очень много обновлений по некоторым пакетам я пропустил в проекте "ИОП". А еще мне пришлось немного переделать свой nuget-пакет PagedListExt, который "рисует" пейджер на страницах MVC. Обновить его пришлось после того, как я сделал фильтрацию, потому что заметил ошибку. Если текущий номер страницы равен 345 при оключенной фитрации, а после применения какого-нибудь фильтра, фильтрованный набор данных имеет максимум 14 страниц, то результатом работы пейджера была пустая страница, то есть не сбрасывался номер странцы при смене страницы и набора данных. Теперь эта ошибка исправлена. Следовательно, если вы используете nuget-пакет PagedListLite, вам тоже придется обновить пакет, ибо в процессе исправления была изменена сигнатура в некоторых перегрузках конструкторов.

В качестве заключения

Раз уж так быстро получилось реализовать фильтрацию, давайте затронем важный и, наверное, самый ключевой аспект в моем проекте - функцию поиска. Все пользователи, которые будут заходить на сайт, в первую очередь что-то ищут или хотели бы найти. Моя задача - максимально упростить им задачу. Итак, задача следующая.

У меня в проекте есть несколько типов, по которым мне хочется предоставить возможность поиска: экспонат, лента, метка (возможно в дальнейшем еще что-то может пополнить список, например, поиск по логам сайта для администратора). Реализовать данный функционал можно по-разному:

Можно вообще не делать поиск;
Сделать поиск только на страницы "Музей юмора" соответственно только по экспонатам;
А можно на каждой из страниц по типу сущности. На странице "лента анекдотов" - искать только в ILentaRepository; На странице "Музей юмора" - соответсвенно, искать в IExhibitRepository; На странице просмотра журнала изменений (lLogs) - искать записи в журнале изменений и так далее;
Еще один вариант сделать поиск, который получал бы с главного шаблона (_LayoutExtended) строку запроса и перенаправлял пользователя на страницу "Поиск", на которой бы перебирая все перечисленные в предыдущем пункте сущности, выдавал бы на странице найденные совпадения;
И, наконец, самый предпочтительный по-моему вариант, сделать одно поле для ввода строки запроса на главной странице, вернее в главном шаблоне (_LayoutExtended), которое по всем сущностям найдет совпадения и покажет их в выпадающем списке. А вот при выборе конкретного пункта из списка перенаправит пользователя на соответствующую страницу (именно такой поиск реализован на calabonga.net, где сразу можно искать и по названиям статей, и по меткам к ним).

В следующей статье будем делать поиск, который описан в последнем пункте. Спасибо за внимание - пишите комментарии.

mvc aspnet музей юмора

Комментарии к статье (2)

13.06.2012 08:43:29 stuhin ASP.NET MVC: История одного проекта "Фильтрация" (часть 9)

if (!string.IsNullOrEmpty(tagname)) {
tag = tagRepository.FindName(tagname);
}
var items = exhibitRepository.AllIncluding(
exhibit => exhibit.Hall,
exhibit => exhibit.Tags)
.ToViewModels();
if (hall.HasValue) {
_hall = hallRepository.Find(hall.Value);
}

не жирно ли 3 запроса в одном методе? когда фактически все можно уложить в один

13.06.2012 08:45:50 Calabonga ASP.NET MVC: История одного проекта "Фильтрация" (часть 9)

stuhin, а слабо было сразу с примером?

И вообще, о чем речь-то, уважаемый?