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

Makale
01/26/2021

İlki sayfa numaralarına, ikincisi de sonsuz kaydırmaya dayalı olmak üzere iki farklı disk belleği sistemi uygulamayı öğrenin. Her iki disk belleği sistemi de yaygın olarak kullanılır ve doğru olanı seçmek, sonuçlarla istediğiniz kullanıcı deneyimine bağlıdır.

Bu öğreticide şunların nasıl yapıldığını öğrenirsiniz:

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

Genel Bakış

Bu öğretici, ilk arama uygulamanızı oluşturma öğreticisinde açıklanan önceden oluşturulmuş bir projeye disk belleği sistemi ekler.

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

Ön koşullar

1-basic-search-page (GitHub) projesi. Bu proje, önceki öğreticide oluşturulan kendi sürümünüz veya GitHub'dan 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 için tercih edilen disk belleği sistemidir. Numaralandırılmış sayfalama genellikle bir dizi gerçek sayfa numarası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 konusunda kesinlikle denetim sağlar.

Bu öğreticide, 1'den başlamayan sayfa numaralarıyla birlikte ilk, önceki, sonraki ve son seçenekleri içeren bir sistem ekleyeceksiniz; bunun yerine kullanıcının bulunduğu geçerli sayfayı çevreleyeceksiniz (bu nedenle, örneğin, kullanıcı 10. sayfaya bakıyorsa, 8, 9, 10, 11 ve 12 numaralı 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 kabul eder, 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. Ayrıca 12'yi seçtilerse sağa doğru da benzer bir kaydırma yapılır.

Modele disk belleği alanları ekleme

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

SearchData.cs model dosyasını açın.
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. Genellikle bu ikinci sayı 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;
        }
    }
}
```
İpucu

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.

searchText özelliğinden sonra SearchData sınıfına disk belleği ö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

index.cshtml dosyasını açın ve kapanış </body> etiketinden hemen önce aşağıdaki kodu ekleyin. Bu yeni kod disk belleği seçenekleri tablosu sunar: first, previous, 1, 2, 3, 4, 5, next, last.

@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 eylem deyimlerinden @Html.ActionLink gelir ve her biri denetleyiciyi daha önce eklediğimiz disk belleği özelliğine farklı girişlerle oluşturulmuş yeni bir modelle çağırır.

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

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

.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

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 şimdi bir söz dizimi hatası gösterecektir. Bunun nedeni üçüncü parametrenin bit olarak gelmesidir.

Not

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 verilerde bir şey depolarsak, bir denetleyici eylemine yapılan bir sonraki çağrı için kullanılabilir ancak bundan sonraki çağrıda kesinlikle gitmiş olur. Bu kısa kullanım ömrü nedeniyle, arama metnini ve disk belleği özelliklerini PageAsync'e yapılan her çağrının her biri geçici depolamada yeniden depolarız.

Dizin(model) eylemini güncelleştirerek geçici değişkenleri depolayın ve RunQueryAsync çağrısına en soldaki sayfa parametresini 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);
}

Önceki derste tanıtılan 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 sayfalık sonuç istemek için kullanırız. Ayrıca görünümümüz için disk belleği değişkenlerini hesaplamamız gerekir. Yönteminin 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);
}

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 nerede görüntülendiğini 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" })
}
```
Not

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

Uygulamayı derleme ve çalıştırma

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

Bol miktarda sonuç döndüren ("wifi" gibi) bir dizede arama yapın. Sonuçlarda düzgün bir şekilde sayfa oluşturabilir misiniz?
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?
"İlk" ve "son" seçenekleri yararlı mı? Bazı ticari arama motorları bu seçenekleri kullanır, bazıları ise kullanmaz.
Sonuçların son sayfasına gidin. Son sayfa, ResultsPerPage sonuçlarından küçük olabilecek tek sayfadır.
"Şehir" yazın ve ara'ya tıklayın. Sonuçlar bir sayfadan azsa hiçbir disk belleği seçeneği 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ç yoksa hiçbir şey döndürülür 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 sonucun 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österecek şekilde genişletilmemesidir. Kullanıcı her zaman aramanın ilk sonuçlarına kadar yukarı 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 disk belleği alanları ekleme

