ASP.NET MVC: История одного проекта Поиск (часть 10)

Содержание

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)

Задача

Мне требуется создать универсальный поиск, с возможностью расширения списка типов сущностей, по которым можно осуществлять поиск. Поиск должен осуществляться через autocomplete-поле на всех страницах сайта. Для этого надо все типы сущностей: экспонат, лента, метка "засунуть" в один список, который через AJAX будет возвращать JSON-объекты в выпадающий список.

Поле ввода запроса

Куда положить поле ввода, это риторический вопрос. Конечно же в шаблон (_LayoutExtended), чтобы поле было доступно с любой страницы сайта (отключение поиска на избранных страницах, например, ввод логина и пароля, пока не будем обсуждать, но это в планах). Я создам UserControl, который будет отображать само поле ввода и содержать скрипты (у нас же ajax), которые будут обслуживать это поле:

Вот код разметки:

@Html.TextBox("searcher", 
	null, 
	new { data_autocomplete = @Url.Content("/site/search/") })
@Html.ScriptBlock(
@<script 
	type="text/javascript" 
	src="@Url.Content("/scripts/search.mvc.helpers.js")">
</script>)
 
@Html.ScriptBlock(
@<script 
	type="text/javascript" 
	src="@Url.Content("/scripts/jquery.blockUI.js")">
</script>)

Как видно из разметки есть поле ввода и два скрипта: один - работает с поле ввода, второй - "прячет" от пользователя контент сайта, на время, пока происходит перенаправление на выбранный из списка элемент. Показывать второй скрипт я не буду, вы можете найти подобного рода скриптов на jQuery огромное количество в интернете или, в конце-концов, написать свой скрипт с таким функционалом. А вот первый я создам в папке Scripts, он пока пустой займемся им позже.

Откуда контент-то? Дык, JsonResult есть!

Поместить метод поиска Search разумнее всего в основной для сайта контролер, чтобы доступность метода не перекрывалась необходимостью авторизации и аутентификации. Значит в моем случае, в контролле SiteController:

public JsonResult Search() {
	return Json("", JsonRequestBehavior.AllowGet);
}

Пока он тоже "пустой". А прежде чем начать писать что-то, я бы хотел объяснить, что я собираюсь сделать. Разложить, так сказать, по полочкам вариант реализации.

SearchItem базовый класс для поиска

Чтобы получить возможность наполнить выпадающий список autocomplete, надо чтобы сущности были одного типа (я не буду сейчас говорить про Tuple), иначе придется выдавать из метода Search (JsonResult) несколько списков, а потом еще и обрабатывать их по разному, в зависимости от полей и свойств, которые есть в этих классах. Я упрощу себе задачу, создам один абстрактный базовый класс SearchItem. От этого класса унаследую все классы, которые и будут иметь возможность отображаться в списке при поиске:

/// <summary>
/// Базовый класс для всех сущностей,
/// от которого должна быть унаследована сущность
/// чтобы иметь возможность поиска по ней
/// </summary>
public abstract class SearchItem {
	/// <summary>
	/// Идентификатор
	/// </summary>
	public abstract int Id { get; }
 
	/// <summary>
	/// Название CSS стиля для отображения
	/// </summary>
	public abstract string CssClass { get; }
 
	/// <summary>
	/// Наименование типа, 
	/// используется для перенаправления 
	/// пользователя
	/// </summary>
 
	public abstract string TypeName { get; }
 
	/// <summary>
	/// Заголовок, отображается в списке autocomplete
	/// </summary>
	public abstract string Title { get; }
}

Я постарался описать в summary всю информацию по свойствам. Надеюсь, всё понятно. Теперь унаследую от этого класса новый класс ExhibitSearch:

/// <summary>
/// Класс используется при формировании
/// результатов поиска по сущности Exhibit
/// </summary>
public class ExhibitSearch : SearchItem {
	Exhibit Model;
	public ExhibitSearch(Exhibit model) {
		this.Model = model;
	}
	public override int Id {
		get { return this.Model.Id; }
	}
 
	public override string Title {
		get { return Model.Title; }
	}
 
	public override string CssClass {
		get { return "exhibitsearch"; }
	}
 
