Cara Menggunakan JavaScript untuk Mempertahankan Kriteria Pencarian di Grid ASP.NET Setelah Saya Memilih Item

Mengoptimalkan Pengalaman Pengguna dalam Pencarian dan Seleksi Grid ASP.NET

Memberi pelanggan kemampuan untuk mencari dan memilih objek dalam antarmuka grid adalah fitur yang sering digunakan dalam aplikasi ASP.NET. Namun, pengembang sering kali mengalami masalah: kisi-kisi disegarkan dan parameter pencarian hilang saat item dipilih. Karena mereka harus memulai ulang pencarian setiap kali memilih item baru, hal ini dapat mengganggu pengguna.

Sangat penting untuk mempertahankan kriteria pencarian setelah postback atau pembaruan grid untuk meningkatkan kegunaan. Hal ini sangat penting ketika konsumen harus memilih beberapa pilihan berdasarkan standar yang sama. Proses ini tidak perlu diulang jika istilah pencarian hilang.

Untungnya, kami dapat memastikan kata kunci pencarian terus berlanjut bahkan setelah memilih item di grid dengan memanfaatkan JavaScript dan fitur bawaan ASP.NET. Melalui penggunaan metode yang melengkapi DataTables dan status tampilan ASP.NET, kami dapat membuat pengalaman pengguna lebih lancar.

Kita akan melihat cara menggunakan JavaScript dan VB.Net untuk mencapai hal ini dalam proyek ASP.NET dalam panduan berikut. Kami juga akan membahas skenario dunia nyata untuk menunjukkan kepada Anda cara mempertahankan kriteria pencarian secara efektif saat Anda memperbarui grid Anda.

Memahami Solusi Skrip untuk Mempertahankan Kriteria Pencarian di ASP.NET Grid

Tujuan dari skrip yang ditawarkan adalah untuk mengatasi masalah umum dalam aplikasi ASP.NET dimana pengguna kehilangan jejak parameter pencarian mereka ketika mereka membuat pilihan dari grid. Pendekatan pertama menyimpan input pencarian di sisi klien dengan menggunakan JavaScript sesiPenyimpanan fungsi. Pengalaman pengguna ditingkatkan dengan strategi ini, yang memastikan frasa pencarian tetap aktif bahkan setelah situs web dimuat ulang. Saat halaman dimuat ulang atau item dipilih, nilai pencarian cache dapat diterapkan lagi ke grid dengan menangkap dan menyimpan input secara lokal. Pengguna tidak perlu terus-menerus memasukkan kriteria yang sama berkat metode ini.

Metode lain menggunakan sisi server Status Tampilan fitur ASP.NET. Dalam hal ini, nilai pencarian disimpan dalam objek ViewState, yang menyimpan data di seluruh postback. Nilai yang disimpan dalam ViewState dikirim kembali ke halaman saat pengguna berinteraksi dengan grid dan memilih item. Metode ini menjamin bahwa parameter pencarian dapat diakses untuk seluruh sesi dan mudah dimasukkan ke dalam pemrosesan sisi server. Untuk mencegah hilangnya input pencarian, server kemudian dapat menjalankan skrip untuk menerapkan kembali pencarian ke grid sisi klien.

AJAX digunakan dalam pendekatan ketiga untuk menghentikan pemuatan ulang satu halaman penuh. Pembaruan dinamis halaman terjadi ketika item dipilih, yang memicu permintaan asinkron ke server. Hal ini menjaga kriteria pencarian—yang diberikan dengan permintaan AJAX—tetap tepat saat grid disegarkan. Setelah pembaruan selesai, fungsi JavaScript menerapkan kembali nilai pencarian ke grid. Teknik ini memperbarui materi secara asinkron sambil mempertahankan status grid untuk memaksimalkan pengalaman pengguna.

Dengan cara yang berbeda, masing-masing metode ini menjamin pelestarian masukan pencarian. Untuk solusi sisi klien yang lebih sederhana, teknik sessionStorage sesuai, sementara ViewState menawarkan strategi ASP.NET yang lebih komprehensif. AJAX memastikan bahwa tindakan pengguna tidak mengganggu proses pencarian dengan memberikan keseimbangan antara pembaruan sisi server dan interaktivitas sisi klien. Setiap solusi mematuhi praktik terbaik kinerja dan kegunaan, dengan tujuan meminimalkan gesekan pengguna dan menjaga pengalaman interaksi data berbasis grid ASP.NET yang lancar.

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

' 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());
  });
});

// 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 Persistensi Pencarian Grid dengan ASP.NET dan JavaScript

Mempertahankan status yang disorot dari item yang dipilih di grid setelah penyegaran halaman atau postback adalah bagian penting untuk menjaga pengalaman pengguna grid ASP.NET tetap utuh. Pengguna mengantisipasi pilihan mereka untuk tetap berada di tempatnya saat mereka berinteraksi dengan area antarmuka lainnya ketika mereka membuat beberapa pilihan. Hal ini sering kali sulit dilakukan karena negara bagian tertentu dapat diatur ulang akibat modifikasi jaringan. Menggunakan JavaScript dan AktifkanViewState atribut untuk menyimpan dan menerapkan kembali status pemilihan setelah postback adalah salah satu cara untuk mengatasi ini.

Pengembang dapat menggunakan penyimpanan sisi klien, misalnya Penyimpanan lokal atau sesiPenyimpanan, untuk melacak objek yang telah dipilih selain menyimpan kriteria pencarian. Hal ini sangat membantu dalam situasi di mana pengguna memilih beberapa produk sekaligus. JavaScript dapat digunakan untuk menerapkan kembali pilihan ke grid setelah halaman dimuat ulang dengan menyimpan ID item yang dipilih. Dengan mencegah hilangnya tindakan pengguna, teknik ini sangat meningkatkan pengalaman pengguna secara keseluruhan.

Kecepatan yang lebih baik dijamin untuk grid yang lebih rumit, terutama yang mengelola kumpulan data besar, dengan menggunakan pembaruan AJAX. Modifikasi parsial dapat dilakukan sambil menjaga parameter pencarian dan objek yang dipilih tetap utuh, sehingga tidak perlu memuat ulang seluruh grid. Pengalaman grid yang lebih lancar dan interaktif dicapai dengan menggabungkan AJAX dengan logika sisi server, yang memungkinkan situs web beradaptasi secara dinamis dengan aktivitas pengguna tanpa mengganggu alur kerja mereka.