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-поле теперь выбрасывает вот такой спискок:
Я набрал в строке поиска "го" и это результат работы поиска. Мне осталось только предложить скачать проект и попрощаться. Спасибо за внимание - пишите комментарии.
Подробнее: http://feedproxy.google.com/~r/blogmusor/~3/UpMOEN7bMTQ/85
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Не бойся быть ни как все и все захотят быть как ты! |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.