	public override string TypeName {
		get { return "экспонат:"; }
	}
}

Обратите внимание на CssClass, я создал этот стиль в файле каскадных стилей. В нем ничего особенного, просто хочется чтобы заголовок был под цвет шаблона в выпадающем списке. Такие стили я создал для каждого из наслеников класса SearchItem. А теперь класс для меток для поиска:

/// <summary>
/// Класс используется при формировании
/// результатов поиска по сущности Tag
/// </summary>
public class TagSearch : SearchItem {
	Tag Model;
 
	public TagSearch(Tag model) {
		this.Model = model;
	}
 
	public override int Id {
		get { return Model.Id; }
	}
 
	public override string Title {
		get { return Model.Name; }
	}
 
	public override string CssClass {
		get { return "tagsearch"; }
	}
 
	public override string TypeName {
		get { return "метка:"; }
	}
}

И напоследок, остался еще класс для поиска по сущности "Лента":

/// <summary>
/// Класс используется при формировании
/// результатов поиска по сущности Tag
/// </summary>
public class LentaSearch : SearchItem {
	Lenta Model;
 
	public LentaSearch(Lenta model) {
		this.Model = model;
	}
 
	public override int Id {
		get { return Model.Id; }
	}
 
	public override string Title {
		get { return Model.Content.CutLongText(100, "..."); }
	}
 
	public override string CssClass {
		get { return "lentasearch"; }
	}
 
	public override string TypeName {
		get { return "лента:"; }
	}
}

Пока хватит новых классов. Если потребуется осуществлять поиск по какой-либо еще сущности, я добавлю ее позже.

Метод Search

Возвращаемся к методу поиска:

public JsonResult Search(string term) {
	List<SearchItem> result = new List<SearchItem>();
	var exhibits = exhibitRepository.All.Where(x => x.Title.Contains(term) || x.Content.Contains(term))
		.Take(5)
		.ToList()
		.Select(x => new ExhibitSearch(x));
	if (exhibits.Any()) {
		result.AddRange(exhibits);
	}
 
	var tags = tagRepository.All
		.Where(x => x.Name.Contains(term))
		.Take(5)
		.ToList()
		.Select(x => new TagSearch(x));
 
	if (tags.Any()) {
		result.AddRange(tags);
	}
 
	var lentas = lentaRepository.All
		.Where(x => x.Content.Contains(term))
		.Take(5)
		.ToList()
		.Select(x => new LentaSearch(x));
 
	if (lentas.Any()) {
		result.AddRange(lentas);
	}
 
	return Json(result.OrderBy(x => x.Title).ToArray(), JsonRequestBehavior.AllowGet);
}

Находим все записи в разных типах сущностей, которые подходят по критерию отбора и складываем их в один список (Можно было бы использовать Linq и в частности Uinion(), но я сделал "по старинке"). И если теперь есть метод, можно написать скрипт, который будет его вызывать в файле search.mvc.helpers.js:

$(document).ready(function () {
	var url = $("#searcher").attr("data-autocomplete");
	$("#searcher").autocomplete({
		minLength: 2,
		source: function (request, response) {
			$.getJSON(url, { term: request.term }, response);
		},
		select: function (event, ui) {
			block();
			if (ui.item.CssClass == 'tagsearch') window.location = '/museum?t='   ui.item.Title;
			if (ui.item.CssClass == 'exhibitsearch') window.location = '/museum/show/'   ui.item.Id;
			if (ui.item.CssClass == 'lentasearch') window.location = '/lenta?t='   ui.item.Title;
			return false;
		}
	}).data('autocomplete')._renderItem = function (ul, item) {
		return $('<li style="font-size:.7em; max-width:700px;"></li>')
				.data('item.autocomplete', item)
				.append('<a><span class="searchtype">'
					  item.TypeName
					  '</span><span class="searchtitle '   item.CssClass   '">'
					  item.Title
					  '</span></a>')
				.appendTo(ul);
	};
});

Стоит еще показать как это работает. Autocomplete-поле теперь выбрасывает вот такой спискок:

Я набрал в строке поиска "го" и это результат работы поиска. Мне осталось только предложить скачать проект и попрощаться. Спасибо за внимание - пишите комментарии.

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