Руководство. Добавление фасетной навигации с помощью пакета SDK для .NET

Фасеты позволяют самостоятельно управлять навигацией, предоставляя набор ссылок для фильтрации результатов. В этом руководстве структура фасетной навигации размещена в левой части страницы с метками и кликабельным текстом для уточнения результатов.

В этом руководстве описано, как:

  • Установите свойства модели как IsFacetable
  • Добавьте фасетную навигацию в ваше приложение

Обзор

Фасеты основаны на полях в индексе поиска. Запрос, содержащий facet=[string], задаёт поле для фасетирования. Обычно используется несколько аспектов, таких как &facet=category&facet=amenities, каждый из которых разделен символом амперсанда (&). Для реализации фасетной структуры навигации необходимо указать как аспекты, так и фильтры. Фильтр используется для события щелчка, чтобы сузить результаты. Например, щелкнув "Бюджет", фильтрует результаты на основе этого критерия.

Это руководство расширяет проект разбиения по страницам, созданный в руководстве по добавлению разбиения на страницах в результаты поиска .

Готовую версию кода для этого руководства можно найти в следующем проекте:

  • 4-add-facet-navigation (GitHub)

Предпосылки

  • Решение 2a-add-paging (GitHub). Этот проект может быть собственной версией, созданной из предыдущего руководства, или копией из GitHub.

Установите свойства модели как объект, который можно фасетировать

Чтобы свойство модели находилось в поиске аспектов, оно должно быть помечено с помощью IsFacetable.

  1. Изучите класс 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; }
    }
    
  2. Мы не изменим теги в рамках этого руководства, поэтому закройте файл hotel.cs без изменений.

    Примечание.

    Поиск аспектов вызывает ошибку, если поле, запрошенное в поиске, не помечено соответствующим образом.

Добавьте фасетную навигацию в ваше приложение

В этом примере мы поможем пользователю выбрать одну категорию отеля или одно удобство из списков ссылок, отображаемых слева от результатов. Пользователь начинается с ввода текста поиска, а затем постепенно сужает результаты поиска, выбрав категорию или удобства.

Это задание контроллера для передачи списков аспектов в представление. Для поддержания выбора пользователей в процессе выполнения поиска мы используем временное хранилище в качестве механизма сохранения состояния.

Использование фасетной навигации для уточнения поиска «пула»

Добавление строк фильтра в модель SearchData

  1. Откройте файл SearchData.cs и добавьте свойства строки в класс SearchData , чтобы сохранить строки фильтра аспектов.

    public string categoryFilter { get; set; }
    public string amenityFilter { get; set; }
    

Добавьте метод действия Facet

Для домашнего контроллера требуется одно новое действие Facet, а также обновление существующих действий Index и Page и метода RunQueryAsync.

  1. Замените метод действия 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);
    }
    
  2. Замените метод действия 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);
    }
    
  3. Добавьте метод действия 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);
    }
    

Настройка фильтра поиска

Если пользователь выбирает определенный аспект, например, он щелкает категорию "Курорт" и "Спа ", то в результатах возвращаются только отели, указанные в качестве этой категории. Чтобы сузить поиск таким образом, необходимо настроить фильтр .

  1. Замените метод 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 . Это дополнение не является требованием для работы фасетной навигации, но мы используем эти сведения для проверки корректности работы фильтров.

В представлении требуются некоторые значительные изменения.

  1. Начните с открытия файла 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;
    }
    
  2. Чтобы при просмотре организовать вывод в таблицу, четко выровняв списки аспектов слева и результаты справа. Откройте файл 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">|&lt;</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">&lt;</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">&gt;</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">&gt;|</p>
                                        }
                                    </td>
                                </tr>
                            </table>
                        }
                    </td>
                </tr>
            </table>
        }
    </body>
    

    Обратите внимание на использование вызова Html.ActionLink . Этот вызов передает допустимые строки фильтра контроллеру, когда пользователь щелкает ссылку на фасет.

Запуск и тестирование приложения

Преимущество фасетной навигации для пользователя заключается в том, что он может сузить поиск одним щелчком мыши, что мы можем продемонстрировать на следующей последовательности.

  1. Запустите приложение, введите "аэропорт" в качестве текста поиска. Убедитесь, что список аспектов отображается аккуратно слева. Эти аспекты применяются ко всем отелям, в текстовых данных которых есть слово "аэропорт", с указанием частоты их появления.

    Использование фасетной навигации для сужения поиска по запросу

  2. Выберите категорию "Курорт" и "Спа ". Убедитесь, что все результаты находятся в этой категории.

    Сужение поиска до

  3. Щелкните на удобстве континентальный завтрак. Убедитесь, что все результаты по-прежнему находятся в категории "Курорт и спа" с выбранным удобством.

    Сужение поиска до

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

    Примечание.

    При выборе одного элемента в списке аспектов (например, категории) он переопределит любой предыдущий выбор в списке категорий.

Выносы

Рассмотрим следующие выносы из этого проекта:

  • Необходимо пометить каждое поле, доступное для фасетирования, свойством IsFacetable для включения в фасетную навигацию.
  • Фасеты комбинируются с фильтрами, чтобы уменьшить количество результатов.
  • Аспекты являются совокупными, при этом каждый выбор основывается на предыдущем, чтобы сузить результаты.

Дальнейшие действия

В следующем руководстве мы рассмотрим, как упорядочивать результаты. До этого момента результаты упорядочены просто в том порядке, в который они находятся в базе данных.