İlk olarak, SearchData sınıfına (SearchData.cs model dosyasında) bir disk belleği özelliği ekleyin.
```
// Record if the next page is requested.
public string paging { get; set; }
```
Bu değişken, sonuçların sonraki sayfasının gönderilmesi gerekiyorsa "next" değerini veya aramanın ilk sayfası için null değerini tutan bir dizedir.
Aynı dosyada ve ad alanı içinde 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

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

bölümünü aşağıdaki kodla değiştirin. Yeni <div> bölümü kaydırılabilir olması gereken alanın çevresindedir ve "scrolled()" adlı bir onscroll işlevine hem overflow-y özniteliği hem de ç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" })
        }

Döngünün hemen altında, /div> etiketinden <sonra kaydırılan işlevi 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ı sınar. Varsa, NextAsync adlı bir eyleme Giriş denetleyicisine çağrı yapılır. Denetleyici tarafından başka bir bilgi gerekmez, bir 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 öğeler olduğu gibi kalır.

Sonraki eylemi işleme

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

Giriş denetleyicisi dosyasını açın ve özgün öğreticiden RunQueryAsync yöntemini silin.

Dizin(model) eylemini aşağıdaki kodla değiştirin. Artık boş olduğunda veya "sonraki" olarak ayarlandığında disk belleği 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);
}

Numaralandırılmış disk belleği yöntemine benzer şekilde, yalnızca ihtiyacımız olan verilerin döndürülmesini istemek için Atla ve Boyutlandır arama ayarlarını kullanırız.

NextAsync eylemini ev denetleyicisine ekleyin. Her otelin listeye iki öğe ekleyerek nasıl liste döndürdüğüne dikkat edin: otel adı ve otel açıklaması. Bu biçim, kaydırılan işlevin görünümde döndürülen verileri kullanımıyla eşleşecek şekilde ayarlanı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);
}

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

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

İpucu

İlk sayfada bir 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. Bizim örneğimizde .box1 30 piksel yüksekliğe, .box2 100 piksel yüksekliğe ve alt kenar boşluğu 24 piksele sahiptir. Bu nedenle her giriş 154 piksel kullanır. Üç giriş 3 x 154 = 462 piksel alır. Dikey kaydırma çubuğunun görüntülendiğinden emin olmak için görüntü alanının yüksekliği 462 pikselden küçük, hatta 461 pikselden küçük bir şekilde ayarlanmalıdır. Bu sorun yalnızca ilk sayfada oluşur ve bundan sonra bir kaydırma çubuğunun görüntülendiğinden emin olun. Güncelleştirilecek satır: <div id="myDiv" style="width: 800px; height: 450px; overflow-y: scroll;" onscroll="scrolled()">.
Sonuçların en altına kadar aşağı kaydırın. Tüm bilgilerin artık tek bir görünüm sayfasında olduğuna dikkat edin. Herhangi bir sunucu çağrısını tetiklemeden en üste kadar kaydırabilirsiniz.

Daha gelişmiş 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 ileri 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.

Paketler

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 yararlıdır. Örneğin, sonuçlar hedef şehrin merkezine olan 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, tıklanması gereken sayfa numaraları olmadan yukarı ve aşağı kaydırarak kolay bir çekicilik sağlar.
Sonsuz kaydırmanın temel özelliklerinden biri, sonuçların mevcut bir sayfaya eklenmesidir, bu sayfayı değiştirmek yerine verimlidir.
Geçici depolama yalnızca bir çağrı için kalır ve ek çağrılardan kurtulmak için sıfırlanması gerekir.

Sonraki adımlar

Sayfalama, bir arama deneyimi için temeldir. Disk belleğinin iyi ele alındığı bir sonraki adım, önceden yazılan aramalar ekleyerek kullanıcı deneyimini daha da geliştirmektir.

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

Aracılığıyla paylaş

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

Genel Bakış

Ön koşullar

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

Modele disk belleği alanları ekleme

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

Denetleyiciye Sayfa eylemi ekleme

Uygulamayı derleme ve çalıştırma

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

Modele disk belleği alanları ekleme

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

Sonraki eylemi işleme

Projenizi derleme ve çalıştırma

Paketler

Sonraki adımlar

Ek kaynaklar