Öğretici: .NET SDK'sını kullanarak arama sonuçlarına sayfalama ekleme

İlk olarak sayfa numaralarına dayalı, ve ikincisi sonsuz kaydırma üzerine kurulu olmak üzere iki farklı sayfalama sistemini uygulamayı öğrenin. Her iki sayfalama sistemi de yaygın olarak kullanılır ve doğru olanı seçmek, sonuçlarda istediğiniz kullanıcı deneyimine bağlıdır.

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

  • Uygulamanızı numaralandırılmış sayfalama ile genişletme
  • Sonsuz kaydırma ile uygulamanızı genişletme

Genel Bakış

Bu öğreticide, İlk arama uygulamanızı oluşturma öğreticisinde açıklanan daha önce oluşturulmuş bir projeye bir sayfalama sistemi yerleştirilir.

Bu öğreticide geliştirilecek kodun tamamlanmış sürümleri aşağıdaki projelerde bulunabilir:

Önkoşullar

  • 1-basic-search-page (GitHub) projesi. Bu proje, önceki öğreticiden oluşturduğunuz kendi sürümünüz veya GitHub'dan alınmış bir kopya olabilir.

Uygulamanızı numaralandırılmış sayfalama ile genişletme

Numaralı sayfalama, ana ticari web arama motorları ve diğer birçok arama web sitesi tarafından tercih edilen sayfalama sistemidir. Numaralandırılmış sayfalama genellikle bir gerçek sayfa numarası aralığına ek olarak "sonraki" ve "önceki" seçeneğini içerir. Ayrıca bir "ilk sayfa" ve "son sayfa" seçeneği de kullanılabilir. Bu seçenekler, kullanıcıya sayfa tabanlı sonuçlarda gezinme üzerinde kesinlikle denetim sağlar.

Bu öğreticide, ilk, önceki, sonraki ve son seçeneklerin yanı sıra 1'den başlamayan sayfa numaralarını içeren bir sistem ekleyecek, bunun yerine kullanıcının bulunduğu geçerli sayfayı çevreleyeceksiniz (bu nedenle, örneğin, kullanıcı 10. sayfaya bakıyorsa, belki de 8, 9, 10, 11 ve 12 sayfa numaraları görüntülenir).

Sistem, görünür sayfa numaralarının sayısının genel değişkende ayarlanmasına izin verecek kadar esnek olacaktır.

Sistem en soldaki ve en sağdaki sayfa numarası düğmelerini özel olarak ele alır, yani görüntülenen sayfa numarası aralığını değiştirmeyi tetikler. Örneğin, 8, 9, 10, 11 ve 12 sayfa numaraları görüntülenirse ve kullanıcı 8'e tıklarsa, görüntülenen sayfa numaraları aralığı 6, 7, 8, 9 ve 10 olarak değişir. 12'yi seçtilerse sağa doğru da benzer bir kaydırma vardır.

Modele sayfalama alanları ekle

Temel arama sayfası çözümünü açın.

  1. SearchData.cs model dosyasını açın.

  2. Sayfalandırmayı desteklemek için genel değişkenler ekleyin. MVC'de genel değişkenler kendi statik sınıflarında bildirilir. ResultsPerPage sayfa başına sonuç sayısını ayarlar. MaxPageRange , görünümdeki görünür sayfa numaralarının sayısını belirler. PageRangeDelta , en soldaki veya en sağdaki sayfa numarası seçildiğinde, kaç sayfanın sola veya sağa kaydırılması gerektiğini belirler. Bu ikinci sayı genellikle MaxPageRange'in yarısı civarındadır. Ad alanına aşağıdaki kodu ekleyin.

    public static class GlobalVariables
{
    public static int ResultsPerPage
    {
        get
        {
            return 3;
        }
    }
    public static int MaxPageRange
    {
        get
        {
            return 5;
        }
    }

    public static int PageRangeDelta
    {
        get
        {
            return 2;
        }
    }
}

    Tavsiye

    Bu projeyi dizüstü bilgisayar gibi daha küçük ekranlı bir cihazda çalıştırıyorsanız ResultsPerPage'i 2 olarak değiştirmeyi göz önünde bulundurun.

  3. searchText özelliğinden sonra SearchData sınıfına sayfalama özellikleri ekleyin.

    // The current page being displayed.
public int currentPage { get; set; }

// The total number of pages of results.
public int pageCount { get; set; }

// The left-most page number to display.
public int leftMostPage { get; set; }

// The number of page numbers to display - which can be less than MaxPageRange towards the end of the results.
public int pageRange { get; set; }

