$lang['tuto'] = "tutorial"; ?>$lang['tuto'] = "tutorial"; ?> Cara Menggunakan JavaScript untuk Mengekalkan Kriteria

Cara Menggunakan JavaScript untuk Mengekalkan Kriteria Carian dalam Grid ASP.NET Selepas Saya Memilih Item

Mia Chevalier
Isnin, 30 September 2024 10:51:56 PG
Search persistence

Mengoptimumkan Pengalaman Pengguna dalam Carian dan Pemilihan Grid ASP.NET

Memberi pelanggan keupayaan untuk mencari dan memilih objek dalam antara muka grid adalah ciri yang kerap dalam aplikasi ASP.NET. Pembangun, bagaimanapun, sering menghadapi masalah: grid menyegarkan dan parameter carian hilang apabila item dipilih. Oleh kerana mereka perlu memulakan semula carian mereka setiap kali mereka memilih item baharu, ini mungkin menggusarkan pengguna.

Adalah penting untuk mengekalkan kriteria carian berikutan kemas kini postback atau grid untuk meningkatkan kebolehgunaan. Ini amat penting apabila pengguna perlu memilih beberapa pilihan berdasarkan piawaian yang sama. Proses ini tidak perlu diulang jika istilah carian hilang.

Nasib baik, kami boleh memastikan kata kunci carian diteruskan walaupun selepas memilih item dalam grid dengan menggunakan JavaScript dan ciri terbina dalam ASP.NET. Melalui penggunaan kaedah yang melengkapkan DataTables dan keadaan paparan ASP.NET, kami boleh menjadikan pengalaman pengguna lebih lancar.

Kami akan melihat cara menggunakan JavaScript dan VB.Net untuk mencapai ini dalam projek ASP.NET dalam panduan yang berikut. Kami juga akan melalui senario dunia sebenar untuk menunjukkan kepada anda cara mengekalkan kriteria carian dengan berkesan semasa anda mengemas kini grid anda.

Perintah Contoh penggunaan
sessionStorage.getItem() Parameter carian boleh diambil dengan arahan ini daripada storan sesi pelayar. Dalam keadaan ini, ia mendapatkan semula nilai carian yang telah disediakan sebelum ini dan memastikan bahawa medan carian diisi semula selepas penyegaran halaman atau kemas kini grid.
sessionStorage.setItem() Menyimpan pertanyaan carian semasa dalam storan sesi penyemak imbas. Ini mengekalkan parameter carian daripada hilang sekiranya pengguna memilih item atau grid ASP.NET menyiarkan kembali.
ScriptManager.RegisterStartupScript() Mendaftar dan menjalankan skrip sisi klien ASP.NET daripada pelayan. Untuk menyimpan nilai carian dalam kotak carian grid, ia digunakan di sini untuk menggunakan kriteria carian yang disimpan sama ada semasa memuatkan halaman atau mengikuti postback.
DataTable().search() Selepas kemas kini atau pemuatan halaman, nilai carian cache digunakan kembali pada grid menggunakan kaedah Jadual Data ini. Ia menjamin bahawa grid ditapis mengikut pertanyaan carian yang telah dimasukkan sebelum ini.
DataTable().draw() Menggunakan kriteria carian dan melukis semula Jadual Data. Apabila halaman dimuat semula atau dikemas kini menggunakan AJAX atau teknik lain, arahan ini diperlukan untuk memohon semula istilah carian dan menunjukkan data yang ditapis.
on('keyup') Menambah pengendali acara pada kotak input carian supaya setiap ketukan kekunci direkodkan. Dalam keadaan ini, ia memastikan bahawa nilai carian dikekalkan walaupun grid dimuat semula atau dimuat semula dengan mengemas kini storan sesi dengan input carian semasa.
__doPostBack() Fungsi ASP.NET ini menghantar data kembali ke pelayan dengan menggunakan JavaScript untuk memulakan postback. Apabila item dalam grid dipilih, skrip digunakan untuk menyampaikan nilai carian semasa kepada pelayan, menjamin bahawa keadaan carian dikekalkan semasa proses bahagian pelayan.
$.ajax() Menghantar permintaan HTTP tak segerak kepada pelayan. Dalam kes ini, ia membantu mengekalkan input carian sambil mengemas kini kawasan tertentu tapak web (seperti grid) dengan AJAX dengan menghantar kriteria carian ke pelayan tanpa memuatkan semula keseluruhan halaman.

Memahami Penyelesaian Skrip untuk Memelihara Kriteria Carian dalam Grid ASP.NET

