Cum să utilizați JavaScript pentru a menține criteriile de căutare într-o grilă ASP.NET după ce selectez elemente

Optimizarea experienței utilizatorului în căutarea și selecția în grilă ASP.NET

Oferirea clienților posibilitatea de a căuta și alege obiecte într-o interfață grilă este o caracteristică frecventă în aplicațiile ASP.NET. Cu toate acestea, dezvoltatorii întâmpină frecvent o problemă: grila se reîmprospătează și parametrii de căutare se pierd atunci când este selectat un articol. Deoarece trebuie să repornească căutarea de fiecare dată când aleg un articol nou, acest lucru poate irita utilizatorii.

Este imperativ să păstrați criteriile de căutare după o postback sau o actualizare a grilei pentru a îmbunătăți gradul de utilizare. Acest lucru este deosebit de important atunci când consumatorii trebuie să aleagă mai multe opțiuni pe baza acelorași standarde. Procesul se repetă inutil dacă se pierd termenii de căutare.

Din fericire, ne putem asigura că cuvintele cheie de căutare continuă chiar și după alegerea unui articol din grilă utilizând JavaScript și funcțiile încorporate ale ASP.NET. Prin utilizarea metodelor care completează DataTables și starea de vizualizare a ASP.NET, putem face experiența utilizatorului mai fluidă.

Ne vom uita la cum să folosiți JavaScript și VB.Net pentru a realiza acest lucru într-un proiect ASP.NET în ghidul care urmează. De asemenea, vom parcurge un scenariu real pentru a vă arăta cum să mențineți eficient criteriile de căutare pe măsură ce vă actualizați grila.

Înțelegerea soluțiilor de script pentru păstrarea criteriilor de căutare în grila ASP.NET

Scopul scripturilor oferite este de a aborda o problemă comună în aplicațiile ASP.NET în care utilizatorii își pierd urma parametrilor de căutare atunci când fac o selecție dintr-o grilă. Prima abordare stochează intrarea de căutare pe partea clientului utilizând JavaScript sesiuneStorage funcţie. Experiența utilizatorului este îmbunătățită de această strategie, care se asigură că expresia de căutare rămâne activă chiar și după reîncărcarea site-ului. Când pagina se reîncarcă sau este selectat un articol, valoarea căutării din cache poate fi aplicată din nou grilei prin captarea și salvarea locală a intrării. Utilizatorul nu va trebui să continue să introducă aceleași criterii datorită acestei metode.

O altă metodă folosește partea serverului ViewState caracteristica ASP.NET. În acest caz, valoarea căutării este păstrată în obiectul ViewState, care păstrează datele peste postback. Valoarea păstrată în ViewState este transmisă înapoi către pagină atunci când un utilizator interacționează cu grila și selectează un articol. Această metodă garantează că parametrii de căutare sunt accesibili pentru întreaga sesiune și sunt ușor încorporați în procesarea de pe partea serverului. Pentru a preveni pierderea intrărilor de căutare, serverul poate rula apoi un script pentru a aplica din nou căutarea în grila de pe partea clientului.

AJAX este utilizat în cea de-a treia abordare pentru a opri reîncărcările paginii întregi. Actualizarea dinamică a paginii are loc atunci când este selectat un articol, ceea ce declanșează o solicitare asincronă către server. Acest lucru păstrează criteriile de căutare, care sunt date cu cererea AJAX, în tact în timp ce grila se reîmprospătează. După terminarea actualizării, funcția JavaScript reaplică valoarea de căutare în grilă. Această tehnică actualizează materialul în mod asincron, păstrând în același timp starea rețelei pentru a maximiza experiența utilizatorului.

Într-un mod diferit, fiecare dintre aceste metode garantează păstrarea intrărilor de căutare. Pentru soluții mai simple la nivelul clientului, tehnica sessionStorage este adecvată, în timp ce ViewState oferă o strategie ASP.NET mai cuprinzătoare. AJAX asigură că acțiunile utilizatorului nu interferează cu procesul de căutare, oferind un echilibru între actualizările pe partea de server și interactivitatea pe partea clientului. Fiecare soluție aderă la cele mai bune practici de performanță și utilizare, cu scopul de a minimiza frecarea utilizatorilor și de a păstra o experiență de interacțiune a datelor bazată pe grilă ASP.NET.

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

Îmbunătățirea persistenței căutării în grilă cu ASP.NET și JavaScript

Menținerea stării evidențiate a elementelor selectate din grilă după o reîmprospătare a paginii sau o postback este o parte esențială a menținerii intacte a experienței utilizatorului grilei ASP.NET. Utilizatorii anticipează că selecțiile lor vor rămâne pe loc în timp ce interacționează cu alte zone ale interfeței atunci când fac selecții multiple. Acest lucru este adesea dificil, deoarece anumite stări se pot reseta ca urmare a modificărilor grilei. Folosind JavaScript și EnableViewState Atributul pentru a stoca și reaplica starea de selecție după postback este o modalitate de a rezolva acest lucru.

Dezvoltatorii pot folosi stocarea pe partea clientului, cum ar fi LocalStorage sau sesiuneStorage, pentru a ține evidența obiectelor care au fost alese pe lângă stocarea criteriilor de căutare. Acest lucru este deosebit de util în situațiile în care utilizatorii aleg mai multe produse simultan. JavaScript poate fi folosit pentru a reaplica selecția la grilă după ce pagina se reîncărcă prin stocarea ID-urilor articolului selectat. Prin prevenirea pierderii acțiunilor utilizatorului, această tehnică îmbunătățește considerabil întreaga experiență a utilizatorului.

Viteză mai bună este garantată pentru grile mai complicate, în special pentru cele care gestionează seturi mari de date, prin utilizarea actualizărilor AJAX. Modificările parțiale pot fi făcute păstrând intacți parametrii de căutare și obiectele selectate, evitând necesitatea reîncărcării întregii grile. O experiență de rețea mai fluidă și interactivă este obținută prin combinare AJAX cu logica server-side, care permite site-ului web să se adapteze dinamic la activitățile utilizatorilor, fără a interfera cu fluxul de lucru al acestora.