Tutorial: Tambahkan penomoran ke hasil pencarian menggunakan .NET SDK
Pelajari cara menerapkan dua sistem penomoran yang berbeda, yang pertama berdasarkan nomor halaman dan yang kedua pada pengguliran tak terbatas. Kedua sistem penomoran digunakan secara luas, dengan pemilihan yang tepat tergantung pada pengalaman pengguna yang Anda inginkan dengan hasilnya.
Dalam tutorial ini, pelajari cara:
- Perluas aplikasi Anda dengan halaman bernomor
- Perluas aplikasi Anda dengan pengguliran tak terbatas
Gambaran Umum
Tutorial ini melapisi sistem penomoran ke dalam proyek yang dibuat sebelumnya yang dijelaskan dalam tutorial Buat aplikasi pencarian pertama Anda.
Versi kode yang sudah selesai akan Anda kembangkan dalam tutorial ini dapat diikuti pada proyek-proyek berikut:
Prasyarat
- Proyek 1-halaman-pencarian-dasar (GitHub). Proyek ini dapat berupa versi Anda sendiri yang dibuat dari tutorial sebelumnya atau salinan dari GitHub.
Perluas aplikasi Anda dengan halaman bernomor
Halaman bernomor adalah sistem penomoran pilihan untuk mesin pencari web komersial utama dan banyak situs web pencarian lainnya. Halaman bernomor biasanya menyertakan opsi "berikutnya" dan "sebelumnya" di samping rentang nomor halaman yang sebenarnya. Juga opsi "halaman pertama" dan "halaman terakhir" mungkin tersedia. Opsi ini tentu saja memberikan kontrol pengguna atas navigasi melalui hasil berbasis halaman.
Dalam tutorial ini, Anda akan menambahkan sistem yang mencakup opsi pertama, sebelumnya, berikutnya, dan terakhir, bersama dengan nomor halaman yang tidak dimulai dari 1, melainkan mengelilingi halaman yang sedang dibuka pengguna (jadi, misalnya, jika pengguna melihat halaman 10, mungkin nomor halaman 8, 9, 10, 11, dan 12 ditampilkan).
Sistem akan cukup fleksibel untuk memungkinkan jumlah nomor halaman yang terlihat diatur dalam variabel global.
Sistem akan memperlakukan tombol nomor halaman paling kiri dan paling kanan sebagai hal yang khusus, yang berarti akan memicu perubahan rentang nomor halaman yang ditampilkan. Misalnya, jika nomor halaman 8, 9, 10, 11 dan 12 ditampilkan, dan pengguna mengklik 8, maka rentang nomor halaman yang ditampilkan berubah menjadi 6, 7, 8, 9, dan 10. Dan ada pergeseran serupa ke kanan jika mereka memilih 12.
Menambahkan bidang penomoran ke model
Buka solusi halaman pencarian dasar.
Buka file model SearchData.cs.
Tambahkan variabel global untuk mendukung penomoran. Dalam MVC, variabel global dideklarasikan di kelas statisnya sendiri. HasilPerHalaman menetapkan jumlah hasil per halaman. JangkauanHalamanMaks menentukan jumlah nomor halaman yang terlihat pada tampilan. HalamanRentangDelta menentukan berapa banyak halaman yang harus digeser ke kiri atau kanan, saat nomor halaman paling kiri atau paling kanan yang dipilih. Biasanya nomor terakhir ini sekitar setengah dari JangkauanHalamanMaks. Tambahkan kode berikut ke dalam namespace.
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; } } }Tip
Jika Anda menjalankan proyek ini pada perangkat dengan layar yang lebih kecil, seperti laptop, maka pertimbangkan untuk mengubah HasilPerHalaman ke 2.
Tambahkan properti halaman ke kelas CariData setelah properti cariTeks.
// 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; }
Menambahkan tabel opsi penomoran ke tampilan
Buka file index.cshtml, dan tambahkan kode berikut tepat sebelum tag penutup </body>. Kode baru ini menyajikan tabel opsi penomoran: pertama, sebelumnya, 1, 2, 3, 4, 5, berikutnya, terakhir.
@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">|<</p> } </td> <td> @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> @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">></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">>|</p> } </td> </tr> </table> }Kita menggunakan tabel HTML untuk menyelaraskan berbagai hal dengan rapi. Namun semua tindakan berasal dari @Html.ActionLink pernyataan, masing-masing memanggil pengontrol dengan model baru yang dibuat dengan entri yang berbeda terhadap properti penomoran yang kita tambahkan sebelumnya.
Opsi halaman pertama dan terakhir tidak mengirim string seperti "pertama" dan "terakhir", tetapi sebaliknya mengirim nomor halaman yang benar.
Tambahkan kelas penomoran ke daftar gaya HTML di file hotels.css. Adanya kelas HalamanDipilih untuk mengidentifikasi halaman saat ini (dengan menerapkan format tebal ke nomor halaman) dalam daftar nomor halaman.
.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; }
Tambahkan tindakan Halaman ke pengontrol
Buka file HomeController.cs, dan tambahkan tindakan PageAsync. Tindakan ini merespons salah satu opsi halaman yang dipilih.
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); }Metode RunQueryAsync sekarang akan menampilkan galat sintaksis, karena parameter ketiga, yang akan kita bahas sebentar lagi.
Catatan
Panggilan ke TempData menyimpan nilai (objek) di penyimpanan sementara, meskipun penyimpanan ini bertahan hanya untuk satu panggilan. Jika kita menyimpan sesuatu dalam data sementara, hal itu akan tersedia untuk panggilan berikutnya ke tindakan pengontrol, tetapi pasti akan hilang oleh panggilan setelah itu. Karena masa pakai yang singkat ini, kita menyimpan teks pencarian dan properti penomoran kembali dalam penyimpanan sementara setiap panggilan ke PageAsync.
Perbarui tindakan Indeks(model) untuk menyimpan variabel sementara, dan untuk menambahkan parameter halaman paling kiri ke panggilan RunQueryAsync.
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); }Metode RunQueryAsync, yang diperkenalkan dalam pelajaran sebelumnya, memerlukan modifikasi untuk menyelesaikan kesalahan sintaksis. Kita menggunakan bidang Lewati, Ukuran, dan SertakanTotalCount dari kelas PilihanPencarian untuk meminta hasil yang hanya bernilai satu halaman, di mulai dari pengaturan Lewati. Kita juga perlu menghitung variabel penomoran untuk tampilan kita. Ganti seluruh metode dengan kode berikut.
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); }Akhirnya, buat perubahan kecil pada tampilan. Variabel resultList.Results.TotalCount sekarang akan berisi jumlah hasil yang dikembalikan dalam satu halaman (kita menggunakan 3 contoh), bukan jumlah total. Karena kita mengatur IncludeTotalCount ke benar, variabel resultList.TotalCount sekarang berisi jumlah total hasil. Jadi temukan di mana jumlah hasil ditampilkan dalam tampilan, dan ubah ke kode berikut.
// 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" }) }Catatan
Ada sedikit pencapaian kinerja saat mengatur SertakanTotalCount ke benar, karena total ini perlu dihitung oleh Azure Cognitive Search. Dengan kumpulan data yang kompleks, ada peringatan bahwa nilai yang dikembalikan adalah perkiraan. Karena corpus pencarian hotel kecil, maka akan akurat.
Kompilasi dan jalankan aplikasi
Sekarang pilih Mulai Tanpa Debugging (atau tekan tombol F5).
Cari pada untai (karakter) yang mengembalikan banyak hasil (seperti "wifi"). Bisakah Anda membuka halaman dengan rapi melalui hasil?
Coba klik nomor halaman paling kanan, dan kemudian, paling kiri. Apakah nomor halaman menyesuaikan dengan tepat untuk memusatkan halaman tempat Anda berada?
Apakah opsi "pertama" dan "terakhir" berguna? Beberapa mesin pencari komersial menggunakan opsi ini, dan yang lainnya tidak.
Masuk ke halaman terakhir hasil. Halaman terakhir adalah satu-satunya halaman yang mungkin berisi kurang dari hasil HasilPerHalaman.
Ketik "kota", dan klik cari. Tidak ada opsi halaman yang ditampilkan jika hasilnya kurang dari satu halaman.
Simpan proyek ini dan lanjutkan ke bagian berikutnya untuk bentuk alternatif penomoran.
Perluas aplikasi Anda dengan pengguliran tak terbatas
Pengguliran tak terbatas dipicu saat pengguna menggulir bilah gulir vertikal ke hasil terakhir yang ditampilkan. Dalam hal ini, panggilan ke layanan pencarian dibuat untuk halaman hasil berikutnya. Jika tidak ada hasil lagi, tidak ada yang dikembalikan dan bilah gulir vertikal tidak berubah. Jika ada hasil lainnya, hasil tersebut ditambahkan ke halaman saat ini, dan bilah gulir berubah untuk menunjukkan bahwa lebih banyak hasil tersedia.
Poin penting yang perlu diperhatikan adalah bahwa halaman saat ini tidak diganti, melainkan diperluas untuk menunjukkan hasil tambahan. Pengguna selalu dapat menggulir kembali ke hasil pertama pencarian.
Untuk menerapkan pengguliran tak terbatas, mari kita mulai dengan proyek sebelum salah satu elemen pengguliran nomor halaman ditambahkan. Di GitHub, hal ini adalah solusi FirstAzureSearchApp.
Menambahkan bidang penomoran ke model
Pertama, tambahkan properti penomoran ke kelas PencarianData (dalam file model SearchData.cs).
// Record if the next page is requested. public string paging { get; set; }Variabel ini adalah untai (karakter), yang menampung "berikutnya" jika halaman hasil berikutnya harus dikirim, atau menjadi null untuk halaman pertama pencarian.
Dalam file yang sama, dan di dalam namespace layanan, tambahkan kelas variabel global dengan satu properti. Dalam MVC, variabel global dideklarasikan di kelas statisnya sendiri. HasilPerHalaman menetapkan jumlah hasil per halaman.
public static class GlobalVariables { public static int ResultsPerPage { get { return 3; } } }
Tambahkan bilah gulir vertikal ke tampilan
Temukan bagian file index.cshtml yang menampilkan hasilnya (dimulai dengan @if (Model != null)).
Ganti bagian dengan kode di bawah ini. Bagian < div > baru berada di sekitar area yang seharusnya dapat digulir, dan menambahkan atribut overflow-y dan panggilan ke onscroll fungsi yang disebut "digulir()", seperti itu.
@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" }) }Tepat di bawah loop, setelah tag </div, > tambahkan fungsi digullr.
<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>Pernyataan if pada skrip di atas menguji apakah pengguna telah menggulir ke bagian bawah bilah gulir vertikal. Jika mereka memiliki, panggilan ke pengontrol Beranda dilakukan untuk tindakan yang disebut NextAsync. Tidak ada informasi lain yang diperlukan oleh pengontrol, hal itu akan mengembalikan halaman data berikutnya. Data ini kemudian diformat menggunakan gaya HTML yang identik sebagai halaman asli. Jika tidak ada hasil yang dikembalikan, tidak ada yang ditambahkan dan semuanya tetap seperti apa adanya.
Menangani tindakan Berikutnya
Hanya ada tiga tindakan yang perlu dikirim ke pengontrol: yang pertama menjalankan aplikasi, yang memanggil Index() , pencarian pertama oleh pengguna, yang memanggil Index(model), dan kemudian panggilan berikutnya untuk hasil lebih lanjut melalui Next(model) .
Buka file pengontrol rumah dan hapus metode RunQueryAsync dari tutorial asli.
Ganti tindakan Index(model) dengan kode berikut. Sekarang menangani bidang penomoran saat null, atau diatur ke "berikutnya", dan menangani panggilan ke Azure Cognitive Search.
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); }Serupa dengan metode penomoran halaman, kita menggunakan pengaturan pencarian Lewati dan Ukuran untuk meminta hanya data yang kita butuhkan saja yang dikembalikan.
Tambahkan tindakan NextAsync ke pengontrol rumah. Perhatikan bagaimana hal itu mengembalikan daftar, setiap hotel menambahkan dua elemen ke daftar: nama hotel dan deskripsi hotel. Format ini diatur agar sesuai dengan penggunaan fungsi yang digulir dari data yang dikembalikan dalam tampilan.
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); }Jika Anda mendapatkan galat sintaksis pada Daftar <string> , tambahkan direktif berikut menggunakan kepala file pengontrol.
using System.Collections.Generic;
Kompilasi dan jalankan proyek Anda
Sekarang pilih Mulai Tanpa Debugging (atau tekan tombol F5).
Masukkan istilah yang akan memberikan banyak hasil (seperti "kumpulan") lalu uji bilah gulir vertikal. Apakah hal itu memicu halaman hasil baru?
Tip
Untuk memastikan bahwa bilah gulir muncul di halaman pertama, maka hasil halaman pertama harus sedikit melebihi tinggi area tempat mereka ditampilkan. Dalam contoh kita .box1 memiliki tinggi 30 piksel, .box2 memiliki tinggi 100 piksel dan margin bawah 24 piksel. Jadi setiap entri menggunakan 154 piksel. Tiga entri akan memakan waktu 3 x 154 = 462 piksel. Untuk memastikan bahwa bilah gulir vertikal muncul, tinggi ke area tampilan harus diatur lebih kecil dari 462 piksel, bahkan 461 tetap berfungsi. Masalah ini hanya terjadi pada halaman pertama, setelah itu bilah gulir dipastikan akan muncul. Baris yang akan diperbarui adalah: <div id="myDiv" style="width: 800px; height: 450px; overflow-y: scroll;" onscroll="scrolled()"> .
Gulir ke bawah hingga ke bagian bawah hasil. Perhatikan bagaimana semua informasi sekarang ada di satu halaman tampilan. Anda dapat menggulir sepenuhnya kembali ke atas tanpa memicu panggilan server apa pun.
Sistem gulir tak terbatas yang lebih canggih mungkin menggunakan roda mouse, atau mekanisme serupa lainnya, untuk memicu pemuatan halaman hasil terbaru. Kita tidak akan melakukan pengguliran tak terbatas lebih jauh dalam tutorial ini, tetapi menggunakan hal lain karena menghindari klik mouse berlebih, dan Anda mungkin ingin menyelidiki opsi lain lebih lanjut.
Bawa Pulang
Pertimbangkan kesimpulan berikut dari proyek ini:
- Penomoran berguna untuk pencarian di mana urutan hasilnya agak sewenang-wenang, yang berarti mungkin ada sesuatu yang menarik bagi pengguna Anda di halaman selanjutnya.
- Pengguliran tak terbatas berguna ketika urutan hasil sangat penting. Misalnya, jika hasil diurutkan berdasarkan jarak dari pusat kota tujuan.
- Penomoran memungkinkan navigasi yang lebih baik. Misalnya, pengguna dapat mengingat bahwa hasil yang menarik ada di halaman 6, sedangkan tidak ada referensi mudah seperti itu dalam pengguliran tak terbatas.
- Pengguliran tak terbatas memiliki daya tarik yang mudah, menggulir ke atas dan ke bawah tanpa nomor halaman untuk diklik.
- Fitur utama dari pengguliran tak terbatas adalah bahwa hasil ditambahkan ke halaman yang ada, bukan menggantikan halaman tersebut, yang mana efisien.
- Penyimpanan sementara hanya bertahan untuk satu panggilan, dan perlu diatur ulang untuk bertahan dari panggilan tambahan.
Langkah berikutnya
Penomoran sangat penting untuk pengalaman pencarian. Dengan halaman yang tercakup dengan baik, langkah selanjutnya adalah meningkatkan pengalaman pengguna lebih lanjut dengan menambahkan pencarian jenis-depan.