Jak používat JavaScript k udržování vyhledávacích kritérií v mřížce ASP.NET poté, co vyberu položky

Optimalizace uživatelského prostředí v ASP.NET Grid Search a Selection

Poskytnout zákazníkům možnost vyhledávat a vybírat objekty v rozhraní mřížky je častou funkcí aplikací ASP.NET. Vývojáři se však často setkávají s problémem: mřížka se obnoví a parametry vyhledávání se při výběru položky ztratí. Protože musí znovu spustit vyhledávání pokaždé, když si vyberou novou položku, může to uživatele dráždit.

Je nezbytné zachovat kritéria vyhledávání po zpětném odeslání nebo aktualizaci mřížky, aby se zlepšila použitelnost. To je zvláště důležité, když si spotřebitelé musí vybrat několik možností založených na stejných normách. Proces se zbytečně opakuje, pokud se hledané výrazy ztratí.

Naštěstí se můžeme ujistit, že vyhledávací klíčová slova pokračují i ​​po výběru položky v mřížce pomocí JavaScriptu a vestavěných funkcí ASP.NET. Pomocí metod, které doplňují DataTables a stav zobrazení ASP.NET, můžeme uživatelskou zkušenost usnadnit.

V následující příručce se podíváme na to, jak toho dosáhnout pomocí JavaScriptu a VB.Net v projektu ASP.NET. Projdeme si také scénář z reálného světa, který vám ukáže, jak efektivně udržovat kritéria vyhledávání při aktualizaci vaší mřížky.

Příkaz	Příklad použití
sessionStorage.getItem()	Parametry vyhledávání lze pomocí tohoto příkazu načíst z úložiště relací prohlížeče. V tomto případě načte hodnotu hledání, která byla poskytnuta dříve, a zajistí, aby bylo pole hledání po aktualizaci stránky nebo aktualizaci mřížky znovu vyplněno.
sessionStorage.setItem()	Uloží aktuální vyhledávací dotaz do úložiště relace prohlížeče. Tím se zabrání ztrátě parametrů vyhledávání v případě, že uživatel vybere položku nebo mřížka ASP.NET odešle zpět.
ScriptManager.RegisterStartupScript()	Registruje a spouští skript ASP.NET na straně klienta ze serveru. Aby bylo možné uložit hledanou hodnotu do vyhledávacího pole mřížky, používá se zde k použití uložených vyhledávacích kritérií buď při načtení stránky nebo po zpětném odeslání.
DataTable().search()	Po aktualizaci nebo načtení stránky se hodnota hledání v mezipaměti použije zpět do mřížky pomocí této metody DataTables. Zaručuje filtrování mřížky podle dříve zadaného vyhledávacího dotazu.
DataTable().draw()	Použije vyhledávací kritéria a překreslí DataTable. Když je stránka obnovena nebo aktualizována pomocí AJAX nebo jiné techniky, je tento příkaz vyžadován k opětovnému použití hledaných výrazů a zobrazení filtrovaných dat.
on('keyup')	Přidá obslužnou rutinu události do vyhledávacího pole, aby bylo zaznamenáno každé stisknutí klávesy. V tomto případě zajišťuje, že hledaná hodnota je zachována, i když je mřížka obnovena nebo znovu načtena aktualizací úložiště relace aktuálním vyhledávacím vstupem.
__doPostBack()	Tato funkce ASP.NET odesílá data zpět na server pomocí JavaScriptu k zahájení postback. Když je vybrána položka v mřížce, skript se používá ke komunikaci aktuální hodnoty hledání na server, což zaručuje, že stav hledání je udržován během procesů na straně serveru.
$.ajax()	Odešle serveru asynchronní požadavek HTTP. V tomto případě pomáhá zachovat vyhledávací vstup při aktualizaci konkrétních oblastí webu (jako je mřížka) pomocí AJAX odesláním vyhledávacích kritérií na server, aniž by bylo nutné znovu načíst celou stránku.

Pochopení řešení skriptů pro zachování kritérií vyhledávání v mřížce ASP.NET

Účelem nabízených skriptů je řešit běžný problém v aplikacích ASP.NET, kdy uživatelé při výběru z mřížky ztrácejí přehled o parametrech vyhledávání. První přístup ukládá vyhledávací vstup na straně klienta pomocí JavaScriptu funkce. Tato strategie zlepšuje uživatelský zážitek, který zajišťuje, že hledaná fráze zůstane aktivní i po opětovném načtení webu. Když se stránka znovu načte nebo je vybrána položka, lze hodnotu hledání v mezipaměti znovu použít na mřížku tím, že zachytíte a uložíte vstup lokálně. Uživatel díky této metodě nebude muset zadávat stále stejná kritéria.

