$lang['tuto'] = "tutorials"; ?>$lang['tuto'] = "tutorials"; ?> Com utilitzar JavaScript per mantenir els criteris de cerca

Com utilitzar JavaScript per mantenir els criteris de cerca en una graella ASP.NET després de seleccionar elements

Mia Chevalier
Dilluns, 30 de setembre de 2024 a les 9:49:39
Search persistence

Optimització de l'experiència de l'usuari a la cerca i selecció de quadrícula ASP.NET

Oferir als clients la possibilitat de cercar i triar objectes dins d'una interfície de quadrícula és una característica freqüent a les aplicacions ASP.NET. Els desenvolupadors, però, sovint es troben amb un problema: la quadrícula s'actualitza i els paràmetres de cerca es perden quan es selecciona un element. Com que han de reiniciar la cerca cada vegada que trien un element nou, això pot irritar els usuaris.

És imprescindible conservar els criteris de cerca després d'una publicació o actualització de la graella per millorar la usabilitat. Això és especialment important quan els consumidors han de triar diverses opcions basades en els mateixos estàndards. El procés es repeteix innecessàriament si es perden els termes de cerca.

Afortunadament, podem assegurar-nos que les paraules clau de cerca continuen fins i tot després d'escollir un element a la graella utilitzant JavaScript i les funcions integrades d'ASP.NET. Mitjançant l'ús de mètodes que complementen DataTables i l'estat de visualització d'ASP.NET, podem fer que l'experiència de l'usuari sigui més fluida.

Veurem com utilitzar JavaScript i VB.Net per aconseguir-ho en un projecte ASP.NET a la guia que segueix. També passarem per un escenari del món real per mostrar-vos com mantenir els criteris de cerca de manera eficaç mentre actualitzeu la graella.

Comandament Exemple d'ús
sessionStorage.getItem() Els paràmetres de cerca es poden recuperar amb aquesta ordre des de l'emmagatzematge de sessions del navegador. En aquest cas, recupera el valor de cerca que es va proporcionar anteriorment i s'assegura que el camp de cerca es torni a omplir després d'una actualització de la pàgina o una actualització de la quadrícula.
sessionStorage.setItem() Desa la consulta de cerca actual a l'emmagatzematge de sessió del navegador. Això evita que es perdin els paràmetres de cerca en cas que l'usuari esculli un element o que la graella d'ASP.NET torni a publicar.
ScriptManager.RegisterStartupScript() Registra i executa un script del costat del client ASP.NET des del servidor. Per desar el valor de cerca al quadre de cerca de la quadrícula, s'utilitza aquí per aplicar els criteris de cerca emmagatzemats a la càrrega de la pàgina o després d'una devolució.
DataTable().search() Després d'una actualització o de la càrrega de la pàgina, el valor de cerca en memòria cau s'aplica de nou a la quadrícula mitjançant aquest mètode DataTables. Garanteix que la graella es filtra segons la consulta de cerca introduïda prèviament.
DataTable().draw() Aplica els criteris de cerca i torna a dibuixar la DataTable. Quan la pàgina s'actualitza o s'actualitza mitjançant AJAX o una altra tècnica, aquesta ordre és necessària per tornar a aplicar els termes de cerca i mostrar les dades filtrades.
on('keyup') Afegeix un controlador d'esdeveniments al quadre d'entrada de cerca perquè es registri cada pulsació de tecla. En aquest cas, assegura que el valor de cerca es mantingui fins i tot si la graella s'actualitza o es torna a carregar mitjançant l'actualització de l'emmagatzematge de la sessió amb l'entrada de cerca actual.
__doPostBack() Aquesta funció ASP.NET envia dades al servidor mitjançant JavaScript per iniciar una devolució. Quan se selecciona un element de la graella, l'script s'utilitza per comunicar el valor de cerca actual al servidor, garantint que l'estat de cerca es mantingui durant els processos del servidor.
$.ajax() Envia al servidor una sol·licitud HTTP asíncrona. En aquest cas, ajuda a preservar l'entrada de cerca mentre actualitzeu àrees específiques del lloc web (com la graella) amb AJAX enviant els criteris de cerca al servidor sense tornar a carregar tota la pàgina.

Entendre les solucions de script per preservar els criteris de cerca a la graella ASP.NET

L'objectiu dels scripts oferts és abordar un problema comú a les aplicacions ASP.NET on els usuaris perden el seguiment dels seus paràmetres de cerca quan fan una selecció d'una graella. El primer enfocament emmagatzema l'entrada de cerca al costat del client mitjançant JavaScript funció. L'experiència de l'usuari es millora amb aquesta estratègia, que assegura que la frase de cerca es mantingui activa fins i tot després que el lloc web es torni a carregar. Quan la pàgina es torna a carregar o es selecciona un element, el valor de cerca de la memòria cau es pot tornar a aplicar a la quadrícula capturant i desant l'entrada localment. L'usuari no haurà de seguir introduint els mateixos criteris gràcies a aquest mètode.

Un altre mètode utilitza el costat del servidor característica d'ASP.NET. En aquest cas, el valor de cerca es manté a l'objecte ViewState, que conserva les dades a través de postbacks. El valor que es manté a ViewState es transmet de nou a la pàgina quan un usuari interactua amb la quadrícula i selecciona un element. Aquest mètode garanteix que els paràmetres de cerca siguin accessibles durant tota la sessió i s'incorporin fàcilment al processament del servidor. Per evitar la pèrdua d'entrada de cerca, el servidor pot executar un script per tornar a aplicar la cerca a la graella del costat del client.