Tujuan skrip yang ditawarkan adalah untuk menangani masalah biasa dalam aplikasi ASP.NET di mana pengguna kehilangan jejak parameter carian mereka apabila mereka membuat pilihan daripada grid. Pendekatan pertama menyimpan input carian pada sisi klien dengan menggunakan JavaScript fungsi. Pengalaman pengguna dipertingkatkan oleh strategi ini, yang memastikan bahawa frasa carian kekal aktif walaupun selepas tapak web dimuat semula. Apabila halaman dimuat semula atau item dipilih, nilai carian cache boleh digunakan pada grid sekali lagi dengan menangkap dan menyimpan input secara setempat. Pengguna tidak perlu terus memasukkan kriteria yang sama terima kasih kepada kaedah ini.

Kaedah lain menggunakan bahagian pelayan ciri ASP.NET. Dalam kes ini, nilai carian disimpan dalam objek ViewState, yang mengekalkan data merentas postback. Nilai yang disimpan dalam ViewState dihantar kembali ke halaman apabila pengguna berinteraksi dengan grid dan memilih item. Kaedah ini menjamin bahawa parameter carian boleh diakses untuk keseluruhan sesi dan mudah dimasukkan ke dalam pemprosesan bahagian pelayan. Untuk mengelakkan kehilangan input carian, pelayan kemudiannya boleh menjalankan skrip untuk memohon semula carian ke grid sisi klien.

digunakan dalam pendekatan ketiga untuk menghentikan muat semula halaman penuh. Pengemaskinian dinamik halaman berlaku apabila item dipilih, yang mencetuskan permintaan tak segerak ke pelayan. Ini memastikan kriteria carian—yang diberikan dengan permintaan AJAX—dalam kebijaksanaan semasa grid disegarkan. Selepas kemas kini selesai, fungsi JavaScript menggunakan semula nilai carian pada grid. Teknik ini mengemas kini bahan secara tidak segerak sambil mengekalkan keadaan grid untuk memaksimumkan pengalaman pengguna.

Dengan cara yang berbeza, setiap kaedah ini menjamin pemeliharaan input carian. Untuk penyelesaian pihak pelanggan yang lebih mudah, teknik sessionStorage adalah sesuai, manakala ViewState menawarkan strategi ASP.NET yang lebih komprehensif. AJAX memastikan bahawa tindakan pengguna tidak mengganggu proses carian dengan menyediakan keseimbangan antara kemas kini bahagian pelayan dan interaktiviti pihak pelanggan. Setiap penyelesaian mematuhi prestasi dan amalan terbaik kebolehgunaan, dengan matlamat untuk meminimumkan geseran pengguna dan mengekalkan pengalaman interaksi data berasaskan grid ASP.NET yang lancar.

Mengekalkan Kriteria Carian dalam Grid ASP.NET Selepas Pemilihan Item

Pendekatan 1: Menggunakan JavaScript dengan Storan Sesi (Pihak Pelanggan)

// JavaScript to store search criteria in session storage
$(document).ready(function() {
  var searchValue = sessionStorage.getItem('searchValue') || '';
  var table = $('#gridViewArtifacts').DataTable({
    lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
    searching: true,
    ordering: true,
    paging: true
  });
  table.search(searchValue).draw(); // Apply search from session
  $('#gridViewArtifacts_filter input').on('keyup', function() {
    sessionStorage.setItem('searchValue', $(this).val());
  });
});

Mengekalkan Input Carian Semasa Postback dalam ASP.NET

Pendekatan 2: Menggunakan ASP.NET ViewState (Server-Side)

' VB.NET Code-Behind: Store search criteria in ViewState
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
  If Not IsPostBack Then
    ViewState("SearchValue") = String.Empty
  End If
End Sub
Protected Sub chkSelect_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs)
  ' Retain search criteria in ViewState
  Dim searchValue As String = CType(ViewState("SearchValue"), String)
  ScriptManager.RegisterStartupScript(Me, Me.GetType(), "ApplySearch",
    "document.getElementById('gridViewArtifacts_filter').value = '" & searchValue & "';", True)
End Sub
' Frontend JavaScript to capture search input
$(document).ready(function() {
  $('#gridViewArtifacts_filter input').on('input', function() {
    __doPostBack('UpdateSearch', $(this).val());
  });
});

Memelihara Kriteria Carian Menggunakan AJAX untuk Mencegah Muat Semula Halaman Penuh

Pendekatan 3: AJAX untuk Kemas Kini Halaman Separa

// JavaScript for AJAX request to retain search after item selection
$(document).ready(function() {
  $('#gridViewArtifacts').DataTable({
    lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
    searching: true,
    ordering: true,
    paging: true
  });
  $('#chkSelect').on('change', function() {
    var searchValue = $('#gridViewArtifacts_filter input').val();
    $.ajax({
      type: 'POST',
      url: 'UpdateGrid.aspx',
      data: { searchValue: searchValue },
      success: function() {
        // Reapply search after AJAX update
        $('#gridViewArtifacts').DataTable().search(searchValue).draw();
      }
    });
  });
});

