Kuidas kasutada JavaScripti otsingukriteeriumite säilitamiseks ASP.NET-võrgus pärast üksuste valimist

Kasutajakogemuse optimeerimine ASP.NET-i ruudustikuotsingus ja -valikus

Klientidele võimaluse andmine ruudustiku liideses objekte otsida ja valida on ASP.NET-i rakenduste sagedane funktsioon. Arendajad puutuvad aga sageli kokku probleemiga: ruudustik värskendatakse ja otsinguparameetrid kaovad üksuse valimisel. Kuna nad peavad iga uue üksuse valimisel otsingut uuesti alustama, võib see kasutajaid ärritada.

Kasutatavuse parandamiseks on hädavajalik säilitada otsingukriteeriumid pärast tagasipostitamist või võrguvärskendust. See on eriti oluline, kui tarbijad peavad valima mitu võimalust, mis põhinevad samadel standarditel. Protsessi korratakse asjatult, kui otsinguterminid on kadunud.

Õnneks saame JavaScripti ja ASP.NETi sisseehitatud funktsioonide abil tagada, et otsingu märksõnad jätkuvad ka pärast ruudustikust üksuse valimist. Kasutades meetodeid, mis täiendavad DataTablesi ja ASP.NET-i vaate olekut, saame muuta kasutajakogemuse sujuvamaks.

Järgmises juhendis uurime, kuidas kasutada JavaScripti ja VB.Neti selle saavutamiseks ASP.NETi projektis. Vaatame läbi ka reaalse stsenaariumi, et näidata teile, kuidas võrgustikku värskendades otsingukriteeriume tõhusalt säilitada.

Skriptilahenduste mõistmine otsingukriteeriumide säilitamiseks ASP.NET Gridis

Pakutavate skriptide eesmärk on lahendada ASP.NET-i rakendustes levinud probleem, kus kasutajad kaotavad ruudustikust valiku tegemisel oma otsinguparameetrite jälgimise. Esimene lähenemisviis salvestab JavaScripti abil otsingusisendi kliendi poolel sessionStorage funktsiooni. See strateegia parandab kasutajakogemust, mis tagab, et otsingufraas jääb aktiivseks ka pärast veebisaidi uuesti laadimist. Kui leht laaditakse uuesti või üksus on valitud, saab vahemällu salvestatud otsinguväärtuse uuesti ruudustikule rakendada, jäädvustades ja salvestades sisendi kohapeal. Tänu sellele meetodile ei pea kasutaja pidevalt samu kriteeriume sisestama.

Teine meetod kasutab serveripoolt ViewState ASP.NET-i funktsioon. Sel juhul hoitakse otsinguväärtust ViewState'i objektis, mis säilitab andmeid kogu tagasipostituse kohta. ViewState'is hoitav väärtus edastatakse lehele tagasi, kui kasutaja suhtleb ruudustikuga ja valib üksuse. See meetod tagab, et otsinguparameetrid on kogu seansi jooksul kättesaadavad ja hõlpsasti integreeritud serveripoolsesse töötlusse. Otsingusisendi kadumise vältimiseks saab server seejärel käivitada skripti, et otsingut uuesti kliendipoolsesse võrku rakendada.

AJAX kasutatakse kolmandas lähenemisviisis täislehe uuesti laadimise peatamiseks. Lehe dünaamiline värskendamine toimub üksuse valimisel, mis käivitab serverile asünkroonse päringu. See hoiab otsingukriteeriumid (mis antakse koos AJAX-i päringuga) ruudustiku värskendamise ajal taktitundelisena. Pärast värskendamise lõppu rakendab JavaScripti funktsioon otsinguväärtuse uuesti ruudustikule. See tehnika värskendab materjali asünkroonselt, säilitades samal ajal ruudustiku oleku, et maksimeerida kasutuskogemust.

Erineval viisil tagavad kõik need meetodid otsingusisendi säilimise. Lihtsamate kliendipoolsete lahenduste jaoks on sobiv sessionStorage'i tehnika, samas kui ViewState pakub põhjalikumat ASP.NET-i strateegiat. AJAX tagab, et kasutaja toimingud ei sega otsinguprotsessi, pakkudes tasakaalu serveripoolsete värskenduste ja kliendipoolse interaktiivsuse vahel. Iga lahendus järgib jõudluse ja kasutatavuse parimaid tavasid, eesmärgiga minimeerida kasutajate hõõrdumist ja säilitada sujuv ASP.NET-võrgupõhine andmeinteraktsiooni kogemus.

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

Võrgustikuotsingu püsivuse parandamine ASP.NETi ja JavaScripti abil

Valitud üksuste esiletõstetud oleku säilitamine ruudustikus pärast lehe värskendamist või tagasipostitamist on ASP.NET-i ruudustiku kasutajakogemuse puutumatuna hoidmise oluline osa. Kasutajad eeldavad, et nende valikud jäävad paigale, kui nad suhtlevad mitme valiku tegemisel liidese teiste piirkondadega. See on sageli keeruline, kuna teatud olekud võivad võrgu muudatuste tulemusena lähtestada. JavaScripti ja Luba ViewState atribuut valiku oleku salvestamiseks ja uuesti rakendamiseks pärast tagasipostitamist on üks viis selle lahendamiseks.

Arendajad saavad kasutada näiteks kliendipoolset salvestusruumi kohalik salvestusruum või sessionStorage, et lisaks otsingukriteeriumide salvestamisele jälgida ka valitud objekte. See on eriti kasulik olukordades, kus kasutajad valivad mitu toodet korraga. JavaScripti saab kasutada valiku uuesti ruudustikule rakendamiseks pärast lehe uuesti laadimist, salvestades valitud üksuste ID-d. Vältides kasutaja toimingute kadumist, parandab see tehnika oluliselt kogu kasutajakogemust.

AJAX-i värskenduste abil on tagatud suurem kiirus keerukamate võrkude jaoks, eriti nende jaoks, mis haldavad suuri andmekogumeid. Osalisi muudatusi saab teha, jättes samal ajal otsinguparameetrid ja valitud objektid puutumata, säästes vajadust kogu ruudustiku uuesti laadida. Sujuvam ja interaktiivsem võrgukogemus saavutatakse kombineerimisel AJAX serveripoolse loogikaga, mis võimaldab veebisaidil dünaamiliselt kohaneda kasutaja tegevustega ilma nende töövoogu segamata.