JavaScript gebruiken om zoekcriteria in een ASP.NET-raster te onderhouden nadat ik items heb geselecteerd

Optimalisatie van de gebruikerservaring bij het zoeken en selecteren van ASP.NET-rasters

Klanten de mogelijkheid bieden om objecten binnen een rasterinterface te zoeken en te kiezen, is een veel voorkomende functie in ASP.NET-toepassingen. Ontwikkelaars komen echter regelmatig een probleem tegen: het raster wordt vernieuwd en de zoekparameters gaan verloren wanneer een item wordt geselecteerd. Omdat ze telkens opnieuw moeten zoeken als ze een nieuw item kiezen, kan dit gebruikers irriteren.

Het is absoluut noodzakelijk om de zoekcriteria te behouden na een postback- of rasterupdate om de bruikbaarheid te verbeteren. Dit is vooral van cruciaal belang wanneer consumenten verschillende opties moeten kiezen op basis van dezelfde normen. Het proces wordt onnodig herhaald als de zoektermen verloren gaan.

Gelukkig kunnen we ervoor zorgen dat de zoekwoorden doorgaan, zelfs nadat je een item in het raster hebt gekozen, door gebruik te maken van JavaScript en de ingebouwde functies van ASP.NET. Door het gebruik van methoden die DataTables en de weergavestatus van ASP.NET aanvullen, kunnen we de gebruikerservaring soepeler maken.

In de volgende handleiding zullen we bekijken hoe u JavaScript en VB.Net kunt gebruiken om dit te bereiken in een ASP.NET-project. We doorlopen ook een realistisch scenario om u te laten zien hoe u zoekcriteria effectief kunt onderhouden terwijl u uw raster bijwerkt.

Scriptoplossingen begrijpen voor het behouden van zoekcriteria in ASP.NET Grid

Het doel van de aangeboden scripts is om een ​​veelvoorkomend probleem in ASP.NET-applicaties aan te pakken, waarbij gebruikers hun zoekparameters uit het oog verliezen wanneer ze een selectie maken uit een raster. De eerste benadering slaat de zoekinvoer aan de clientzijde op met behulp van JavaScript sessieOpslag functie. De gebruikerservaring wordt verbeterd door deze strategie, die ervoor zorgt dat de zoekterm actief blijft, zelfs nadat de website opnieuw is geladen. Wanneer de pagina opnieuw wordt geladen of een item wordt geselecteerd, kan de in de cache opgeslagen zoekwaarde opnieuw op het raster worden toegepast door de invoer lokaal vast te leggen en op te slaan. Dankzij deze methode hoeft de gebruiker niet steeds dezelfde criteria in te voeren.

Een andere methode maakt gebruik van de serverzijde BekijkStatus functie van ASP.NET. In dit geval wordt de zoekwaarde bewaard in het ViewState-object, dat gegevens over postbacks bewaart. De waarde die in de ViewState wordt bewaard, wordt teruggestuurd naar de pagina wanneer een gebruiker interactie heeft met het raster en een item selecteert. Deze methode garandeert dat de zoekparameters gedurende de hele sessie toegankelijk zijn en gemakkelijk kunnen worden opgenomen in de verwerking aan de serverzijde. Om verlies van zoekinvoer te voorkomen, kan de server vervolgens een script uitvoeren om de zoekopdracht opnieuw toe te passen op het raster aan de clientzijde.

AJAX wordt gebruikt in de derde benadering om het herladen van een volledige pagina te stoppen. Het dynamisch bijwerken van de pagina vindt plaats wanneer een item wordt geselecteerd, wat een asynchrone aanvraag naar de server activeert. Hierdoor blijven de zoekcriteria (die bij het AJAX-verzoek worden opgegeven) intact terwijl het raster wordt vernieuwd. Nadat de update is voltooid, past de JavaScript-functie de zoekwaarde opnieuw toe op het raster. Deze techniek werkt materiaal asynchroon bij, terwijl de staat van het raster behouden blijft om de gebruikerservaring te maximaliseren.

Elk van deze methoden garandeert op een andere manier het behoud van zoekinvoer. Voor eenvoudigere oplossingen aan de clientzijde is de sessionStorage-techniek geschikt, terwijl ViewState een uitgebreidere ASP.NET-strategie biedt. AJAX zorgt ervoor dat gebruikersacties het zoekproces niet verstoren door een balans te bieden tussen updates aan de serverzijde en interactiviteit aan de clientzijde. Elke oplossing voldoet aan de best practices op het gebied van prestaties en bruikbaarheid, met als doel de wrijving tussen gebruikers te minimaliseren en een naadloze ASP.NET grid-gebaseerde data-interactie-ervaring te behouden.

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

Verbetering van de persistentie van rasterzoekopdrachten met ASP.NET en JavaScript

Het behouden van de gemarkeerde status van de geselecteerde items in het raster na een paginavernieuwing of postback is een cruciaal onderdeel van het intact houden van de gebruikerservaring van het ASP.NET-raster. Gebruikers verwachten dat hun selecties op hun plaats blijven terwijl ze communiceren met andere delen van de interface wanneer ze meerdere selecties maken. Dit is vaak moeilijk omdat bepaalde toestanden kunnen worden gereset als gevolg van netwijzigingen. Met behulp van JavaScript en de SchakelViewState in attribuut om de selectiestatus op te slaan en opnieuw toe te passen na postbacks is een manier om dit op te lossen.

Ontwikkelaars kunnen opslag aan de clientzijde gebruiken, zoals lokale opslag of sessieOpslag, om de geselecteerde objecten bij te houden en zoekcriteria op te slaan. Dit is vooral handig in situaties waarin gebruikers meerdere producten tegelijk kiezen. JavaScript kan worden gebruikt om de selectie opnieuw op het raster toe te passen nadat de pagina opnieuw is geladen, door de geselecteerde item-ID's op te slaan. Door te voorkomen dat gebruikersacties verloren gaan, verbetert deze techniek de gehele gebruikerservaring aanzienlijk.

Een betere snelheid is gegarandeerd voor ingewikkeldere rasters, vooral die welke grote datasets beheren, door gebruik te maken van AJAX-updates. Gedeeltelijke wijzigingen kunnen worden aangebracht terwijl de zoekparameters en geselecteerde objecten intact blijven, waardoor het niet nodig is om het hele raster opnieuw te laden. Door te combineren wordt een vloeiendere en interactievere rasterervaring bereikt AJAX met server-side logica, waardoor de website zich dynamisch kan aanpassen aan gebruikersactiviteiten zonder hun workflow te verstoren.