// Used when page numbers, or next or prev buttons, have been selected.
public string paging { get; set; }

Görünüme sayfalama seçenekleri tablosu ekleme

  1. index.cshtml dosyasını açın ve kapanış </body> etiketinden hemen önce aşağıdaki kodu ekleyin. Bu yeni kod bir sayfalama seçenekleri tablosu sunar: ilk, önceki, 1, 2, 3, 4, 5, sonraki, son.

    @if (Model != null && Model.pageCount > 1)
{
// If there is more than one page of results, show the paging buttons.
<table>
    <tr>
        <td>
            @if (Model.currentPage > 0)
            {
                <p class="pageButton">
                    @Html.ActionLink("|<", "Page", "Home", new { paging = "0" }, null)
                </p>
            }
            else
            {
                <p class="pageButtonDisabled">|&lt;</p>
            }
        </td>

        <td>
            @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>
                @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>
            @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>
            @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>
}

    Öğeleri düzgün bir şekilde hizalamak için BIR HTML tablosu kullanırız. Ancak tüm işlemler, her bir denetimin daha önce eklediğimiz sıralama özelliğine farklı girdilerle oluşturulmuş yeni bir modelle çağrıldığı @Html.ActionLink ifadelerinden kaynaklanır.

    İlk ve son sayfa seçenekleri "ilk" ve "son" gibi dizeler göndermez, bunun yerine doğru sayfa numaralarını gönderir.

  2. hotels.css dosyasındaki HTML stilleri listesine sayfalama sınıfları ekleyin. pageSelected sınıfı, sayfa numaraları listesindeki geçerli sayfayı (sayfa numarasına kalın biçim uygulayarak) tanımlamak için oradadır.

    .pageButton {
    border: none;
    color: darkblue;
    font-weight: normal;
    width: 50px;
}

.pageSelected {
    border: none;
    color: black;
    font-weight: bold;
    width: 50px;
}

.pageButtonDisabled {
    border: none;
    color: lightgray;
    font-weight: bold;
    width: 50px;
}

Denetleyiciye Sayfa eylemi ekleme

  1. HomeController.cs dosyasını açın ve PageAsync eylemini ekleyin. Bu eylem, seçilen sayfa seçeneklerinden herhangi birine yanıt verir.

    public async Task<ActionResult> PageAsync(SearchData model)
{
    try
    {
        int page;

        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 search text and search for the data for the new page.
        model.searchText = TempData["searchfor"].ToString();

        await RunQueryAsync(model, page, leftMostPage);

        // Ensure Temp data is stored for next call, as TempData only stores for one call.
        TempData["page"] = (object)page;
        TempData["searchfor"] = model.searchText;
        TempData["leftMostPage"] = model.leftMostPage;
    }

    catch
    {
        return View("Error", new ErrorViewModel { RequestId = "2" });
    }
    return View("Index", model);
}

    RunQueryAsync yöntemi artık üçüncü parametre nedeniyle bir söz dizimi hatası gösterecektir, bu konuya birazdan geleceğiz.

    Uyarı

    TempData çağrıları geçici depolamada bir değer (nesne) depolar, ancak bu depolama yalnızca bir çağrı için devam eder. Geçici verilere bir şey depolarsak, bir denetleyici eylemine yapılacak bir sonraki çağrıda kullanılabilir ama büyük olasılıkla bir sonraki aramadan sonra kaybolur. Bu kısa kullanım ömrü nedeniyle, PageAsync'e yapılan her çağrıda arama metnini ve sayfalama özelliklerini geçici depolamaya depolarız.

  2. Dizin(model) eylemini güncelleştirerek geçici değişkenleri depolayın ve en soldaki sayfa parametresini RunQueryAsync çağrısına ekleyin.

    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);

        // Ensure temporary data is stored for the next call.
        TempData["page"] = 0;
        TempData["leftMostPage"] = 0;
        TempData["searchfor"] = model.searchText;
    }

    catch
    {
        return View("Error", new ErrorViewModel { RequestId = "1" });
    }
    return View(model);
}

  3. Önceki derste sunulan RunQueryAsync yönteminin söz dizimi hatasını çözmek için değiştirilmesi gerekiyor. SearchOptions sınıfının Skip, Size ve IncludeTotalCount alanlarını, Atla ayarından başlayarak yalnızca bir sayfa değerinde sonuç istemek için kullanırız. Görünümümüz için sayfalama değişkenlerini de hesaplamamız gerekir. Yöntemin tamamını aşağıdaki kodla değiştirin.

    private async Task<ActionResult> RunQueryAsync(SearchData model, int page, int leftMostPage)
{
    InitSearch();

    var options = new SearchOptions
    {
        // 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
    };

    // Add fields to include in the search results.
    options.Select.Add("HotelName");
    options.Select.Add("Description");

    // 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);

    return View("Index", model);
}

  4. Son olarak, görünümde küçük bir değişiklik yapın. resultList.Results.TotalCount değişkeni artık toplam sayıyı değil, bir sayfada döndürülen sonuç sayısını (örneğimizde 3) içerir. IncludeTotalCount değerini true olarak ayarladığımız için resultList.TotalCount değişkeni artık toplam sonuç sayısını içerir. Sonuç sayısının görünümde görüntülendiği yeri bulun ve aşağıdaki kodla değiştirin.

    // 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++)
{
    // Display the hotel name and description.
    @Html.TextAreaFor(m => results[i].Document.HotelName, new { @class = "box1" })
    @Html.TextArea($"desc{1}", results[i].Document.Description, new { @class = "box2" })
}

    Uyarı

    Bu toplamın Azure Bilişsel Arama tarafından hesaplanması gerektiğinden IncludeTotalCount değeri true olarak ayarlandığında küçük bir performans düşüşü vardır. Karmaşık veri kümeleriyle, döndürülen değerin yaklaşık olduğunu belirten bir uyarı vardır. Otel arama korpusu küçük olduğu için doğru sonuçlar verecektir.

