Sådan bruger du JavaScript til at vedligeholde søgekriterier i et ASP.NET-gitter, efter jeg har valgt elementer

Optimering af brugeroplevelse i ASP.NET Grid Search and Selection

At give kunderne mulighed for at søge og vælge objekter inden for en grid-grænseflade er en hyppig funktion i ASP.NET-applikationer. Udviklere støder dog ofte på et problem: gitteret opdateres, og søgeparametrene går tabt, når et element vælges. Fordi de skal genstarte deres søgning, hver gang de vælger et nyt element, kan dette irritere brugerne.

Det er bydende nødvendigt at bevare søgekriterierne efter en postback eller gitteropdatering for at forbedre brugervenligheden. Dette er særligt afgørende, når forbrugerne skal vælge flere muligheder baseret på de samme standarder. Processen gentages unødigt, hvis søgetermerne går tabt.

Heldigvis kan vi sikre, at søgeordene fortsætter, selv efter at have valgt et element i gitteret ved at bruge JavaScript og de indbyggede funktioner i ASP.NET. Gennem brug af metoder, der komplementerer DataTables og visningstilstanden for ASP.NET, kan vi gøre brugeroplevelsen mere smidig.

Vi vil se på, hvordan man bruger JavaScript og VB.Net til at opnå dette i et ASP.NET-projekt i vejledningen, der følger. Vi vil også gennemgå et scenarie i den virkelige verden for at vise dig, hvordan du effektivt vedligeholder søgekriterier, mens du opdaterer dit gitter.

Forstå scriptløsninger til at bevare søgekriterier i ASP.NET Grid

Formålet med de tilbudte scripts er at løse et almindeligt problem i ASP.NET-applikationer, hvor brugere mister overblikket over deres søgeparametre, når de foretager et valg fra et gitter. Den første tilgang gemmer søgeinputtet på klientsiden ved at bruge JavaScript sessionStorage fungere. Brugeroplevelsen forbedres af denne strategi, som sikrer, at søgesætningen forbliver aktiv, selv efter at hjemmesiden genindlæses. Når siden genindlæses eller et element er valgt, kan den cachelagrede søgeværdi anvendes på gitteret igen ved at fange og gemme input lokalt. Brugeren behøver ikke at blive ved med at indtaste de samme kriterier takket være denne metode.

En anden metode bruger serversiden ViewState funktion i ASP.NET. I dette tilfælde bevares søgeværdien i ViewState-objektet, som bevarer data på tværs af tilbagesendelser. Værdien, der opbevares i ViewState, sendes tilbage til siden, når en bruger interagerer med gitteret og vælger et element. Denne metode garanterer, at søgeparametrene er tilgængelige for hele sessionen og nemt inkorporeres i server-sidebehandlingen. For at forhindre tab af søgeinput kan serveren derefter køre et script for at genanvende søgningen på klientsidens gitter.

AJAX bruges i den tredje tilgang til at stoppe genindlæsninger af hele sider. Den dynamiske opdatering af siden sker, når et element er valgt, hvilket udløser en asynkron anmodning til serveren. Dette holder søgekriterierne - som er givet med AJAX-anmodningen - i takt, mens gitteret opdateres. Når opdateringen er afsluttet, genbruger JavaScript-funktionen søgeværdien på gitteret. Denne teknik opdaterer materiale asynkront, mens gitterets tilstand bevares for at maksimere brugeroplevelsen.

På en anden måde garanterer hver af disse metoder bevarelsen af ​​søgeinput. Til enklere klientsideløsninger er sessionStorage-teknikken passende, mens ViewState tilbyder en mere omfattende ASP.NET-strategi. AJAX sikrer, at brugerhandlinger ikke forstyrrer søgeprocessen ved at give en balance mellem server-side opdateringer og klient-side interaktivitet. Hver løsning overholder bedste praksis for ydeevne og brugervenlighed med det mål at minimere brugerfriktion og bevare en problemfri ASP.NET-netbaseret datainteraktionsoplevelse.

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

Forbedring af Grid Search Persistence med ASP.NET og JavaScript

Vedligeholdelse af den fremhævede tilstand af de valgte elementer i gitteret efter en sideopdatering eller postback er en afgørende del af at holde ASP.NET-gitterets brugeroplevelse intakt. Brugere forventer, at deres valg forbliver på plads, når de interagerer med andre områder af grænsefladen, når de foretager flere valg. Dette er ofte vanskeligt, da visse tilstande kan nulstilles som følge af netmodifikationer. Brug af JavaScript og EnableViewState attribut til at gemme og genanvende valgtilstanden efter tilbagesendelser er en måde at løse dette på.

Udviklere kan bruge lagring på klientsiden, f.eks lokalopbevaring eller sessionStorage, for at holde styr på de objekter, der er blevet plukket ud over at gemme søgekriterier. Dette er især nyttigt i situationer, hvor brugerne vælger flere produkter på én gang. JavaScript kan bruges til at genanvende markeringen på gitteret, efter at siden er genindlæst, ved at gemme de valgte element-id'er. Ved at forhindre brugerhandlinger i at gå tabt, forbedrer denne teknik i høj grad hele brugeroplevelsen.

Bedre hastighed er garanteret for mere indviklede gitter, især dem, der administrerer store datasæt, ved at bruge AJAX-opdateringer. Delvise ændringer kan foretages, mens søgeparametrene og udvalgte objekter holdes intakte, hvilket sparer behovet for at genindlæse hele gitteret. En mere flydende og interaktiv grid-oplevelse opnås ved at kombinere AJAX med logik på serversiden, som gør det muligt for hjemmesiden at tilpasse sig dynamisk til brugeraktiviteter uden at forstyrre deres arbejdsgang.