JavaScriptin käyttäminen hakukriteerien ylläpitämiseen ASP.NET-ruudukossa, kun olen valinnut kohteet

ASP.NET Grid Search and Selection -käyttökokemuksen optimointi

Asiakkaiden mahdollisuus etsiä ja valita kohteita ruudukkorajapinnassa on yleinen ominaisuus ASP.NET-sovelluksissa. Kehittäjät kohtaavat kuitenkin usein ongelman: ruudukko päivittyy ja hakuparametrit menetetään, kun kohde valitaan. Koska heidän on aloitettava haku uudelleen aina, kun he valitsevat uuden kohteen, tämä voi ärsyttää käyttäjiä.

Hakuehdot on ehdottomasti säilytettävä takaisinlähetyksen tai ruudukon päivityksen jälkeen käytettävyyden parantamiseksi. Tämä on erityisen tärkeää silloin, kun kuluttajien on valittava useita vaihtoehtoja samojen standardien perusteella. Prosessi toistetaan tarpeettomasti, jos hakutermit katoavat.

Onneksi voimme varmistaa, että hakusanat jatkuvat myös kohteen valitsemisen jälkeen käyttämällä JavaScriptiä ja ASP.NETin sisäänrakennettuja ominaisuuksia. Käyttämällä DataTablesia ja ASP.NETin näkymätilaa täydentäviä menetelmiä voimme tehdä käyttökokemuksesta sujuvamman.

Seuraavassa oppaassa tarkastellaan, kuinka JavaScriptin ja VB.Netin avulla tämä saavutetaan ASP.NET-projektissa. Käymme myös läpi tosielämän skenaarion näyttääksemme, kuinka voit ylläpitää hakuehtoja tehokkaasti, kun päivität ruudukkoasi.

Komentosarjaratkaisujen ymmärtäminen hakukriteerien säilyttämiseen ASP.NET Gridissä

Tarjottujen komentosarjojen tarkoituksena on ratkaista yleinen ongelma ASP.NET-sovelluksissa, joissa käyttäjät menettävät hakuparametrejaan tehdessään valinnan ruudukosta. Ensimmäinen lähestymistapa tallentaa hakusyötteen asiakaspuolelle JavaScriptin avulla sessionStorage toiminto. Tämä strategia parantaa käyttökokemusta, mikä varmistaa, että hakulauseke pysyy aktiivisena myös verkkosivuston uudelleenlatauksen jälkeen. Kun sivu latautuu uudelleen tai kohde valitaan, välimuistissa olevaa hakuarvoa voidaan käyttää uudelleen ruudukossa sieppaamalla ja tallentamalla syöte paikallisesti. Tämän menetelmän ansiosta käyttäjän ei tarvitse syöttää samoja kriteerejä.

Toinen menetelmä käyttää palvelinpuolta ViewState ASP.NETin ominaisuus. Tässä tapauksessa hakuarvo säilyy ViewState-objektissa, joka säilyttää tiedot takaisinlähetysten välillä. ViewState-tilassa säilytetty arvo lähetetään takaisin sivulle, kun käyttäjä on vuorovaikutuksessa ruudukon kanssa ja valitsee kohteen. Tämä menetelmä takaa, että hakuparametrit ovat käytettävissä koko istunnon ajan ja että ne sisällytetään helposti palvelinpuolen käsittelyyn. Estääkseen haun syötteen häviämisen palvelin voi sitten suorittaa komentosarjan hakeakseen haun uudelleen asiakaspuolen verkkoon.

AJAX käytetään kolmannessa lähestymistavassa koko sivun uudelleenlatausten pysäyttämiseen. Sivun dynaaminen päivitys tapahtuu, kun kohde valitaan, mikä laukaisee asynkronisen pyynnön palvelimelle. Tämä pitää hakukriteerit – jotka annetaan AJAX-pyynnön mukana – tiukkana ruudukon päivittyessä. Kun päivitys on valmis, JavaScript-funktio lisää hakuarvon uudelleen ruudukkoon. Tämä tekniikka päivittää materiaalia asynkronisesti säilyttäen samalla ruudukon tilan käyttökokemuksen maksimoimiseksi.

Eri tavalla kukin näistä menetelmistä takaa hakusyötteen säilymisen. Yksinkertaisempiin asiakaspuolen ratkaisuihin sessionStorage-tekniikka on sopiva, kun taas ViewState tarjoaa kattavamman ASP.NET-strategian. AJAX varmistaa, että käyttäjien toimet eivät häiritse hakuprosessia tarjoamalla tasapainon palvelinpuolen päivitysten ja asiakaspuolen vuorovaikutteisuuden välillä. Jokainen ratkaisu noudattaa suorituskyvyn ja käytettävyyden parhaita käytäntöjä, ja tavoitteena on minimoida käyttäjien kitka ja säilyttää saumaton ASP.NET-grid-pohjainen tietojen vuorovaikutuskokemus.

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

Grid-haun pysyvyyden parantaminen ASP.NET:illä ja JavaScriptillä

Valittujen kohteiden korostetun tilan säilyttäminen ruudukossa sivun päivityksen tai takaisinlähetyksen jälkeen on tärkeä osa ASP.NET-ruudukon käyttökokemuksen säilyttämistä. Käyttäjät odottavat valintansa pysyvän paikoillaan, kun he ovat vuorovaikutuksessa käyttöliittymän muiden osien kanssa tehdessään useita valintoja. Tämä on usein vaikeaa, koska tietyt tilat voivat nollata ruudukon muutosten seurauksena. JavaScriptin ja Ota ViewState käyttöön attribuutti tallentaa ja ottaa uudelleen käyttöön valintatilan takaisinlähetysten jälkeen on yksi tapa ratkaista tämä.

Kehittäjät voivat käyttää asiakaspuolen tallennustilaa, kuten localStorage tai sessionStorage, pitääksesi kirjaa valituista kohteista hakuehtojen tallentamisen lisäksi. Tämä on erityisen hyödyllistä tilanteissa, joissa käyttäjät valitsevat useita tuotteita kerralla. JavaScriptiä voidaan käyttää valinnan lisäämiseen ruudukkoon sivun uudelleenlatauksen jälkeen tallentamalla valitut tuotetunnukset. Estämällä käyttäjän toimien katoamisen tämä tekniikka parantaa huomattavasti koko käyttökokemusta.

Parempi nopeus on taattu monimutkaisemmille ruudukoille, erityisesti niille, jotka hallitsevat suuria tietojoukkoja käyttämällä AJAX-päivityksiä. Osittaisia ​​muutoksia voidaan tehdä samalla, kun hakuparametrit ja valitut objektit säilyvät ennallaan, jolloin koko ruudukko ei tarvitse ladata uudelleen. Sujuvampi ja vuorovaikutteisempi verkkokokemus saavutetaan yhdistämällä AJAX palvelinpuolen logiikalla, jonka avulla verkkosivusto voi mukautua dynaamisesti käyttäjien toimintaan häiritsemättä heidän työnkulkuaan.