s'utilitza en el tercer enfocament per aturar les recàrregues de pàgina sencera. L'actualització dinàmica de la pàgina es produeix quan es selecciona un element, la qual cosa activa una sol·licitud asíncrona al servidor. Això manté els criteris de cerca, que es donen amb la sol·licitud AJAX, en tacte mentre la graella s'actualitza. Un cop finalitzada l'actualització, la funció JavaScript torna a aplicar el valor de cerca a la quadrícula. Aquesta tècnica actualitza el material de manera asíncrona alhora que preserva l'estat de la graella per maximitzar l'experiència de l'usuari.

D'una manera diferent, cadascun d'aquests mètodes garanteix la preservació de l'entrada de cerca. Per a solucions més senzilles del costat del client, la tècnica sessionStorage és adequada, mentre que ViewState ofereix una estratègia ASP.NET més completa. AJAX garanteix que les accions de l'usuari no interfereixin amb el procés de cerca proporcionant un equilibri entre les actualitzacions del servidor i la interactivitat del client. Cada solució s'adhereix a les millors pràctiques de rendiment i usabilitat, amb l'objectiu de minimitzar la fricció de l'usuari i preservar una experiència d'interacció de dades basada en quadrícula ASP.NET perfecta.

Manteniment dels criteris de cerca a la graella ASP.NET després de la selecció d'elements

Enfocament 1: ús de JavaScript amb emmagatzematge de sessions (costat del client)

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

Retenció de l'entrada de cerca durant els enviaments a ASP.NET

Enfocament 2: ús d'ASP.NET ViewState (costat del servidor)

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

Preservació dels criteris de cerca mitjançant AJAX per evitar la recàrrega de la pàgina completa

Enfocament 3: AJAX per a actualitzacions parcials de pàgines

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

Millora de la persistència de la cerca de graella amb ASP.NET i JavaScript

Mantenir l'estat ressaltat dels elements seleccionats a la quadrícula després d'una actualització o una publicació de la pàgina és una part crucial per mantenir intacta l'experiència de l'usuari de la quadrícula ASP.NET. Els usuaris preveuen que les seves seleccions es mantinguin al seu lloc mentre interactuen amb altres àrees de la interfície quan fan diverses seleccions. Això sovint és difícil, ja que determinats estats es poden restablir com a resultat de modificacions de la graella. Utilitzant JavaScript i el L'atribut per emmagatzemar i tornar a aplicar l'estat de selecció després de les devolucions és una manera de solucionar-ho.

Els desenvolupadors poden utilitzar l'emmagatzematge del costat del client, com ara o , per fer un seguiment dels objectes que s'han escollit a més d'emmagatzemar els criteris de cerca. Això és especialment útil en situacions en què els usuaris trien diversos productes alhora. Es pot utilitzar JavaScript per tornar a aplicar la selecció a la quadrícula després que la pàgina es torni a carregar emmagatzemant els ID d'element seleccionats. En evitar que es perdin les accions de l'usuari, aquesta tècnica millora enormement tota l'experiència de l'usuari.

Es garanteix una millor velocitat per a quadrícules més complexes, especialment aquelles que gestionen grans conjunts de dades, mitjançant actualitzacions AJAX. Es poden fer modificacions parcials mantenint intactes els paràmetres de cerca i els objectes seleccionats, estalviant la necessitat de tornar a carregar tota la graella. S'aconsegueix una experiència de graella més fluida i interactiva combinant amb lògica del costat del servidor, que permet que el lloc web s'adapti dinàmicament a les activitats dels usuaris sense interferir amb el seu flux de treball.

  1. Com puc mantenir els criteris de cerca després d'una publicació?
  2. Els criteris de cerca es poden conservar entre enviaments emmagatzemant l'entrada de cerca o .
  3. Quan el lloc web s'actualitza, puc mantenir les meves seleccions a la graella?
  4. Sí, utilitzant JavaScript per tornar a aplicar els identificadors d'element escollits quan es torni a carregar la pàgina i desar-los a o .
  5. Quan trieu els elements de la quadrícula, hi ha alguna manera d'evitar que la pàgina es torni a carregar completament?
  6. Per a actualitzacions parcials de la pàgina, utilitzeu per evitar que la graella es recarregui totalment i preservar els paràmetres de cerca.
  7. Es poden conservar les opcions d'ordenació i paginació entre enviaments?
  8. Sí, empra ; alternativament, utilitzar o el propietat per mantenir l'estat.
  9. La selecció d'elements a la quadrícula i la persistència de la cerca junts?
  10. Sí, podeu utilitzar JavaScript per tornar a aplicar els criteris de cerca i els elements seleccionats en tornar a carregar la pàgina després d'emmagatzemar-los .

Millorar l'experiència de l'usuari a les quadrícules ASP.NET requereix que els criteris de cerca es mantinguin al seu lloc un cop seleccionats els elements. Les estratègies del costat del client i del servidor garanteixen que els usuaris mantinguin la seva entrada de cerca durant el postbacking. Això es tradueix en una interfície més senzilla i fàcil d'utilitzar.

Preservant l'entrada de cerca i els elements seleccionats, ja sigui per retenció o emmagatzematge, és l'objectiu. Això hauria de minimitzar les molèsties. Mitjançant aquestes tècniques, podeu mantenir la naturalesa dinàmica i fàcil d'utilitzar de les vostres aplicacions basades en quadrícula alhora que milloreu la usabilitat general.

  1. Informació detallada sobre i com es conserva les dades entre postbacks es va procedir Documentació oficial de Microsoft .
  2. El es va fer referència a la integració utilitzada a la funcionalitat de cerca de JavaScript Documentació oficial de DataTables .
  3. L'ús de en JavaScript per emmagatzemar dades del costat del client es va explorar amb exemples de MDN Web Docs .
  4. Orientació per a la implementació per evitar que es recarreguin les pàgines mentre es mantenia l'estat de la quadrícula es va recopilar del Tutorial AJAX de W3Schools .