Optimalizácia používateľského prostredia pri vyhľadávaní a výbere mriežky ASP.NET
Častou funkciou aplikácií ASP.NET je poskytnúť zákazníkom možnosť vyhľadávať a vyberať objekty v rámci mriežkového rozhrania. Vývojári sa však často stretávajú s problémom: mriežka sa obnoví a parametre vyhľadávania sa stratia, keď vyberiete položku. Keďže musia pri každom výbere novej položky znovu spustiť vyhľadávanie, používateľov to môže dráždiť.
Je nevyhnutné zachovať kritériá vyhľadávania po spätnom odoslaní alebo aktualizácii mriežky, aby sa zlepšila použiteľnosť. Toto je obzvlášť dôležité, keď si spotrebitelia musia vybrať niekoľko možností založených na rovnakých normách. Ak sa hľadané výrazy stratia, proces sa zbytočne opakuje.
Našťastie sa môžeme uistiť, že kľúčové slová vyhľadávania pokračujú aj po výbere položky v mriežke pomocou JavaScriptu a vstavaných funkcií ASP.NET. Použitím metód, ktoré dopĺňajú DataTables a stav zobrazenia ASP.NET, môžeme spríjemniť používateľskú skúsenosť.
V nasledujúcej príručke sa pozrieme na to, ako to dosiahnuť pomocou JavaScriptu a VB.Net v projekte ASP.NET. Prejdeme si aj scenár z reálneho sveta, ktorý vám ukáže, ako efektívne udržiavať kritériá vyhľadávania pri aktualizácii vašej mriežky.
| Príkaz | Príklad použitia |
|---|---|
| sessionStorage.getItem() | Parametre vyhľadávania je možné získať pomocou tohto príkazu z úložiska relácie prehliadača. V tomto prípade získa hodnotu vyhľadávania, ktorá bola predtým poskytnutá, a zabezpečí, aby sa pole vyhľadávania po obnovení stránky alebo aktualizácii mriežky znova vyplnilo. |
| sessionStorage.setItem() | Uloží aktuálny vyhľadávací dopyt do úložiska relácie prehliadača. Tým sa zabráni strate parametrov vyhľadávania v prípade, že používateľ vyberie položku alebo mriežka ASP.NET odošle späť. |
| ScriptManager.RegisterStartupScript() | Registruje a spúšťa skript ASP.NET na strane klienta zo servera. Na uloženie hodnoty vyhľadávania do vyhľadávacieho poľa mriežky sa tu používa na použitie uložených kritérií vyhľadávania buď pri načítaní stránky alebo po spätnom odoslaní. |
| DataTable().search() | Po aktualizácii alebo načítaní stránky sa hodnota vyhľadávania vo vyrovnávacej pamäti použije späť do mriežky pomocou tejto metódy DataTables. Zaručuje, že mriežka je filtrovaná podľa vyhľadávacieho dopytu, ktorý bol predtým zadaný. |
| DataTable().draw() | Použije kritériá vyhľadávania a prekreslí DataTable. Keď sa stránka obnoví alebo aktualizuje pomocou AJAX alebo inej techniky, tento príkaz je potrebný na opätovné použitie hľadaných výrazov a zobrazenie filtrovaných údajov. |
| on('keyup') | Pridá obsluhu udalosti do vyhľadávacieho vstupného poľa, aby sa zaznamenalo každé stlačenie klávesu. V tomto prípade zaisťuje, že hľadaná hodnota sa zachová, aj keď sa mriežka obnoví alebo znovu načíta, a to aktualizáciou úložiska relácie s aktuálnym vstupom vyhľadávania. |
| __doPostBack() | Táto funkcia ASP.NET odosiela dáta späť na server pomocou JavaScriptu na spustenie postback. Keď je vybratá položka v mriežke, skript sa použije na komunikáciu aktuálnej hodnoty vyhľadávania so serverom, čím sa zaručí, že počas procesov na strane servera sa zachová stav vyhľadávania. |
| $.ajax() | Odošle serveru asynchrónnu požiadavku HTTP. V tomto prípade pomáha zachovať vstup vyhľadávania pri aktualizácii špecifických oblastí webovej stránky (napríklad mriežky) pomocou AJAX odoslaním kritérií vyhľadávania na server bez opätovného načítania celej stránky. |
Pochopenie riešení skriptov na zachovanie kritérií vyhľadávania v mriežke ASP.NET
Účelom ponúkaných skriptov je riešiť bežný problém v aplikáciách ASP.NET, kedy používatelia pri výbere z mriežky strácajú prehľad o parametroch vyhľadávania. Prvý prístup ukladá vstup vyhľadávania na strane klienta pomocou JavaScriptu sessionStorage funkciu. Táto stratégia zlepšuje používateľskú skúsenosť, ktorá zabezpečuje, že hľadaná fráza zostane aktívna aj po opätovnom načítaní webovej stránky. Keď sa stránka znova načíta alebo je vybratá položka, hodnotu vyhľadávania uloženú vo vyrovnávacej pamäti možno znova použiť na mriežku zachytením a uložením vstupu lokálne. Používateľ vďaka tejto metóde nebude musieť stále zadávať rovnaké kritériá.
Iná metóda využíva serverovú stranu ViewState vlastnosť ASP.NET. V tomto prípade je hľadaná hodnota uložená v objekte ViewState, ktorý uchováva údaje počas spätných odoslaní. Hodnota uložená v ViewState sa prenesie späť na stránku, keď používateľ interaguje s mriežkou a vyberie položku. Táto metóda zaručuje, že parametre vyhľadávania sú dostupné pre celú reláciu a sú ľahko začlenené do spracovania na strane servera. Aby sa predišlo strate vstupu vyhľadávania, server môže spustiť skript na opätovné použitie vyhľadávania v mriežke na strane klienta.
AJAX sa používa v treťom prístupe na zastavenie opätovného načítania celej stránky. Dynamická aktualizácia stránky nastáva, keď je vybratá položka, ktorá spustí asynchrónnu požiadavku na server. Tým sa zachovajú kritériá vyhľadávania, ktoré sú uvedené v požiadavke AJAX, počas obnovovania mriežky. Po dokončení aktualizácie funkcia JavaScript znova použije hľadanú hodnotu na mriežku. Táto technika aktualizuje materiál asynchrónne pri zachovaní stavu mriežky, aby sa maximalizoval používateľský zážitok.
Každá z týchto metód iným spôsobom zaručuje zachovanie vyhľadávacieho vstupu. Pre jednoduchšie riešenia na strane klienta je vhodná technika sessionStorage, zatiaľ čo ViewState ponúka komplexnejšiu stratégiu ASP.NET. AJAX zaisťuje, že akcie používateľa nezasahujú do procesu vyhľadávania tým, že poskytuje rovnováhu medzi aktualizáciami na strane servera a interaktivitou na strane klienta. Každé riešenie je v súlade s osvedčenými postupmi výkonu a použiteľnosti s cieľom minimalizovať užívateľské trenie a zachovať bezproblémovú skúsenosť s interakciou dát založenou na sieti ASP.NET.
Udržiavanie kritérií vyhľadávania v mriežke ASP.NET po výbere položky
Prístup 1: Používanie JavaScriptu s ukladaním relácií (na strane klienta)
// 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());});});
Zachovanie vyhľadávacieho vstupu počas postbackov v ASP.NET
Prístup 2: Používanie ASP.NET ViewState (na strane servera)
' 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());});});
Zachovanie kritérií vyhľadávania pomocou AJAX na zabránenie opätovnému načítaniu celej stránky
Prístup 3: AJAX pre čiastočné aktualizácie stránky
// 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();}});});});
Vylepšenie výdrže pri vyhľadávaní v sieti pomocou ASP.NET a JavaScriptu
Udržiavanie zvýrazneného stavu vybratých položiek v mriežke po obnovení stránky alebo spätnom odoslaní je kľúčovou súčasťou zachovania používateľskej skúsenosti ASP.NET mriežky. Používatelia očakávajú, že ich výber zostane na svojom mieste, keď interagujú s inými oblasťami rozhrania, keď vykonajú viacero výberov. To je často ťažké, pretože niektoré stavy sa môžu resetovať v dôsledku úprav siete. Pomocou JavaScriptu a EnableViewState atribút na uloženie a opätovné použitie stavu výberu po spätných odoslaniach je jedným zo spôsobov, ako to vyriešiť.
Vývojári môžu využívať úložisko na strane klienta, napr localStorage alebo sessionStorage, aby ste okrem ukladania kritérií vyhľadávania sledovali objekty, ktoré boli vybraté. To je užitočné najmä v situáciách, keď si používatelia vyberajú niekoľko produktov naraz. JavaScript možno použiť na opätovné použitie výberu v mriežke po opätovnom načítaní stránky uložením ID vybratých položiek. Tým, že táto technika bráni strate používateľských akcií, výrazne zlepšuje celú používateľskú skúsenosť.
Lepšia rýchlosť je zaručená pre zložitejšie siete, najmä tie, ktoré spravujú veľké súbory údajov, pomocou aktualizácií AJAX. Čiastočné úpravy je možné vykonať pri zachovaní nedotknutých parametrov vyhľadávania a vybraných objektov, čím sa ušetrí potreba opätovného načítania celej mriežky. Kombináciou sa dosiahne plynulejší a interaktívnejší zážitok z mriežky AJAX s logikou na strane servera, ktorá umožňuje webovej stránke dynamicky sa prispôsobovať aktivitám používateľov bez toho, aby zasahovala do ich pracovného toku.
Často kladené otázky a ich odpovede na zachovanie vyhľadávania a výberu v mriežkach ASP.NET
- Ako môžem zachovať kritériá vyhľadávania po odoslaní?
- Kritériá vyhľadávania možno medzi spätnými odoslaniami zachovať uložením vstupov vyhľadávania v sessionStorage alebo ViewState.
- Keď sa webová lokalita obnoví, môžem zachovať svoj výber v mriežke?
- Áno, pomocou JavaScriptu na opätovné použitie vybratých ID položiek pri opätovnom načítaní stránky a ich uložení localStorage alebo sessionStorage.
- Existuje spôsob, ako pri výbere položiek mriežky úplne zastaviť opätovné načítanie stránky?
- Pre čiastočné aktualizácie stránky použite AJAX aby sa mriežka úplne nenačítala a zachovali sa parametre vyhľadávania.
- Môžu byť medzi postbackmi zachované možnosti triedenia a stránkovania?
- Áno, zamestnať DataTables; prípadne využiť sessionStorage alebo ViewState majetok na udržanie stavu.
- Výber položky v mriežke a trvalosť vyhľadávania spolu?
- Áno, môžete použiť JavaScript na opätovné použitie kritérií vyhľadávania a vybratých položiek pri opätovnom načítaní stránky po ich uložení sessionStorage.
Záverečné myšlienky o vyhľadávaní a výbere v mriežkach ASP.NET
Zlepšenie používateľského zážitku v mriežkach ASP.NET vyžaduje, aby po výbere položiek zostali kritériá vyhľadávania na mieste. Stratégie na strane klienta a na strane servera zaručujú, že používatelia si počas spätného zálohovania zachovajú svoj vyhľadávací vstup. Výsledkom je bezproblémovejšie a užívateľsky prívetivejšie rozhranie.
Zachovanie zadania vyhľadávania a vybraných položiek, či už podľa ViewState retencia resp JavaScript skladovanie, je cieľom. To by malo minimalizovať obťažovanie. Pomocou týchto techník môžete zachovať dynamickú a užívateľsky prívetivú povahu svojich aplikácií založených na mriežke a zároveň zlepšiť celkovú použiteľnosť.
Referencie a zdrojový materiál pre ASP.NET Grid Search Persistence
- Podrobné informácie na ASP.NET ViewState a ako uchováva údaje medzi spätnými odoslaniami Oficiálna dokumentácia spoločnosti Microsoft .
- The DataTables integrácia používaná vo funkcii vyhľadávania JavaScript bola odkazovaná z Oficiálna dokumentácia DataTables .
- Použitie sessionStorage v JavaScripte na ukladanie údajov na strane klienta bol skúmaný pomocou príkladov z Webové dokumenty MDN .
- Návod na implementáciu AJAX aby sa zabránilo opätovnému načítaniu stránky pri zachovaní stavu mriežky, bolo zhromaždené z Výukový program W3Schools AJAX .