Kako uporabljati JavaScript za vzdrževanje iskalnih kriterijev v mreži ASP.NET, potem ko izberem elemente

Optimizacija uporabniške izkušnje pri iskanju in izbiri mreže ASP.NET

Omogočanje strankam iskanja in izbiranja predmetov znotraj mrežnega vmesnika je pogosta značilnost aplikacij ASP.NET. Razvijalci pa pogosto naletijo na težavo: mreža se osveži in iskalni parametri se izgubijo, ko je element izbran. Ker morajo znova zagnati iskanje vsakič, ko izberejo nov predmet, lahko to uporabnike razdraži.

Po povratni objavi ali posodobitvi mreže je nujno ohraniti merila iskanja, da bi izboljšali uporabnost. To je še posebej pomembno, ko morajo potrošniki izbrati več možnosti na podlagi istih standardov. Postopek se po nepotrebnem ponovi, če se iskalni izrazi izgubijo.

Na srečo lahko z uporabo JavaScripta in vgrajenih funkcij ASP.NET zagotovimo, da se ključne besede za iskanje nadaljujejo tudi po izbiri elementa v mreži. Z uporabo metod, ki dopolnjujejo DataTables in stanje pogleda ASP.NET, lahko naredimo uporabniško izkušnjo bolj gladko.

V vodniku, ki sledi, si bomo ogledali, kako uporabiti JavaScript in VB.Net, da to dosežemo v projektu ASP.NET. Preučili bomo tudi scenarij iz resničnega sveta, da vam pokažemo, kako učinkovito vzdrževati iskalna merila, ko posodabljate svojo mrežo.

Razumevanje skriptnih rešitev za ohranjanje iskalnih kriterijev v mreži ASP.NET

Namen ponujenih skriptov je odpraviti pogost problem v aplikacijah ASP.NET, kjer uporabniki izgubijo sled svojih iskalnih parametrov, ko izbirajo iz mreže. Prvi pristop shrani vnos iskanja na strani odjemalca z uporabo JavaScripta sessionStorage funkcijo. Uporabniško izkušnjo izboljša ta strategija, ki poskrbi, da iskalna fraza ostane aktivna tudi po ponovnem nalaganju spletne strani. Ko se stran znova naloži ali je izbran element, je mogoče predpomnjeno iskalno vrednost znova uporabiti v mreži tako, da lokalno zajamete in shranite vnos. Zahvaljujoč tej metodi uporabniku ne bo treba nenehno vnašati istih kriterijev.

Druga metoda uporablja strežniško stran ViewState funkcija ASP.NET. V tem primeru se iskalna vrednost hrani v objektu ViewState, ki ohranja podatke med povratnimi objavami. Vrednost, shranjena v ViewState, se prenese nazaj na stran, ko uporabnik komunicira z mrežo in izbere element. Ta metoda zagotavlja, da so iskalni parametri dostopni za celotno sejo in jih je enostavno vključiti v obdelavo na strani strežnika. Da prepreči izgubo vnosa iskanja, lahko strežnik nato zažene skript za ponovno uporabo iskanja v mreži na strani odjemalca.

AJAX se uporablja v tretjem pristopu za zaustavitev ponovnega nalaganja celotne strani. Dinamično posodabljanje strani se zgodi, ko je izbran element, kar sproži asinhrono zahtevo strežniku. To ohranja kriterije iskanja, ki so podani z zahtevo AJAX, v taktu, medtem ko se mreža osvežuje. Ko je posodobitev končana, funkcija JavaScript znova uporabi iskalno vrednost v mreži. Ta tehnika posodablja gradivo asinhrono, hkrati pa ohranja stanje mreže, da poveča uporabniško izkušnjo.

Vsaka od teh metod na drugačen način zagotavlja ohranitev iskalnega vnosa. Za enostavnejše rešitve na strani odjemalca je primerna tehnika sessionStorage, medtem ko ViewState ponuja celovitejšo strategijo ASP.NET. AJAX zagotavlja, da dejanja uporabnikov ne motijo ​​postopka iskanja, tako da zagotavlja ravnotežje med posodobitvami na strani strežnika in interaktivnostjo na strani odjemalca. Vsaka rešitev je v skladu z najboljšimi praksami glede zmogljivosti in uporabnosti, s ciljem zmanjšati trenje uporabnikov in ohraniti brezhibno izkušnjo interakcije podatkov, ki temelji na mreži 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();
      }
    });
  });
});

Izboljšanje obstojnosti iskanja v mreži z ASP.NET in JavaScript

Ohranjanje označenega stanja izbranih elementov v mreži po osvežitvi strani ali povratni objavi je ključni del ohranjanja nedotaknjene uporabniške izkušnje omrežja ASP.NET. Uporabniki pričakujejo, da bodo njihove izbire ostale nespremenjene med interakcijo z drugimi področji vmesnika, ko naredijo več izbir. To je pogosto težko, saj se lahko določena stanja ponastavijo zaradi sprememb omrežja. Z uporabo JavaScripta in EnableViewState atribut za shranjevanje in ponovno uporabo izbirnega stanja po povratnih objavah je eden od načinov za rešitev tega.

Razvijalci lahko uporabljajo shrambo na strani odjemalca, npr localStorage oz sessionStorage, za spremljanje predmetov, ki so bili izbrani, poleg shranjevanja iskalnih kriterijev. To je še posebej koristno v primerih, ko uporabniki izberejo več izdelkov hkrati. JavaScript je mogoče uporabiti za ponovno uporabo izbire v mreži, potem ko se stran znova naloži, tako da shranite ID-je izbranih elementov. S preprečevanjem izgube uporabniških dejanj ta tehnika močno izboljša celotno uporabniško izkušnjo.

Za bolj zapletena omrežja, zlasti tista, ki upravljajo velike nabore podatkov, je zagotovljena večja hitrost z uporabo posodobitev AJAX. Naredite lahko delne spremembe, medtem ko iskalni parametri in izbrani predmeti ostanejo nedotaknjeni, s čimer prihranite potrebo po ponovnem nalaganju celotne mreže. Z združevanjem se doseže bolj tekoča in interaktivna izkušnja mreže AJAX s strežniško logiko, ki spletnemu mestu omogoča dinamično prilagajanje uporabnikovim aktivnostim, ne da bi posegali v njihov potek dela.