Další metoda využívá serverovou stranu funkce ASP.NET. V tomto případě je hledaná hodnota zachována v objektu ViewState, který zachovává data napříč postbacky. Hodnota uložená ve ViewState se přenese zpět na stránku, když uživatel interaguje s mřížkou a vybere položku. Tato metoda zaručuje, že parametry vyhledávání jsou dostupné pro celou relaci a jsou snadno začleněny do zpracování na straně serveru. Aby se zabránilo ztrátě vstupu vyhledávání, může server poté spustit skript pro opětovné použití vyhledávání v mřížce na straně klienta.

se používá ve třetím přístupu k zastavení opětovného načítání celé stránky. Dynamická aktualizace stránky nastane, když je vybrána položka, která spustí asynchronní požadavek na server. To udrží kritéria vyhledávání – která jsou uvedena v požadavku AJAX – v platnosti, zatímco se mřížka obnovuje. Po dokončení aktualizace funkce JavaScript znovu použije hledanou hodnotu na mřížku. Tato technika aktualizuje materiál asynchronně při zachování stavu mřížky, aby se maximalizoval uživatelský dojem.

Každá z těchto metod jiným způsobem zaručuje zachování vyhledávacího vstupu. Pro jednodušší řešení na straně klienta je vhodná technika sessionStorage, zatímco ViewState nabízí komplexnější strategii ASP.NET. AJAX zajišťuje, že akce uživatele nezasahují do procesu vyhledávání tím, že poskytuje rovnováhu mezi aktualizacemi na straně serveru a interaktivitou na straně klienta. Každé řešení dodržuje osvědčené postupy týkající se výkonu a použitelnosti s cílem minimalizovat uživatelské tření a zachovat bezproblémovou interakci s daty na mřížce 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();
      }
    });
  });
});

Vylepšení trvanlivosti vyhledávání v mřížce pomocí ASP.NET a JavaScriptu

Udržování zvýrazněného stavu vybraných položek v mřížce po obnovení stránky nebo zpětném odeslání je zásadní součástí zachování uživatelského prostředí mřížky ASP.NET. Uživatelé očekávají, že jejich výběr zůstane na svém místě, protože interagují s jinými oblastmi rozhraní, když provádějí více výběrů. To je často obtížné, protože některé stavy se mohou resetovat v důsledku úprav sítě. Pomocí JavaScriptu a Jedním ze způsobů, jak to vyřešit, je atribut uložit a znovu použít stav výběru po postbackech.

Vývojáři mohou využívat úložiště na straně klienta, např nebo , chcete-li kromě ukládání kritérií vyhledávání sledovat objekty, které byly vybrány. To je užitečné zejména v situacích, kdy uživatelé vybírají několik produktů najednou. JavaScript lze použít k opětovnému použití výběru na mřížku po opětovném načtení stránky uložením ID vybraných položek. Tím, že tato technika zabraňuje ztrátě uživatelských akcí, výrazně zlepšuje celkovou uživatelskou zkušenost.

Lepší rychlost je zaručena pro složitější sítě, zejména ty, které spravují velké datové sady, pomocí aktualizací AJAX. Částečné úpravy lze provádět při zachování parametrů vyhledávání a vybraných objektů beze změny, což šetří nutnost znovu načítat celou mřížku. Kombinací je dosaženo plynulejšího a interaktivnějšího zážitku z mřížky s logikou na straně serveru, která umožňuje webové stránce dynamicky se přizpůsobovat aktivitám uživatelů, aniž by to narušovalo jejich pracovní tok.

1. Jak mohu zachovat kritéria vyhledávání po odeslání postback?
2. Kritéria vyhledávání lze mezi postbacky zachovat uložením vyhledávacího vstupu do nebo .
3. Když se web obnoví, mohu zachovat svůj výběr v mřížce?
4. Ano, pomocí JavaScriptu k opětovnému použití vybraných ID položek, když se stránka znovu načte, a jejich uložení nebo .
5. Existuje způsob, jak při výběru položek mřížky zastavit úplné načítání stránky?
6. Pro částečné aktualizace stránky použijte aby se zabránilo úplnému načtení mřížky a zachování parametrů vyhledávání.
7. Lze mezi postbacky zachovat volby řazení a stránkování?
8. Ano, zaměstnat ; případně využít nebo majetek k udržení stavu.
9. Výběr položek v mřížce a perzistence hledání dohromady?
10. Ano, pomocí JavaScriptu můžete znovu použít vyhledávací kritéria a vybrané položky při opětovném načtení stránky po jejich uložení .

Zlepšení uživatelského prostředí v mřížkách ASP.NET vyžaduje, aby byla po výběru položek zachována vyhledávací kritéria. Strategie na straně klienta a na straně serveru zaručují, že si uživatelé během postbackingu udrží svůj vyhledávací vstup. Výsledkem je bezproblémovější a uživatelsky přívětivější rozhraní.

Zachování vyhledávacího vstupu a vybraných položek, ať už podle retenční popř skladování, je cílem. To by mělo minimalizovat obtěžování. Pomocí těchto technik můžete zachovat dynamickou a uživatelsky přívětivou povahu svých aplikací založených na mřížce a zároveň zlepšit celkovou použitelnost.