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

Содержание

ASP.NET MVC: История одного проекта "Готовимся к старту" (часть 1)
ASP.NET MVC: История одного проекта "Всё ради данных" (часть 2)
ASP.NET MVC: История одного проекта "Шаблоны и внешний вид" (часть 3)
ASP.NET MVC: История одного проекта "Еще немного классов" (часть 4)
ASP.NET MVC: История одного проекта "UI - всё для пользователя" (часть 5)
ASP.NET MVC: История одного проекта "UI - Добавление экспоната" (часть 6)
ASP.NET MVC: История одного проекта "UI - Редактирование экспоната" (часть 7)
ASP.NET MVC: История одного проекта "Обработка ошибок" (часть 8)
ASP.NET MVC: История одного проекта "Фильтрация" (часть 9)
ASP.NET MVC: История одного проекта "Поиск" (часть 10)
ASP.NET MVC: История одного проекта "Облако тегов" (часть 11)
ASP.NET MVC: История одного проекта "Главная страница" (часть 12)

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

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

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

Наверное, не трудно догадаться, что всё будет происходить в контролере 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. Фильтрация по типу зала

рис.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-пакет PagedListExt, вам тоже придется обновить пакет, ибо в процессе исправления была изменена сигнатура в некоторых перегрузках конструкторов.

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

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

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

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

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

P.S.

Если у вас  что-то не получилось, скачайте текущую версию проекта "ИОП" и сравните с тем, что у вас. На этом пока всё. 

• Комментарии
• ВКонтакте