Kā izmantot JavaScript, lai saglabātu meklēšanas kritērijus ASP.NET režģī pēc tam, kad esmu atlasījis vienumus

Lietotāju pieredzes optimizēšana ASP.NET režģa meklēšanā un atlasē

ASP.NET lietojumprogrammās bieži tiek nodrošināta iespēja klientiem meklēt un izvēlēties objektus režģa saskarnē. Tomēr izstrādātāji bieži saskaras ar problēmu: režģis tiek atsvaidzināts un meklēšanas parametri tiek zaudēti, atlasot vienumu. Tā kā viņiem ir jāatsāk meklēšana katru reizi, kad viņi izvēlas jaunu vienumu, tas var kairināt lietotājus.

Lai uzlabotu lietojamību, ir obligāti jāsaglabā meklēšanas kritēriji pēc atpakaļizsūtīšanas vai režģa atjauninājuma. Tas ir īpaši svarīgi, ja patērētājiem ir jāizvēlas vairākas iespējas, pamatojoties uz tiem pašiem standartiem. Ja meklēšanas vienumi tiek pazaudēti, process tiek nevajadzīgi atkārtots.

Par laimi, izmantojot JavaScript un ASP.NET iebūvētās funkcijas, mēs varam nodrošināt, ka meklēšanas atslēgvārdi turpinās pat pēc vienuma atlasīšanas režģī. Izmantojot metodes, kas papildina DataTables, un ASP.NET skata stāvokli, mēs varam padarīt lietotāja pieredzi vienmērīgāku.

Tālāk esošajā rokasgrāmatā apskatīsim, kā izmantot JavaScript un VB.Net, lai to panāktu ASP.NET projektā. Mēs arī izskatīsim reālu scenāriju, lai parādītu, kā efektīvi uzturēt meklēšanas kritērijus, atjauninot režģi.

Izpratne par skriptu risinājumiem meklēšanas kritēriju saglabāšanai ASP.NET Grid

Piedāvāto skriptu mērķis ir risināt izplatītu problēmu ASP.NET lietojumprogrammās, kad lietotāji, veicot atlasi no režģa, zaudē meklēšanas parametrus. Pirmā pieeja saglabā meklēšanas ievadi klienta pusē, izmantojot JavaScript sessionStorage funkciju. Šī stratēģija uzlabo lietotāja pieredzi, kas nodrošina, ka meklēšanas frāze paliek aktīva arī pēc vietnes atkārtotas ielādes. Kad lapa tiek atkārtoti ielādēta vai atlasīts vienums, kešatmiņā saglabāto meklēšanas vērtību var atkal lietot režģim, tverot un saglabājot ievadi lokāli. Pateicoties šai metodei, lietotājam nebūs jāievada tie paši kritēriji.

Vēl viena metode izmanto servera pusi ViewState ASP.NET funkcija. Šajā gadījumā meklēšanas vērtība tiek saglabāta objektā ViewState, kas saglabā datus atpakaļ izlikšanā. ViewState saglabātā vērtība tiek pārsūtīta atpakaļ uz lapu, kad lietotājs mijiedarbojas ar režģi un atlasa vienumu. Šī metode garantē, ka meklēšanas parametri ir pieejami visas sesijas laikā un ir viegli iekļauti servera puses apstrādē. Lai novērstu meklēšanas ievades zudumu, serveris pēc tam var palaist skriptu, lai atkārtoti lietotu meklēšanu klienta puses režģī.

AJAX tiek izmantots trešajā pieejā, lai apturētu pilnas lapas atkārtotu ielādi. Lapas dinamiskā atjaunināšana notiek, kad tiek atlasīts vienums, kas aktivizē asinhronu pieprasījumu serverim. Tādējādi meklēšanas kritēriji, kas tiek sniegti kopā ar AJAX pieprasījumu, tiek saglabāti taktiski, kamēr režģis tiek atsvaidzināts. Kad atjaunināšana ir pabeigta, JavaScript funkcija režģim atkārtoti piemēro meklēšanas vērtību. Šis paņēmiens materiālu atjaunina asinhroni, vienlaikus saglabājot režģa stāvokli, lai maksimāli palielinātu lietotāja pieredzi.

Atšķirīgā veidā katra no šīm metodēm garantē meklēšanas ievades saglabāšanu. Vienkāršākiem klienta puses risinājumiem ir piemērota sessionStorage tehnika, savukārt ViewState piedāvā visaptverošāku ASP.NET stratēģiju. AJAX nodrošina, ka lietotāja darbības netraucē meklēšanas procesu, nodrošinot līdzsvaru starp servera puses atjauninājumiem un klienta puses interaktivitāti. Katrs risinājums atbilst veiktspējas un lietojamības paraugpraksei, lai samazinātu lietotāju berzi un saglabātu nevainojamu ASP.NET režģa datu mijiedarbības pieredzi.

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

Režģa meklēšanas noturības uzlabošana, izmantojot ASP.NET un JavaScript

Atlasīto vienumu izceltā stāvokļa saglabāšana režģī pēc lapas atsvaidzināšanas vai atpakaļizlikšanas ir būtiska ASP.NET režģa lietotāja pieredzes saglabāšanai. Lietotāji paredz, ka viņu atlases paliks vietā, mijiedarbojoties ar citām saskarnes daļām, veicot vairākas atlases. Tas bieži ir sarežģīti, jo daži stāvokļi var atiestatīt režģa modifikāciju rezultātā. Izmantojot JavaScript un Iespējot ViewState atribūts, lai saglabātu un atkārtoti lietotu atlases stāvokli pēc atpakaļizsūtīšanas, ir viens no veidiem, kā to atrisināt.

Izstrādātāji var izmantot klienta puses krātuvi, piemēram vietējāStorage vai sessionStorage, lai sekotu līdzi atlasītajiem objektiem papildus meklēšanas kritēriju saglabāšanai. Tas ir īpaši noderīgi situācijās, kad lietotāji izvēlas vairākus produktus vienlaikus. JavaScript var izmantot, lai atkārtoti lietotu atlasi režģī pēc lapas atkārtotas ielādes, saglabājot atlasīto vienumu ID. Novēršot lietotāja darbību zaudēšanu, šī metode ievērojami uzlabo visu lietotāja pieredzi.

Labāks ātrums tiek garantēts sarežģītākiem režģiem, īpaši tiem, kas pārvalda lielas datu kopas, izmantojot AJAX atjauninājumus. Daļējas modifikācijas var veikt, saglabājot neskartus meklēšanas parametrus un atlasītos objektus, tādējādi ietaupot nepieciešamību atkārtoti ielādēt visu režģi. Apvienojot, tiek panākta plūstošāka un interaktīvāka režģa pieredze AJAX ar servera puses loģiku, kas ļauj vietnei dinamiski pielāgoties lietotāju darbībām, netraucējot viņu darbplūsmai.