Hur man använder JavaScript för att bibehålla sökkriterier i ett ASP.NET-rutnät efter att jag har valt objekt

Optimera användarupplevelsen i ASP.NET Grid Search and Selection

Att ge kunder möjligheten att söka och välja objekt inom ett rutnätsgränssnitt är en vanlig funktion i ASP.NET-applikationer. Utvecklare stöter dock ofta på ett problem: rutnätet uppdateras och sökparametrarna går förlorade när ett objekt väljs. Eftersom de måste starta om sin sökning varje gång de väljer ett nytt objekt, kan detta irritera användarna.

Det är absolut nödvändigt att bevara sökkriterierna efter en postback eller rutnätsuppdatering för att förbättra användbarheten. Detta är särskilt viktigt när konsumenterna måste välja flera alternativ utifrån samma standarder. Processen upprepas i onödan om söktermerna går förlorade.

Lyckligtvis kan vi se till att sökorden fortsätter även efter att ha valt ett objekt i rutnätet genom att använda JavaScript och de inbyggda funktionerna i ASP.NET. Genom att använda metoder som kompletterar DataTables och vytillståndet för ASP.NET kan vi göra användarupplevelsen smidigare.

Vi kommer att titta på hur man använder JavaScript och VB.Net för att uppnå detta i ett ASP.NET-projekt i guiden som följer. Vi kommer också att gå igenom ett verkligt scenario för att visa dig hur du effektivt bibehåller sökkriterier när du uppdaterar ditt rutnät.

Förstå skriptlösningar för att bevara sökkriterier i ASP.NET Grid

Syftet med de erbjudna skripten är att lösa ett vanligt problem i ASP.NET-applikationer där användare tappar koll på sina sökparametrar när de gör ett urval från ett rutnät. Det första tillvägagångssättet lagrar sökindata på klientsidan genom att använda JavaScript sessionStorage fungera. Användarupplevelsen förbättras av denna strategi, som ser till att sökfrasen förblir aktiv även efter att webbplatsen laddas om. När sidan laddas om eller ett objekt väljs kan det cachade sökvärdet appliceras på rutnätet igen genom att fånga och spara indata lokalt. Användaren behöver inte fortsätta att ange samma kriterier tack vare denna metod.

En annan metod använder serversidan ViewState funktion i ASP.NET. I det här fallet behålls sökvärdet i ViewState-objektet, som bevarar data över återsändningar. Värdet som hålls i ViewState överförs tillbaka till sidan när en användare interagerar med rutnätet och väljer ett objekt. Den här metoden garanterar att sökparametrarna är tillgängliga under hela sessionen och att de enkelt kan integreras i bearbetningen på serversidan. För att förhindra förlust av sökinmatning kan servern sedan köra ett skript för att återapplicera sökningen på klientsidans rutnät.

AJAX används i det tredje tillvägagångssättet för att stoppa helsidesomladdningar. Den dynamiska uppdateringen av sidan sker när ett objekt väljs, vilket utlöser en asynkron begäran till servern. Detta håller sökkriterierna – som ges med AJAX-begäran – i takt medan rutnätet uppdateras. När uppdateringen är klar tillämpar JavaScript-funktionen sökvärdet på rutnätet igen. Denna teknik uppdaterar material asynkront samtidigt som rutnätets tillstånd bevaras för att maximera användarupplevelsen.

På olika sätt garanterar var och en av dessa metoder bevarandet av sökinmatning. För enklare lösningar på klientsidan är sessionStorage-tekniken lämplig, medan ViewState erbjuder en mer omfattande ASP.NET-strategi. AJAX säkerställer att användaråtgärder inte stör sökprocessen genom att tillhandahålla en balans mellan uppdateringar på serversidan och interaktivitet på klientsidan. Varje lösning följer bästa praxis för prestanda och användbarhet, med målet att minimera användarfriktion och bevara en sömlös ASP.NET-rutnätsbaserad datainteraktionsupplevelse.

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

Förbättra Grid Search Persistens med ASP.NET och JavaScript

Att bibehålla det markerade tillståndet för de valda objekten i rutnätet efter en siduppdatering eller återsändning är en avgörande del för att hålla ASP.NET-rutnätets användarupplevelse intakt. Användare förväntar sig att deras val förblir på plats när de interagerar med andra delar av gränssnittet när de gör flera val. Detta är ofta svårt eftersom vissa tillstånd kan återställas som ett resultat av rutnätsändringar. Använda JavaScript och EnableViewState attribut för att lagra och återanvända urvalstillståndet efter återsändningar är ett sätt att lösa detta.

Utvecklare kan använda lagring på klientsidan, som localStorage eller sessionStorage, för att hålla reda på de objekt som har plockats ut förutom att lagra sökkriterier. Detta är särskilt användbart i situationer där användare väljer flera produkter samtidigt. JavaScript kan användas för att återföra valet på rutnätet efter att sidan har laddats om genom att lagra de valda artikel-ID:n. Genom att förhindra att användaråtgärder går förlorade, förbättrar denna teknik avsevärt hela användarupplevelsen.

Bättre hastighet garanteras för mer invecklade rutnät, särskilt de som hanterar stora datamängder, genom att använda AJAX-uppdateringar. Partiella ändringar kan göras samtidigt som sökparametrarna och valda objekt behålls intakta, vilket sparar behovet av att ladda om hela rutnätet. En mer flytande och interaktiv rutnätsupplevelse uppnås genom att kombinera AJAX med logik på serversidan, vilket gör att webbplatsen kan anpassa sig dynamiskt till användaraktiviteter utan att störa deras arbetsflöde.