Hogyan használhatom a JavaScriptet a keresési feltételek fenntartására egy ASP.NET rácsban, miután kiválasztottam az elemeket

A felhasználói élmény optimalizálása az ASP.NET Grid Search and Selection szolgáltatásban

Az ASP.NET-alkalmazások gyakori funkciója, hogy az ügyfelek lehetőséget kapjanak az objektumok rácsfelületen belüli keresésére és kiválasztására. A fejlesztők azonban gyakran találkoznak problémával: a rács frissül, és a keresési paraméterek elvesznek egy elem kiválasztásakor. Mivel minden alkalommal újra kell indítaniuk a keresést, amikor új elemet választanak, ez irritálhatja a felhasználókat.

A használhatóság javítása érdekében feltétlenül meg kell őrizni a keresési feltételeket a visszaküldést vagy a rácsfrissítést követően. Ez különösen akkor fontos, ha a fogyasztóknak ugyanazon szabványok alapján több lehetőséget kell választaniuk. A folyamat szükségtelenül megismétlődik, ha a keresett kifejezések elvesznek.

Szerencsére a JavaScript és az ASP.NET beépített funkcióinak felhasználásával biztosíthatjuk, hogy a keresési kulcsszavak a rácsból való elem kiválasztása után is folytatódjanak. A DataTables-t kiegészítő metódusok és az ASP.NET nézeti állapota segítségével gördülékenyebbé tehetjük a felhasználói élményt.

A következő útmutatóban megvizsgáljuk, hogyan használhatjuk ezt a JavaScriptet és a VB.Net-et egy ASP.NET projektben. Emellett egy valós forgatókönyvet is áttekintünk, amely megmutatja, hogyan tarthatja hatékonyan a keresési feltételeket a rács frissítése során.

Az ASP.NET Gridben a keresési feltételek megőrzésére szolgáló szkriptmegoldások megértése

A felajánlott szkriptek célja az ASP.NET alkalmazásokban előforduló gyakori probléma megoldása, ahol a felhasználók elveszítik a keresési paramétereiket, amikor egy rácsból választanak ki. Az első megközelítés a keresési bevitelt a kliens oldalon tárolja JavaScript használatával sessionStorage funkció. Ez a stratégia javítja a felhasználói élményt, amely biztosítja, hogy a keresőkifejezés a webhely újratöltése után is aktív maradjon. Az oldal újratöltésekor vagy egy elem kiválasztásakor a gyorsítótárazott keresési érték újra alkalmazható a rácsra a bemenet rögzítésével és helyi mentésével. Ennek a módszernek köszönhetően a felhasználónak nem kell folyamatosan ugyanazokat a feltételeket megadnia.

Egy másik módszer a szerveroldalt használja ViewState Az ASP.NET szolgáltatása. Ebben az esetben a keresési érték a ViewState objektumban marad, amely megőrzi az adatokat a visszaküldések között. A ViewState-ben tárolt érték visszakerül az oldalra, amikor a felhasználó interakcióba lép a ráccsal és kiválaszt egy elemet. Ez a módszer garantálja, hogy a keresési paraméterek a teljes munkamenetben elérhetőek legyenek, és könnyen beépüljenek a szerveroldali feldolgozásba. A keresési bemenet elvesztésének elkerülése érdekében a kiszolgáló futtathat egy parancsfájlt, hogy újra alkalmazza a keresést az ügyféloldali rácsra.

AJAX a harmadik megközelítésben használják a teljes oldalas újratöltés leállítására. Az oldal dinamikus frissítése egy elem kiválasztásakor történik, ami aszinkron kérést indít a szerver felé. Ez a rács frissítése közben érintetlenül tartja a keresési feltételeket – amelyek az AJAX kéréssel együtt vannak megadva. A frissítés befejezése után a JavaScript függvény újra alkalmazza a keresési értéket a rácsra. Ez a technika aszinkron módon frissíti az anyagot, miközben megőrzi a rács állapotát a felhasználói élmény maximalizálása érdekében.

Más módon ezek a módszerek mindegyike garantálja a keresési bemenet megőrzését. Az egyszerűbb kliensoldali megoldásokhoz a sessionStorage technika a megfelelő, míg a ViewState átfogóbb ASP.NET stratégiát kínál. Az AJAX biztosítja, hogy a felhasználói műveletek ne zavarják a keresési folyamatot azáltal, hogy egyensúlyt biztosít a szerveroldali frissítések és az ügyféloldali interaktivitás között. Minden megoldás betartja a teljesítményre és a használhatóságra vonatkozó legjobb gyakorlatokat, azzal a céllal, hogy minimalizálja a felhasználói súrlódást, és megőrizze a zökkenőmentes ASP.NET grid-alapú adatkezelési élményt.

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

A rácskeresés tartósságának javítása ASP.NET és JavaScript segítségével

Az oldalfrissítést vagy visszaküldést követően a kijelölt elemek kiemelt állapotának megőrzése a rácson az ASP.NET rács felhasználói élményének megőrzésének kulcsfontosságú része. A felhasználók arra számítanak, hogy a kijelöléseik a helyükön maradnak, miközben többszörös kijelöléskor interakcióba lépnek a felület más területeivel. Ez gyakran nehéz, mivel bizonyos állapotok visszaállhatnak a rács módosításai következtében. A JavaScript és a EnableViewState Az attribútum használatával a visszaküldést követő kiválasztási állapot tárolása és újbóli alkalmazása az egyik módja ennek megoldására.

A fejlesztők használhatnak ügyféloldali tárhelyet, pl localStorage vagy sessionStorage, a kiválasztott objektumok nyomon követéséhez a keresési feltételek tárolása mellett. Ez különösen hasznos olyan helyzetekben, amikor a felhasználók egyszerre több terméket választanak. A JavaScript segítségével a kiválasztott elemazonosítók tárolásával az oldal újratöltése után újra alkalmazható a kijelölés a rácsra. Azáltal, hogy megakadályozza a felhasználói műveletek elvesztését, ez a technika nagymértékben javítja a teljes felhasználói élményt.

Az AJAX-frissítések használatával nagyobb sebesség garantált a bonyolultabb rácsoknál, különösen azoknál, amelyek nagy adatkészleteket kezelnek. Részleges módosítások végezhetők úgy, hogy a keresési paraméterek és a kiválasztott objektumok érintetlenek maradnak, így megspórolható a teljes rács újratöltése. A kombinálással gördülékenyebb és interaktívabb rácsélmény érhető el AJAX szerveroldali logikával, amely lehetővé teszi a webhely számára, hogy dinamikusan alkalmazkodjon a felhasználói tevékenységekhez anélkül, hogy megzavarná a munkafolyamatukat.