Optimiziranje korisničkog iskustva u ASP.NET Grid pretraživanju i odabiru
Davanje korisnicima mogućnosti pretraživanja i odabira objekata unutar mrežnog sučelja česta je značajka u ASP.NET aplikacijama. Programeri se, međutim, često susreću s problemom: mreža se osvježava, a parametri pretraživanja gube se kada se stavka odabere. Budući da svaki put kada odaberu novu stavku moraju ponovno pokrenuti pretragu, to može iritirati korisnike.
Neophodno je sačuvati kriterije pretraživanja nakon postbacka ili ažuriranja mreže kako bi se poboljšala upotrebljivost. Ovo je posebno važno kada potrošači moraju odabrati nekoliko opcija na temelju istih standarda. Proces se nepotrebno ponavlja ako se pojmovi za pretraživanje izgube.
Srećom, pomoću JavaScripta i ugrađenih značajki ASP.NET-a možemo osigurati nastavak ključnih riječi pretraživanja čak i nakon odabira stavke u mreži. Upotrebom metoda koje nadopunjuju DataTables i stanje prikaza ASP.NET-a, možemo korisničko iskustvo učiniti glatkijim.
U vodiču koji slijedi pogledat ćemo kako koristiti JavaScript i VB.Net da to postignemo u ASP.NET projektu. Također ćemo proći kroz scenarij iz stvarnog svijeta da vam pokažemo kako učinkovito održavati kriterije pretraživanja dok ažurirate svoju mrežu.
| Naredba | Primjer korištenja |
|---|---|
| sessionStorage.getItem() | Parametri pretraživanja mogu se dohvatiti ovom naredbom iz pohrane sesije preglednika. U ovom slučaju, dohvaća vrijednost pretraživanja koja je prethodno navedena i osigurava ponovno popunjavanje polja za pretraživanje nakon osvježavanja stranice ili ažuriranja mreže. |
| sessionStorage.setItem() | Sprema trenutni upit za pretraživanje u pohranu sesije preglednika. Time se sprječava gubitak parametara pretraživanja u slučaju da korisnik odabere stavku ili da ASP.NET mreža vrati postove. |
| ScriptManager.RegisterStartupScript() | Registrira i pokreće ASP.NET skriptu na strani klijenta s poslužitelja. Kako bi se vrijednost pretraživanja spremila u okvir za pretraživanje mreže, ovdje se koristi za primjenu pohranjenih kriterija pretraživanja pri učitavanju stranice ili nakon povratne objave. |
| DataTable().search() | Nakon ažuriranja ili učitavanja stranice, predmemorirana vrijednost pretraživanja primjenjuje se natrag na rešetku pomoću ove metode DataTables. Jamči da je mreža filtrirana prema upitu za pretraživanje koji je prethodno unesen. |
| DataTable().draw() | Primjenjuje kriterije pretraživanja i ponovno iscrtava DataTable. Kada se stranica osvježi ili ažurira korištenjem AJAX-a ili neke druge tehnike, ova je naredba potrebna za ponovnu primjenu pojmova pretraživanja i prikaz filtriranih podataka. |
| on('keyup') | Dodaje rukovatelj događajima u okvir za unos pretraživanja tako da se svaki pritisak tipke bilježi. U ovom slučaju, osigurava da se vrijednost pretraživanja održava čak i ako se mreža osvježi ili ponovno učita ažuriranjem pohrane sesije s trenutnim unosom pretraživanja. |
| __doPostBack() | Ova ASP.NET funkcija šalje podatke natrag na poslužitelj pomoću JavaScripta za pokretanje postbacka. Kada se odabere stavka u mreži, skripta se koristi za priopćavanje trenutne vrijednosti pretraživanja poslužitelju, jamčeći da se stanje pretraživanja održava tijekom procesa na strani poslužitelja. |
| $.ajax() | Šalje poslužitelju asinkroni HTTP zahtjev. U ovom slučaju pomaže u očuvanju unosa pretraživanja tijekom ažuriranja određenih područja web stranice (kao što je mreža) s AJAX-om slanjem kriterija pretraživanja na poslužitelj bez ponovnog učitavanja cijele stranice. |
Razumijevanje rješenja skripte za očuvanje kriterija pretraživanja u ASP.NET Grid
Svrha ponuđenih skripti je rješavanje uobičajenog problema u ASP.NET aplikacijama gdje korisnici gube trag svojih parametara pretraživanja kada odabiru iz mreže. Prvi pristup pohranjuje unos pretraživanja na strani klijenta pomoću JavaScripta sessionStorage funkcija. Korisničko iskustvo je poboljšano ovom strategijom, koja osigurava da izraz za pretraživanje ostane aktivan čak i nakon ponovnog učitavanja web stranice. Kada se stranica ponovno učita ili se odabere stavka, predmemorirana vrijednost pretraživanja može se ponovno primijeniti na mrežu tako da se unos lokalno uhvati i spremi. Zahvaljujući ovoj metodi korisnik neće morati stalno unositi iste kriterije.
Druga metoda koristi stranu poslužitelja ViewState značajka ASP.NET-a. U ovom slučaju, vrijednost pretraživanja čuva se u objektu ViewState, koji čuva podatke u svim postbackovima. Vrijednost koja se čuva u ViewState-u prenosi se natrag na stranicu kada korisnik stupi u interakciju s rešetkom i odabere stavku. Ova metoda jamči da su parametri pretraživanja dostupni tijekom cijele sesije i lako se ugrađuju u obradu na strani poslužitelja. Kako bi se spriječio gubitak unosa pretraživanja, poslužitelj tada može pokrenuti skriptu za ponovnu primjenu pretraživanja na rešetku na strani klijenta.
AJAX koristi se u trećem pristupu za zaustavljanje ponovnog učitavanja cijele stranice. Dinamičko ažuriranje stranice događa se kada je stavka odabrana, što pokreće asinkroni zahtjev prema poslužitelju. Ovo održava kriterije pretraživanja—koji su dani s AJAX zahtjevom—na snazi dok se mreža osvježava. Nakon završetka ažuriranja, JavaScript funkcija ponovno primjenjuje vrijednost pretraživanja na rešetku. Ova tehnika asinkrono ažurira materijal uz očuvanje stanja mreže kako bi se maksimalno povećalo korisničko iskustvo.
Na drugačiji način, svaka od ovih metoda jamči očuvanje unosa pretraživanja. Za jednostavnija rješenja na strani klijenta prikladna je tehnika sessionStorage, dok ViewState nudi sveobuhvatniju ASP.NET strategiju. AJAX osigurava da radnje korisnika ne ometaju proces pretraživanja pružajući ravnotežu između ažuriranja na strani poslužitelja i interaktivnosti na strani klijenta. Svako rješenje pridržava se najboljih praksi u pogledu performansi i upotrebljivosti, s ciljem smanjenja trzanja korisnika i očuvanja besprijekornog iskustva interakcije podataka temeljenog na ASP.NET mreži.
Održavanje kriterija pretraživanja u ASP.NET mreži nakon odabira stavke
Pristup 1: Korištenje JavaScripta s pohranom sesije (na strani klijenta)
// 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());});});
Zadržavanje unosa pretraživanja tijekom postbackova u ASP.NET-u
Pristup 2: Korištenje ASP.NET ViewState (na strani poslužitelja)
' VB.NET Code-Behind: Store search criteria in ViewStateProtected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.LoadIf Not IsPostBack ThenViewState("SearchValue") = String.EmptyEnd IfEnd SubProtected Sub chkSelect_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs)' Retain search criteria in ViewStateDim 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());});});
Očuvanje kriterija pretraživanja korištenjem AJAX-a za sprječavanje ponovnog učitavanja cijele stranice
Pristup 3: AJAX za djelomična ažuriranja stranice
// 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();}});});});
Poboljšanje postojanosti pretraživanja mreže s ASP.NET-om i JavaScriptom
Održavanje istaknutog stanja odabranih stavki u rešetki nakon osvježavanja stranice ili postbacka ključan je dio održavanja korisničkog iskustva ASP.NET mreže netaknutim. Korisnici očekuju da će njihovi odabiri ostati na mjestu dok stupaju u interakciju s drugim područjima sučelja kada naprave više odabira. To je često teško jer se određena stanja mogu poništiti kao rezultat izmjena mreže. Korištenje JavaScripta i EnableViewState atribut za pohranu i ponovnu primjenu stanja odabira nakon postbackova jedan je od načina da se to riješi.
Programeri mogu koristiti pohranu na strani klijenta, npr lokalna pohrana ili sessionStorage, za praćenje objekata koji su odabrani uz pohranjivanje kriterija pretraživanja. Ovo je osobito korisno u situacijama kada korisnici odabiru nekoliko proizvoda odjednom. JavaScript se može koristiti za ponovnu primjenu odabira na rešetku nakon ponovnog učitavanja stranice pohranjivanjem ID-ova odabranih stavki. Sprječavanjem gubitka radnji korisnika, ova tehnika uvelike poboljšava cjelokupno korisničko iskustvo.
Bolja brzina zajamčena je za zamršenije mreže, posebno one koje upravljaju velikim skupovima podataka, korištenjem AJAX ažuriranja. Moguće je izvršiti djelomične izmjene uz zadržavanje netaknutih parametara pretraživanja i odabranih objekata, čime se štedi potreba za ponovnim učitavanjem cijele mreže. Fluidnije i interaktivnije iskustvo mreže postiže se kombiniranjem AJAX s logikom na strani poslužitelja, koja web stranici omogućuje dinamičku prilagodbu aktivnostima korisnika bez ometanja njihovog tijeka rada.
Često postavljana pitanja i njihovi odgovori za očuvanje pretraživanja i odabira u ASP.NET rešetkama
- Kako mogu održavati kriterije pretraživanja nakon postbacka?
- Kriteriji pretraživanja mogu se sačuvati između postbackova pohranjivanjem unosa pretraživanja u sessionStorage ili ViewState.
- Kada se web stranica osvježi, mogu li zadržati svoje odabire u mreži?
- Da, upotrebom JavaScripta za ponovnu primjenu odabranih ID-ova stavki kada se stranica ponovno učita i njihovo spremanje u localStorage ili sessionStorage.
- Kada birate stavke rešetke, postoji li način da se potpuno zaustavi ponovno učitavanje stranice?
- Za djelomična ažuriranja stranice koristite AJAX kako biste izbjegli potpuno ponovno učitavanje mreže i sačuvali parametre pretraživanja.
- Mogu li se izbori sortiranja i straničenja sačuvati između postbackova?
- Da, zaposliti DataTables; alternativno, iskoristiti sessionStorage ili ViewState svojstvo za održavanje stanja.
- Odabir stavke u mreži i ustrajnost pretraživanja zajedno?
- Da, možete koristiti JavaScript za ponovnu primjenu kriterija pretraživanja i odabranih stavki nakon ponovnog učitavanja stranice nakon što ih pohranite u sessionStorage.
Završne misli o pretraživanju i odabiru u ASP.NET rešetkama
Poboljšanje korisničkog iskustva u ASP.NET mrežama zahtijeva da kriteriji pretraživanja budu na mjestu nakon odabira stavki. Strategije na strani klijenta i na strani poslužitelja jamče da korisnici zadrže svoj unos pretraživanja tijekom postbackinga. To rezultira besprijekornijim i jednostavnijim sučeljem.
Čuvanje unosa pretraživanja i odabranih stavki, bilo po ViewState zadržavanje ili JavaScript skladištenje je cilj. Ovo bi trebalo umanjiti iritacije. Korištenjem ovih tehnika možete zadržati dinamičnost i jednostavnost svojih aplikacija koje se temelje na mreži, dok istovremeno poboljšavate ukupnu upotrebljivost.
Reference i izvorni materijal za ASP.NET Grid Search Persistence
- Detaljne informacije o ASP.NET ViewState i način na koji čuva podatke između postbackova je izvor iz Microsoftova službena dokumentacija .
- The DataTables integracija korištena u JavaScript funkciji pretraživanja je referencirana iz Službena dokumentacija DataTables .
- Upotreba sessionStorage u JavaScriptu za pohranjivanje podataka na strani klijenta istraženo je korištenjem primjera iz MDN web dokumenti .
- Smjernice za provedbu AJAX kako bi se spriječilo ponovno učitavanje stranica uz održavanje stanja mreže prikupljeno je iz W3Schools AJAX vodič .