Uygulamayı derleme ve çalıştırma

Şimdi Hata Ayıklama Olmadan Başlat'ı seçin (veya F5 tuşuna basın).

  1. Çok sayıda sonuç döndüren ("wifi" gibi) bir dizede arama yapın. Sonuçlar arasında düzgün bir şekilde gezinebilir misiniz?

  2. En sağdaki ve daha sonra en soldaki sayfa numaralarına tıklamayı deneyin. Sayfa numaraları, üzerinde olduğunuz sayfayı ortalamak için uygun şekilde ayarlanıyor mu?

  3. "İlk" ve "son" seçenekleri yararlı mı? Bazı ticari arama motorları bu seçenekleri kullanır, bazıları ise kullanmaz.

  4. Sonuçların son sayfasına gidin. Son sayfa, ResultsPerPage sonuçlarından küçük olabilecek tek sayfadır.

  5. "Kasaba" yazın ve arama'ya tıklayın. Sonuçlar bir sayfadan azsa sayfalama seçenekleri görüntülenmez.

Bu projeyi kaydedin ve alternatif bir sayfalama biçimi için sonraki bölüme geçin.

Sonsuz kaydırma ile uygulamanızı genişletme

Kullanıcı dikey kaydırma çubuğunu görüntülenen sonuçların son bölümüne kaydırdığında sonsuz kaydırma tetiklenir. Bu olayda, sonuçların sonraki sayfası için arama hizmetine bir çağrı yapılır. Başka sonuç bulunmuyorsa, sonuç döndürülmez ve dikey kaydırma çubuğu değişmez. Daha fazla sonuç varsa, bunlar geçerli sayfaya eklenir ve kaydırma çubuğu daha fazla sonuç kullanılabilir olduğunu gösterecek şekilde değişir.

Dikkat edilmesi gereken önemli nokta, geçerli sayfanın değiştirilmemesi, ek sonuçları göstermek için genişletilmemesidir. Kullanıcı her zaman aramanın ilk sonuçlarına kadar kaydırabilir.

Sonsuz kaydırma uygulamak için sayfa numarası kaydırma öğelerinden herhangi biri eklenmeden önce projeyle başlayalım. Bu, GitHub'da FirstAzureSearchApp çözümüdür.

Modele sayfalama alanları ekleyin

  1. İlk olarak SearchData sınıfına bir sayfalama özelliği ekleyin (SearchData.cs model dosyasında).

    // Record if the next page is requested.
public string paging { get; set; }

    Bu değişken, bir sonraki sonuç sayfası gönderilmesi gerekiyorsa "next" ifadesini tutan veya aramanın ilk sayfası için null olan bir dizedir.

  2. Aynı dosyada ve ad alanında tek bir özelliğe sahip bir genel değişken sınıfı ekleyin. MVC'de genel değişkenler kendi statik sınıflarında bildirilir. ResultsPerPage sayfa başına sonuç sayısını ayarlar.

    public static class GlobalVariables
{
    public static int ResultsPerPage
    {
        get
        {
            return 3;
        }
    }
}