Meningkatkan Kegigihan Carian Grid dengan ASP.NET dan JavaScript

Mengekalkan keadaan yang diserlahkan bagi item yang dipilih dalam grid berikutan muat semula halaman atau postback adalah bahagian penting dalam memastikan pengalaman pengguna grid ASP.NET utuh. Pengguna menjangkakan pilihan mereka kekal pada tempatnya semasa mereka berinteraksi dengan kawasan lain antara muka apabila mereka membuat berbilang pilihan. Ini selalunya sukar kerana keadaan tertentu mungkin ditetapkan semula akibat pengubahsuaian grid. Menggunakan JavaScript dan atribut untuk menyimpan dan memohon semula keadaan pemilihan berikutan postback adalah satu cara untuk menyelesaikannya.

Pembangun boleh menggunakan storan sisi klien, seperti atau , untuk menjejaki objek yang telah dipilih selain daripada menyimpan kriteria carian. Ini amat membantu dalam situasi di mana pengguna memilih beberapa produk sekaligus. JavaScript boleh digunakan untuk memohon semula pemilihan pada grid selepas halaman dimuat semula dengan menyimpan ID item yang dipilih. Dengan menghalang tindakan pengguna daripada hilang, teknik ini meningkatkan keseluruhan pengalaman pengguna.

Kelajuan yang lebih baik dijamin untuk grid yang lebih rumit, terutamanya yang menguruskan set data besar, dengan menggunakan kemas kini AJAX. Pengubahsuaian separa boleh dibuat sambil mengekalkan parameter carian dan objek terpilih, menjimatkan keperluan untuk memuatkan semula keseluruhan grid. Pengalaman grid yang lebih lancar dan interaktif dicapai dengan menggabungkan dengan logik bahagian pelayan, yang membolehkan tapak web menyesuaikan secara dinamik kepada aktiviti pengguna tanpa mengganggu aliran kerja mereka.

  1. Bagaimanakah saya boleh mengekalkan kriteria carian selepas pos balik?
  2. Kriteria carian boleh dikekalkan antara postback dengan menyimpan input carian dalam atau .
  3. Apabila tapak web dimuat semula, bolehkah saya mengekalkan pilihan saya dalam grid?
  4. Ya, dengan menggunakan JavaScript untuk memohon semula ID item yang dipilih apabila halaman dimuat semula dan menyimpannya atau .
  5. Apabila memilih item grid, adakah terdapat cara untuk menghentikan halaman daripada memuat semula sepenuhnya?
  6. Untuk kemas kini halaman separa, gunakan untuk mengelakkan grid memuat semula sepenuhnya dan mengekalkan parameter carian.
  7. Bolehkah pilihan pengisihan dan halaman dikekalkan antara postback?
  8. Ya, mempekerjakan ; sebagai alternatif, gunakan atau yang harta untuk mengekalkan keadaan.
  9. Pemilihan item dalam grid dan kegigihan carian bersama-sama?
  10. Ya, anda boleh menggunakan JavaScript untuk memohon semula kriteria carian dan item yang dipilih semasa muat semula halaman selepas menyimpannya .

Meningkatkan pengalaman pengguna dalam grid ASP.NET memerlukan kriteria carian disimpan di tempat sebaik sahaja item dipilih. Strategi sisi pelanggan dan bahagian pelayan menjamin bahawa pengguna mengekalkan input carian mereka semasa postback. Ini menghasilkan antara muka yang lebih lancar dan mesra pengguna.

Memelihara input carian dan item yang dipilih, sama ada oleh pengekalan atau penyimpanan, adalah matlamat. Ini sepatutnya mengurangkan kegusaran. Dengan menggunakan teknik ini, anda boleh mengekalkan sifat dinamik dan mesra pengguna apl berasaskan grid anda sambil meningkatkan kebolehgunaan keseluruhan.

  1. Maklumat terperinci mengenai dan cara ia mengekalkan data antara postback diperoleh daripada Dokumentasi rasmi Microsoft .
  2. The penyepaduan yang digunakan dalam fungsi carian JavaScript dirujuk daripada Dokumentasi rasmi DataTables .
  3. Penggunaan dalam JavaScript untuk menyimpan data pihak pelanggan telah diterokai menggunakan contoh daripada Dokumen Web MDN .
  4. Panduan melaksanakan untuk mengelakkan muat semula halaman sambil mengekalkan keadaan grid telah dikumpulkan dari Tutorial AJAX W3Schools .