Optimalisering av brukeropplevelse i ASP.NET Grid Search and Selection
Å gi kundene muligheten til å søke og velge objekter innenfor et grid-grensesnitt er en hyppig funksjon i ASP.NET-applikasjoner. Utviklere støter imidlertid ofte på et problem: rutenettet oppdateres og søkeparametrene går tapt når et element velges. Fordi de må starte søket på nytt hver gang de velger et nytt element, kan dette irritere brukere.
Det er viktig å bevare søkekriteriene etter en postback eller rutenettoppdatering for å forbedre brukervennligheten. Dette er spesielt avgjørende når forbrukere skal velge flere alternativer basert på samme standarder. Prosessen gjentas unødvendig hvis søkeordene går tapt.
Heldigvis kan vi sørge for at søkeordene fortsetter selv etter å ha valgt et element i rutenettet ved å bruke JavaScript og de innebygde funksjonene i ASP.NET. Gjennom bruk av metoder som utfyller DataTables og visningstilstanden til ASP.NET, kan vi gjøre brukeropplevelsen mer smidig.
Vi skal se på hvordan du bruker JavaScript og VB.Net for å oppnå dette i et ASP.NET-prosjekt i veiledningen som følger. Vi vil også gå gjennom et virkelighetsscenario for å vise deg hvordan du effektivt opprettholder søkekriterier mens du oppdaterer rutenettet ditt.
| Kommando | Eksempel på bruk |
|---|---|
| sessionStorage.getItem() | Søkeparametrene kan hentes med denne kommandoen fra nettleserens øktlagring. I dette tilfellet henter den søkeverdien som tidligere ble oppgitt og sørger for at søkefeltet fylles ut igjen etter en sideoppdatering eller rutenettoppdatering. |
| sessionStorage.setItem() | Lagrer gjeldende søket i øktlagringen til nettleseren. Dette forhindrer at søkeparameterne går tapt i tilfelle brukeren velger et element eller ASP.NET-nettverket poster tilbake. |
| ScriptManager.RegisterStartupScript() | Registrerer og kjører et ASP.NET-skript på klientsiden fra serveren. For å lagre søkeverdien i rutenettets søkeboks, brukes den her til å bruke de lagrede søkekriteriene enten ved sideinnlasting eller etter en tilbakesending. |
| DataTable().search() | Etter en oppdatering eller sideinnlasting, brukes den hurtigbufrede søkeverdien tilbake til rutenettet ved å bruke denne datatabellmetoden. Det garanterer at rutenettet er filtrert i henhold til søket som ble lagt inn tidligere. |
| DataTable().draw() | Bruker søkekriteriene og tegner datatabellen på nytt. Når siden oppdateres eller oppdateres ved hjelp av AJAX eller en annen teknikk, er denne kommandoen nødvendig for å bruke søkeordene på nytt og vise de filtrerte dataene. |
| on('keyup') | Legger til en hendelsesbehandler i søkeinndataboksen slik at hvert tastetrykk blir registrert. I dette tilfellet sikrer den at søkeverdien opprettholdes selv om rutenettet oppdateres eller lastes på nytt ved å oppdatere øktlageret med gjeldende søkeinndata. |
| __doPostBack() | Denne ASP.NET-funksjonen sender data tilbake til serveren ved å bruke JavaScript for å starte en tilbakesending. Når et element i rutenettet er valgt, brukes skriptet til å kommunisere gjeldende søkeverdi til serveren, og garanterer at søketilstanden opprettholdes under prosesser på serversiden. |
| $.ajax() | Sender serveren en asynkron HTTP-forespørsel. I dette tilfellet hjelper det med å bevare søkeinndataene mens du oppdaterer spesifikke områder på nettstedet (som rutenettet) med AJAX ved å sende søkekriteriene til serveren uten å laste hele siden på nytt. |
Forstå skriptløsninger for å bevare søkekriterier i ASP.NET Grid
Hensikten med de tilbudte skriptene er å løse et vanlig problem i ASP.NET-applikasjoner der brukere mister oversikten over søkeparameterne når de gjør et valg fra et rutenett. Den første tilnærmingen lagrer søkeinndata på klientsiden ved å bruke JavaScript sessionStorage funksjon. Brukeropplevelsen forbedres av denne strategien, som sørger for at søkefrasen forblir aktiv selv etter at nettsiden er lastet inn på nytt. Når siden lastes inn på nytt eller et element er valgt, kan den bufrede søkeverdien brukes på rutenettet igjen ved å fange opp og lagre inndataene lokalt. Brukeren trenger ikke fortsette å angi de samme kriteriene takket være denne metoden.
En annen metode bruker serversiden ViewState funksjonen til ASP.NET. I dette tilfellet beholdes søkeverdien i ViewState-objektet, som bevarer data på tvers av postbacks. Verdien som holdes i ViewState overføres tilbake til siden når en bruker samhandler med rutenettet og velger et element. Denne metoden garanterer at søkeparametrene er tilgjengelige for hele økten og enkelt integreres i prosesseringen på serversiden. For å forhindre tap av søkeinndata, kan serveren deretter kjøre et skript for å bruke søket på nytt til rutenettet på klientsiden.
AJAX brukes i den tredje tilnærmingen for å stoppe helsideinnlastinger. Den dynamiske oppdateringen av siden skjer når et element er valgt, noe som utløser en asynkron forespørsel til serveren. Dette holder søkekriteriene – som er gitt med AJAX-forespørselen – i takt mens rutenettet oppdateres. Etter at oppdateringen er fullført, bruker JavaScript-funksjonen søkeverdien på rutenettet på nytt. Denne teknikken oppdaterer materiale asynkront samtidig som den bevarer rutenettets tilstand for å maksimere brukeropplevelsen.
På en annen måte garanterer hver av disse metodene bevaring av søkeinndata. For enklere klientsideløsninger er sessionStorage-teknikken passende, mens ViewState tilbyr en mer omfattende ASP.NET-strategi. AJAX sikrer at brukerhandlinger ikke forstyrrer søkeprosessen ved å gi en balanse mellom serversideoppdateringer og klientsideinteraktivitet. Hver løsning følger de beste praksisene for ytelse og brukervennlighet, med målet om å minimere brukerfriksjon og bevare en sømløs ASP.NET-nettbasert datainteraksjonsopplevelse.
Opprettholde søkekriterier i ASP.NET Grid etter varevalg
Tilnærming 1: Bruke JavaScript med øktlagring (klientsiden)
// 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());});});
Beholde søkeinndata under postbacks i ASP.NET
Tilnærming 2: Bruk av ASP.NET ViewState (Server-Side)
' VB.NET Code-Behind: Store search criteria in ViewStateProtected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.LoadIf Not IsPostBack ThenViewState("SearchValue") = String.EmptyEnd IfEnd SubProtected Sub chkSelect_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs)' Retain search criteria in ViewStateDim 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());});});
Bevare søkekriterier ved å bruke AJAX for å forhindre fullsideinnlasting
Tilnærming 3: AJAX for delvis sideoppdateringer
// 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();}});});});
Forbedre Grid Search Persistence med ASP.NET og JavaScript
Å opprettholde den uthevede tilstanden til de valgte elementene i rutenettet etter en sideoppdatering eller postback er en avgjørende del av å holde brukeropplevelsen for ASP.NET-nettverket intakt. Brukere forventer at valgene deres forblir på plass når de samhandler med andre områder av grensesnittet når de gjør flere valg. Dette er ofte vanskelig siden visse tilstander kan tilbakestilles som et resultat av nettmodifikasjoner. Ved å bruke JavaScript og EnableViewState attributt for å lagre og bruke utvalgstilstanden på nytt etter postbacks er en måte å løse dette på.
Utviklere kan bruke lagring på klientsiden, som lokal lagring eller sessionStorage, for å holde styr på objektene som er plukket i tillegg til å lagre søkekriterier. Dette er spesielt nyttig i situasjoner der brukere velger flere produkter samtidig. JavaScript kan brukes til å bruke valget på nytt på rutenettet etter at siden er lastet inn på nytt ved å lagre de valgte element-ID-ene. Ved å forhindre at brukerhandlinger går tapt, forbedrer denne teknikken hele brukeropplevelsen betraktelig.
Bedre hastighet er garantert for mer intrikate rutenett, spesielt de som administrerer store datasett, ved å bruke AJAX-oppdateringer. Delvis modifikasjoner kan gjøres mens du holder søkeparametere og utvalgte objekter intakte, noe som sparer behovet for å laste hele rutenettet på nytt. En mer flytende og interaktiv grid-opplevelse oppnås ved å kombinere AJAX med logikk på serversiden, som gjør at nettsiden kan tilpasse seg dynamisk til brukeraktiviteter uten å forstyrre arbeidsflyten deres.
Ofte stilte spørsmål og deres svar for å bevare søk og utvalg i ASP.NET Grids
- Hvordan kan jeg opprettholde søkekriteriene etter en tilbakesending?
- Søkekriterier kan bevares mellom postbacks ved å lagre søkeinndata i sessionStorage eller ViewState.
- Når nettstedet oppdateres, kan jeg opprettholde valgene mine i rutenettet?
- Ja, ved å bruke JavaScript for å bruke de valgte vare-ID-ene på nytt når siden lastes inn på nytt og lagre dem i localStorage eller sessionStorage.
- Når du velger rutenettelementer, er det en måte å stoppe siden fra å lastes helt inn på nytt?
- For delvis sideoppdateringer, bruk AJAX for å unngå at rutenettet lastes helt inn på nytt og bevare søkeparametrene.
- Kan sorterings- og personsøkingsvalg bevares mellom postbacks?
- Ja, ansette DataTables; alternativt bruke sessionStorage eller den ViewState eiendom for å opprettholde tilstanden.
- Varevalg i rutenettet og søkepersistens sammen?
- Ja, du kan bruke JavaScript til å bruke søkekriteriene og utvalgte elementer på nytt ved å laste inn siden på nytt etter å ha lagret dem sessionStorage.
Siste tanker om søk og utvalg i ASP.NET Grids
Forbedring av brukeropplevelsen i ASP.NET-nettverk krever at søkekriteriene holdes på plass når elementer er valgt. Strategier på klientsiden og serversiden garanterer at brukerne opprettholder søkeinndata under postbacking. Dette resulterer i et mer sømløst og brukervennlig grensesnitt.
Bevare søkeinndata og valgte elementer, enten ved ViewState oppbevaring eller JavaScript lagring, er målet. Dette bør minimere irritasjon. Ved å bruke disse teknikkene kan du opprettholde den dynamiske og brukervennlige naturen til de rutenettbaserte appene dine, samtidig som du forbedrer den generelle brukervennligheten.
Referanser og kildemateriale for ASP.NET Grid Search Persistence
- Detaljert informasjon om ASP.NET ViewState og hvordan den bevarer data mellom postbacks ble hentet fra Microsofts offisielle dokumentasjon .
- De Datatabeller integrasjon brukt i JavaScript-søkefunksjonaliteten ble referert fra DataTables offisielle dokumentasjon .
- Bruken av sessionStorage i JavaScript for lagring av data på klientsiden ble utforsket ved å bruke eksempler fra MDN Web Docs .
- Veiledning om implementering AJAX for å forhindre sideinnlasting mens du opprettholder rutenettstatus ble samlet fra W3Schools AJAX-opplæring .