Görünüme dikey kaydırma çubuğu ekleme

  1. Index.cshtml dosyasının sonuçları görüntüleyen bölümünü bulun ( @if (Model != null) ile başlar).

  2. bölümünü aşağıdaki kodla değiştirin. Yeni <div> bölümü, kaydırılabilir olması gereken alanı kapsar ve overflow-y özniteliği ile "scrolled()" adındaki bir onscroll işlevine çağrı ekler.

    @if (Model != null)
{
    // Show the result count.
    <p class="sampleText">
        @Model.resultList.TotalCount Results
    </p>

    var results = Model.resultList.GetResults().ToList();

    <div id="myDiv" style="width: 800px; height: 450px; overflow-y: scroll;" onscroll="scrolled()">

        <!-- Show the hotel data. -->
        @for (var i = 0; i < results.Count; i++)
        {
            // Display the hotel name and description.
            @Html.TextAreaFor(m => results[i].Document.HotelName, new { @class = "box1" })
            @Html.TextArea($"desc{i}", results[i].Document.Description, new { @class = "box2" })
        }

  3. Döngünün hemen altında, </div> etiketinden sonra scroll işlevini ekleyin.

    <script>
    function scrolled() {
        if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) {
            $.getJSON("/Home/NextAsync", function (data) {
                var div = document.getElementById('myDiv');

                // Append the returned data to the current list of hotels.
                for (var i = 0; i < data.length; i += 2) {
                    div.innerHTML += '\n<textarea class="box1">' + data[i] + '</textarea>';
                    div.innerHTML += '\n<textarea class="box2">' + data[i + 1] + '</textarea>';
                }
            });
        }
    }
</script>

    Yukarıdaki betikteki if deyimi, kullanıcının dikey kaydırma çubuğunun en altına kaydırılıp kaydırılmadığını test ediyor. Eğer varsa, Ana Sayfa denetleyicisine NextAsync adlı bir eyleme çağrı yapılır. Denetleyici tarafından başka bir bilgi gerekmez, sonraki veri sayfasını döndürür. Bu veriler daha sonra özgün sayfayla aynı HTML stilleri kullanılarak biçimlendirilir. Sonuç döndürülmezse, hiçbir şey eklenmez ve her şey olduğu gibi kalır.

Sonraki eylemi işleme

Denetleyiciye gönderilmesi gereken yalnızca üç eylem vardır: uygulamanın index () adlı ilk çalıştırması, kullanıcı tarafından yapılan ve Index(model) çağrısı yapan ilk arama ve ardından next(model) aracılığıyla daha fazla sonuç almak için sonraki çağrılar.

  1. Ev denetleyicisi dosyasını açın ve orijinal öğreticiden RunQueryAsync yöntemini silin.

  2. Dizin(model) eylemini aşağıdaki kodla değiştirin. Artık boş olduğunda veya "sonraki" olarak ayarlandığında sayfalama alanını işler ve Azure Bilişsel Arama çağrısını işler.

    public async Task<ActionResult> Index(SearchData model)
{
    try
    {
        InitSearch();

        int page;

        if (model.paging != null && model.paging == "next")
        {
            // Increment the page.
            page = (int)TempData["page"] + 1;

            // Recover the search text.
            model.searchText = TempData["searchfor"].ToString();
        }
        else
        {
            // First call. Check for valid text input.
            if (model.searchText == null)
            {
                model.searchText = "";
            }
            page = 0;
        }

        // Setup the search parameters.
        var options = new SearchOptions
        {
            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
        };

        // Specify which fields to include in results.
        options.Select.Add("HotelName");
        options.Select.Add("Description");

        // 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);               

        // Ensure TempData is stored for the next call.
        TempData["page"] = page;
        TempData["searchfor"] = model.searchText;
    }
    catch
    {
        return View("Error", new ErrorViewModel { RequestId = "1" });
    }

    return View("Index", model);
}

    Numaralı sayfalama yöntemine benzer şekilde, yalnızca ihtiyacımız olan verilerin döndürülmesini istemek için Atla ve Boyut arama ayarlarını kullanırız.

  3. NextAsync eylemini ana denetleyiciye ekleyin. Her otelin listeye iki öğe ekleyerek liste döndürdüğüne dikkat edin: otel adı ve otel açıklaması. Bu biçim, görünümde döndürülen verilerin kaydırılan işlev tarafından kullanılmasına uygun olacak şekilde ayarlanmıştır.

    public async Task<ActionResult> NextAsync(SearchData model)
{
    // Set the next page setting, and call the Index(model) action.
    model.paging = "next";
    await Index(model).ConfigureAwait(false);

    // Create an empty list.
    var nextHotels = new List<string>();

    // Add a hotel name, then description, to the list.
    await foreach (var searchResult in model.resultList.GetResultsAsync())
    {
        nextHotels.Add(searchResult.Document.HotelName);
        nextHotels.Add(searchResult.Document.Description);
    }

    // Rather than return a view, return the list of data.
    return new JsonResult(nextHotels);
}

  4. Liste<dizesinde> söz dizimi hatası alırsanız, denetleyici dosyasının başına aşağıdaki using yönergesini ekleyin.

    using System.Collections.Generic;

