Примечание.
Для доступа к этой странице требуется авторизация. Вы можете попробовать войти или изменить каталоги.
Для доступа к этой странице требуется авторизация. Вы можете попробовать изменить каталоги.
Фасеты позволяют самостоятельно управлять навигацией, предоставляя набор ссылок для фильтрации результатов. В этом руководстве структура фасетной навигации размещена в левой части страницы с метками и кликабельным текстом для уточнения результатов.
В этом руководстве описано, как:
- Установите свойства модели как IsFacetable
- Добавьте фасетную навигацию в ваше приложение
Обзор
Фасеты основаны на полях в индексе поиска. Запрос, содержащий facet=[string], задаёт поле для фасетирования. Обычно используется несколько аспектов, таких как &facet=category&facet=amenities, каждый из которых разделен символом амперсанда (&). Для реализации фасетной структуры навигации необходимо указать как аспекты, так и фильтры. Фильтр используется для события щелчка, чтобы сузить результаты. Например, щелкнув "Бюджет", фильтрует результаты на основе этого критерия.
Это руководство расширяет проект разбиения по страницам, созданный в руководстве по добавлению разбиения на страницах в результаты поиска .
Готовую версию кода для этого руководства можно найти в следующем проекте:
Предпосылки
- Решение 2a-add-paging (GitHub). Этот проект может быть собственной версией, созданной из предыдущего руководства, или копией из GitHub.
Установите свойства модели как объект, который можно фасетировать
Чтобы свойство модели находилось в поиске аспектов, оно должно быть помечено с помощью IsFacetable.
Изучите класс Hotel . Категория и Теги, например, помечены как IsFacetable, но HotelName и Description не помечены.
public partial class Hotel { [SimpleField(IsFilterable = true, IsKey = true)] public string HotelId { get; set; } [SearchableField(IsSortable = true)] public string HotelName { get; set; } [SearchableField(AnalyzerName = LexicalAnalyzerName.Values.EnLucene)] public string Description { get; set; } [SearchableField(AnalyzerName = LexicalAnalyzerName.Values.FrLucene)] [JsonPropertyName("Description_fr")] public string DescriptionFr { get; set; } [SearchableField(IsFilterable = true, IsSortable = true, IsFacetable = true)] public string Category { get; set; } [SearchableField(IsFilterable = true, IsFacetable = true)] public string[] Tags { get; set; } [SimpleField(IsFilterable = true, IsSortable = true, IsFacetable = true)] public bool? ParkingIncluded { get; set; } [SimpleField(IsFilterable = true, IsSortable = true, IsFacetable = true)] public DateTimeOffset? LastRenovationDate { get; set; } [SimpleField(IsFilterable = true, IsSortable = true, IsFacetable = true)] public double? Rating { get; set; } public Address Address { get; set; } [SimpleField(IsFilterable = true, IsSortable = true)] public GeographyPoint Location { get; set; } public Room[] Rooms { get; set; } }Мы не изменим теги в рамках этого руководства, поэтому закройте файл hotel.cs без изменений.
Примечание.
Поиск аспектов вызывает ошибку, если поле, запрошенное в поиске, не помечено соответствующим образом.
Добавьте фасетную навигацию в ваше приложение
В этом примере мы поможем пользователю выбрать одну категорию отеля или одно удобство из списков ссылок, отображаемых слева от результатов. Пользователь начинается с ввода текста поиска, а затем постепенно сужает результаты поиска, выбрав категорию или удобства.
Это задание контроллера для передачи списков аспектов в представление. Для поддержания выбора пользователей в процессе выполнения поиска мы используем временное хранилище в качестве механизма сохранения состояния.
Добавление строк фильтра в модель SearchData
Откройте файл SearchData.cs и добавьте свойства строки в класс SearchData , чтобы сохранить строки фильтра аспектов.
public string categoryFilter { get; set; } public string amenityFilter { get; set; }
Добавьте метод действия Facet
Для домашнего контроллера требуется одно новое действие Facet, а также обновление существующих действий Index и Page и метода RunQueryAsync.
Замените метод действия Index(SearchData model).
public async Task<ActionResult> Index(SearchData model) { try { // Ensure the search string is valid. if (model.searchText == null) { model.searchText = ""; } // Make the search call for the first page. await RunQueryAsync(model, 0, 0, "", "").ConfigureAwait(false); } catch { return View("Error", new ErrorViewModel { RequestId = "1" }); } return View(model); }Замените метод действия PageAsync (модель SearchData).
public async Task<ActionResult> PageAsync(SearchData model) { try { int page; // Calculate the page that should be displayed. switch (model.paging) { case "prev": page = (int)TempData["page"] - 1; break; case "next": page = (int)TempData["page"] + 1; break; default: page = int.Parse(model.paging); break; } // Recover the leftMostPage. int leftMostPage = (int)TempData["leftMostPage"]; // Recover the filters. string catFilter = TempData["categoryFilter"].ToString(); string ameFilter = TempData["amenityFilter"].ToString(); // Recover the search text. model.searchText = TempData["searchfor"].ToString(); // Search for the new page. await RunQueryAsync(model, page, leftMostPage, catFilter, ameFilter); } catch { return View("Error", new ErrorViewModel { RequestId = "2" }); } return View("Index", model); }Добавьте метод действия FacetAsync(SearchData model), который будет активирован при нажатии пользователем на ссылку фасета. Модель будет содержать фильтр поиска по категориям или возможностям. Добавьте его после действия PageAsync .
public async Task<ActionResult> FacetAsync(SearchData model) { try { // Filters set by the model override those stored in temporary data. string catFilter; string ameFilter; if (model.categoryFilter != null) { catFilter = model.categoryFilter; } else { catFilter = TempData["categoryFilter"].ToString(); } if (model.amenityFilter != null) { ameFilter = model.amenityFilter; } else { ameFilter = TempData["amenityFilter"].ToString(); } // Recover the search text. model.searchText = TempData["searchfor"].ToString(); // Initiate a new search. await RunQueryAsync(model, 0, 0, catFilter, ameFilter).ConfigureAwait(false); } catch { return View("Error", new ErrorViewModel { RequestId = "2" }); } return View("Index", model); }
Настройка фильтра поиска
Если пользователь выбирает определенный аспект, например, он щелкает категорию "Курорт" и "Спа ", то в результатах возвращаются только отели, указанные в качестве этой категории. Чтобы сузить поиск таким образом, необходимо настроить фильтр .
Замените метод RunQueryAsync на следующий код. В первую очередь, он принимает строку фильтра категорий и строку фильтра удобств и задает параметр Filter для SearchOptions.
private async Task<ActionResult> RunQueryAsync(SearchData model, int page, int leftMostPage, string catFilter, string ameFilter) { InitSearch(); string facetFilter = ""; if (catFilter.Length > 0 && ameFilter.Length > 0) { // Both facets apply. facetFilter = $"{catFilter} and {ameFilter}"; } else { // One, or zero, facets apply. facetFilter = $"{catFilter}{ameFilter}"; } var options = new SearchOptions { Filter = facetFilter, SearchMode = SearchMode.All, // Skip past results that have already been returned. Skip = page * GlobalVariables.ResultsPerPage, // Take only the next page worth of results. Size = GlobalVariables.ResultsPerPage, // Include the total number of results. IncludeTotalCount = true, }; // Return information on the text, and number, of facets in the data. options.Facets.Add("Category,count:20"); options.Facets.Add("Tags,count:20"); // Enter Hotel property names into this list, so only these values will be returned. options.Select.Add("HotelName"); options.Select.Add("Description"); options.Select.Add("Category"); options.Select.Add("Tags"); // For efficiency, the search call should be asynchronous, so use SearchAsync rather than Search. model.resultList = await _searchClient.SearchAsync<Hotel>(model.searchText, options).ConfigureAwait(false); // This variable communicates the total number of pages to the view. model.pageCount = ((int)model.resultList.TotalCount + GlobalVariables.ResultsPerPage - 1) / GlobalVariables.ResultsPerPage; // This variable communicates the page number being displayed to the view. model.currentPage = page; // Calculate the range of page numbers to display. if (page == 0) { leftMostPage = 0; } else if (page <= leftMostPage) { // Trigger a switch to a lower page range. leftMostPage = Math.Max(page - GlobalVariables.PageRangeDelta, 0); } else if (page >= leftMostPage + GlobalVariables.MaxPageRange - 1) { // Trigger a switch to a higher page range. leftMostPage = Math.Min(page - GlobalVariables.PageRangeDelta, model.pageCount - GlobalVariables.MaxPageRange); } model.leftMostPage = leftMostPage; // Calculate the number of page numbers to display. model.pageRange = Math.Min(model.pageCount - leftMostPage, GlobalVariables.MaxPageRange); // Ensure Temp data is stored for the next call. TempData["page"] = page; TempData["leftMostPage"] = model.leftMostPage; TempData["searchfor"] = model.searchText; TempData["categoryFilter"] = catFilter; TempData["amenityFilter"] = ameFilter; // Return the new view. return View("Index", model); }Обратите внимание, что свойства категории и тегов добавляются в список возвращаемых элементов Select . Это дополнение не является требованием для работы фасетной навигации, но мы используем эти сведения для проверки корректности работы фильтров.
Добавьте списки ссылок на фасеты в представление.
В представлении требуются некоторые значительные изменения.
Начните с открытия файла hotels.css (в папке wwwroot/css) и добавьте следующие классы.
.facetlist { list-style: none; } .facetchecks { width: 250px; display: normal; color: #666; margin: 10px; padding: 5px; } .facetheader { font-size: 10pt; font-weight: bold; color: darkgreen; }Чтобы при просмотре организовать вывод в таблицу, четко выровняв списки аспектов слева и результаты справа. Откройте файл index.cshtml. Замените все содержимое тегов HTML-<body> следующим кодом.
<body> @using (Html.BeginForm("Index", "Home", FormMethod.Post)) { <table> <tr> <td></td> <td> <h1 class="sampleTitle"> <img src="~/images/azure-logo.png" width="80" /> Hotels Search - Facet Navigation </h1> </td> </tr> <tr> <td></td> <td> <!-- Display the search text box, with the search icon to the right of it.--> <div class="searchBoxForm"> @Html.TextBoxFor(m => m.searchText, new { @class = "searchBox" }) <input value="" class="searchBoxSubmit" type="submit"> </div> </td> </tr> <tr> <td valign="top"> <div id="facetplace" class="facetchecks"> @if (Model != null && Model.resultList != null) { List<string> categories = Model.resultList.Facets["Category"].Select(x => x.Value.ToString()).ToList(); if (categories.Count > 0) { <h5 class="facetheader">Category:</h5> <ul class="facetlist"> @for (var c = 0; c < categories.Count; c++) { var facetLink = $"{categories[c]} ({Model.resultList.Facets["Category"][c].Count})"; <li> @Html.ActionLink(facetLink, "FacetAsync", "Home", new { categoryFilter = $"Category eq '{categories[c]}'" }, null) </li> } </ul> } List<string> tags = Model.resultList.Facets["Tags"].Select(x => x.Value.ToString()).ToList(); if (tags.Count > 0) { <h5 class="facetheader">Amenities:</h5> <ul class="facetlist"> @for (var c = 0; c < tags.Count; c++) { var facetLink = $"{tags[c]} ({Model.resultList.Facets["Tags"][c].Count})"; <li> @Html.ActionLink(facetLink, "FacetAsync", "Home", new { amenityFilter = $"Tags/any(t: t eq '{tags[c]}')" }, null) </li> } </ul> } } </div> </td> <td valign="top"> <div id="resultsplace"> @if (Model != null && Model.resultList != null) { // Show the result count. <p class="sampleText"> @Model.resultList.TotalCount Results </p> var results = Model.resultList.GetResults().ToList(); @for (var i = 0; i < results.Count; i++) { string amenities = string.Join(", ", results[i].Document.Tags); string fullDescription = results[i].Document.Description; fullDescription += $"\nCategory: {results[i].Document.Category}"; fullDescription += $"\nAmenities: {amenities}"; // Display the hotel name and description. @Html.TextAreaFor(m => results[i].Document.HotelName, new { @class = "box1" }) @Html.TextArea($"desc{i}", fullDescription, new { @class = "box2" }) } } </div> </td> </tr> <tr> <td></td> <td valign="top"> @if (Model != null && Model.pageCount > 1) { // If there is more than one page of results, show the paging buttons. <table> <tr> <td class="tdPage"> @if (Model.currentPage > 0) { <p class="pageButton"> @Html.ActionLink("|<", "PageAsync", "Home", new { paging = "0" }, null) </p> } else { <p class="pageButtonDisabled">|<</p> } </td> <td class="tdPage"> @if (Model.currentPage > 0) { <p class="pageButton"> @Html.ActionLink("<", "PageAsync", "Home", new { paging = "prev" }, null) </p> } else { <p class="pageButtonDisabled"><</p> } </td> @for (var pn = Model.leftMostPage; pn < Model.leftMostPage + Model.pageRange; pn++) { <td class="tdPage"> @if (Model.currentPage == pn) { // Convert displayed page numbers to 1-based and not 0-based. <p class="pageSelected">@(pn + 1)</p> } else { <p class="pageButton"> @Html.ActionLink((pn + 1).ToString(), "PageAsync", "Home", new { paging = @pn }, null) </p> } </td> } <td class="tdPage"> @if (Model.currentPage < Model.pageCount - 1) { <p class="pageButton"> @Html.ActionLink(">", "PageAsync", "Home", new { paging = "next" }, null) </p> } else { <p class="pageButtonDisabled">></p> } </td> <td class="tdPage"> @if (Model.currentPage < Model.pageCount - 1) { <p class="pageButton"> @Html.ActionLink(">|", "PageAsync", "Home", new { paging = Model.pageCount - 1 }, null) </p> } else { <p class="pageButtonDisabled">>|</p> } </td> </tr> </table> } </td> </tr> </table> } </body>Обратите внимание на использование вызова Html.ActionLink . Этот вызов передает допустимые строки фильтра контроллеру, когда пользователь щелкает ссылку на фасет.
Запуск и тестирование приложения
Преимущество фасетной навигации для пользователя заключается в том, что он может сузить поиск одним щелчком мыши, что мы можем продемонстрировать на следующей последовательности.
Запустите приложение, введите "аэропорт" в качестве текста поиска. Убедитесь, что список аспектов отображается аккуратно слева. Эти аспекты применяются ко всем отелям, в текстовых данных которых есть слово "аэропорт", с указанием частоты их появления.
Выберите категорию "Курорт" и "Спа ". Убедитесь, что все результаты находятся в этой категории.
Щелкните на удобстве континентальный завтрак. Убедитесь, что все результаты по-прежнему находятся в категории "Курорт и спа" с выбранным удобством.
Попробуйте выбрать любую другую категорию, затем одно удобство, и посмотрите, как результаты сужаются. Затем попробуйте другой способ: одно удобство, потом одна категория. Отправьте пустой поиск, чтобы сбросить страницу.
Примечание.
При выборе одного элемента в списке аспектов (например, категории) он переопределит любой предыдущий выбор в списке категорий.
Выносы
Рассмотрим следующие выносы из этого проекта:
- Необходимо пометить каждое поле, доступное для фасетирования, свойством IsFacetable для включения в фасетную навигацию.
- Фасеты комбинируются с фильтрами, чтобы уменьшить количество результатов.
- Аспекты являются совокупными, при этом каждый выбор основывается на предыдущем, чтобы сузить результаты.
Дальнейшие действия
В следующем руководстве мы рассмотрим, как упорядочивать результаты. До этого момента результаты упорядочены просто в том порядке, в который они находятся в базе данных.