Projenizi derleme ve çalıştırma

Şimdi Hata Ayıklama Olmadan Başlat'ı seçin (veya F5 tuşuna basın).

  1. Çok sayıda sonuç verecek bir terim girin ("havuz" gibi) ve ardından dikey kaydırma çubuğunu test edin. Yeni bir sonuç sayfası tetikliyor mu?

    Tavsiye

    İlk sayfada kaydırma çubuğunun göründüğünden emin olmak için, sonuçların ilk sayfasının görüntülendikleri alanın yüksekliğini biraz aşması gerekir. Örneğimizde .box1'in yüksekliği 30 piksel, .box2'nin yüksekliği 100 piksel ve alt kenar boşluğu 24 pikseldir. Bu nedenle her giriş 154 piksel kullanır. Üç girdi 3 x 154 = 462 piksel kaplar. Dikey kaydırma çubuğunun göründüğünden emin olmak için, görüntü alanının yüksekliği 462 pikselden küçük, hatta 461 pikselden daha küçük olacak şekilde ayarlanmalıdır. Bu sorun yalnızca ilk sayfada oluşur, bundan sonra kesinlikle bir kaydırma çubuğu görünür. Güncelleştirilecek satır: <div id="myDiv" style="width: 800px; height: 450px; overflow-y: scroll;" onscroll="scrolled()">.

  2. Sonuçların en altına ulaşmak için sayfanın sonuna kadar kaydırın. Tüm bilgilerin artık tek görünüm sayfasında nasıl olduğuna dikkat edin. Herhangi bir sunucu çağrısını tetiklemeden en üste kadar kaydırabilirsiniz.

Daha karmaşık sonsuz kaydırma sistemleri fare tekerleğini veya benzer başka bir mekanizmayı kullanarak yeni bir sonuç sayfasının yüklenmesini tetikleyebilir. Bu öğreticilerde sonsuz kaydırmayı daha ileriye götürmeyeceğiz, ancak fazladan fare tıklamalarını önlediğinden ve diğer seçenekleri daha fazla araştırmak isteyebileceğiniz için belirli bir çekiciliği vardır.

Çıkarımlar

Bu projeden aşağıdakileri göz önünde bulundurun:

  • Numaralandırılmış sayfalama, sonuçların sırasının biraz rastgele olduğu aramalar için yararlıdır; bu da sonraki sayfalarda kullanıcılarınız için ilgi çekici bir şey olabileceği anlamına gelir.
  • Sonsuz kaydırma, sonuçların sırası özellikle önemli olduğunda kullanışlıdır. Örneğin, sonuçlar bir hedef şehrin merkezine uzaklıkta sıralanıyorsa.
  • Numaralı sayfalama, daha iyi gezinti sağlar. Örneğin, bir kullanıcı ilginç bir sonucun sayfa 6'da olduğunu hatırlayabilir, ancak sonsuz kaydırmada böyle kolay bir başvuru yoktur.
  • Sonsuz kaydırma, sayfa numaralarına tıklamadan yukarı ve aşağı kaydırarak kolayca ilgi çeker.
  • Sonsuz kaydırmanın temel özelliklerinden biri, sonuçların mevcut bir sayfaya eklenmesidir, bu sayfanın yerine eklenmez ve bu da verimlidir.
  • Geçici depolama yalnızca bir çağrı için kalıcıdır ve ek çağrılardan kurtulmak için sıfırlanması gerekir.

Sonraki Adımlar

Sayfalama, bir arama deneyimi için temeldir. Sayfalama iyi bir şekilde ele alındıktan sonra, kullanıcı deneyimini daha da geliştirmek için tahminli aramalar eklemek gerekir.

C# Öğreticisi: Otomatik tamamlama ve öneriler ekleme - Azure Bilişsel Arama

  • Son güncelleştirme: