Comment utiliser JavaScript pour conserver les critères de recherche dans une grille ASP.NET après avoir sélectionné des éléments

Optimisation de l'expérience utilisateur dans la recherche et la sélection de grille ASP.NET

Donner aux clients la possibilité de rechercher et de choisir des objets dans une interface de grille est une fonctionnalité fréquente dans les applications ASP.NET. Les développeurs rencontrent cependant fréquemment un problème : la grille s'actualise et les paramètres de recherche sont perdus lorsqu'un élément est sélectionné. Parce qu’ils doivent recommencer leur recherche à chaque fois qu’ils choisissent un nouvel élément, cela peut irriter les utilisateurs.

Il est impératif de conserver les critères de recherche suite à une publication ou une mise à jour de la grille afin d'améliorer la convivialité. Ceci est particulièrement crucial lorsque les consommateurs doivent choisir plusieurs options basées sur les mêmes normes. Le processus est inutilement répété si les termes de recherche sont perdus.

Heureusement, nous pouvons nous assurer que la recherche par mots-clés continue même après avoir sélectionné un élément dans la grille en utilisant JavaScript et les fonctionnalités intégrées d'ASP.NET. Grâce à l'utilisation de méthodes qui complètent DataTables et l'état d'affichage d'ASP.NET, nous pouvons rendre l'expérience utilisateur plus fluide.

Nous verrons comment utiliser JavaScript et VB.Net pour y parvenir dans un projet ASP.NET dans le guide qui suit. Nous passerons également en revue un scénario réel pour vous montrer comment gérer efficacement les critères de recherche lorsque vous mettez à jour votre grille.

Comprendre les solutions de script pour préserver les critères de recherche dans la grille ASP.NET

Le but des scripts proposés est de résoudre un problème courant dans les applications ASP.NET où les utilisateurs perdent la trace de leurs paramètres de recherche lorsqu'ils effectuent une sélection dans une grille. La première approche stocke l'entrée de recherche côté client en utilisant JavaScript sessionStockage fonction. L'expérience utilisateur est améliorée par cette stratégie, qui garantit que la phrase de recherche reste active même après le rechargement du site Web. Lorsque la page se recharge ou qu'un élément est sélectionné, la valeur de recherche mise en cache peut être à nouveau appliquée à la grille en capturant et en enregistrant l'entrée localement. L'utilisateur n'aura pas besoin de continuer à saisir les mêmes critères grâce à cette méthode.

Une autre méthode utilise le côté serveur État d'affichage fonctionnalité d'ASP.NET. Dans ce cas, la valeur de recherche est conservée dans l'objet ViewState, qui préserve les données lors des publications. La valeur conservée dans ViewState est renvoyée à la page lorsqu'un utilisateur interagit avec la grille et sélectionne un élément. Cette méthode garantit que les paramètres de recherche sont accessibles pendant toute la session et sont facilement intégrés dans le traitement côté serveur. Afin d'éviter toute perte de saisie de recherche, le serveur peut ensuite exécuter un script pour réappliquer la recherche à la grille côté client.

AJAX est utilisé dans la troisième approche pour arrêter les rechargements de pleine page. La mise à jour dynamique de la page se produit lorsqu'un élément est sélectionné, ce qui déclenche une requête asynchrone auprès du serveur. Cela permet de conserver les critères de recherche (qui sont fournis avec la requête AJAX) intacts pendant l'actualisation de la grille. Une fois la mise à jour terminée, la fonction JavaScript réapplique la valeur de recherche à la grille. Cette technique met à jour le matériel de manière asynchrone tout en préservant l'état de la grille pour maximiser l'expérience utilisateur.

De manière différente, chacune de ces méthodes garantit la préservation des entrées de recherche. Pour des solutions côté client plus simples, la technique sessionStorage est appropriée, tandis que ViewState propose une stratégie ASP.NET plus complète. AJAX garantit que les actions des utilisateurs n'interfèrent pas avec le processus de recherche en fournissant un équilibre entre les mises à jour côté serveur et l'interactivité côté client. Chaque solution adhère aux meilleures pratiques en matière de performances et de convivialité, dans le but de minimiser les frictions des utilisateurs et de préserver une expérience d'interaction de données transparente basée sur la grille ASP.NET.

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

Amélioration de la persistance de la recherche dans la grille avec ASP.NET et JavaScript

Le maintien de l’état en surbrillance des éléments sélectionnés dans la grille après une actualisation de page ou une publication est un élément crucial pour conserver intacte l’expérience utilisateur de la grille ASP.NET. Les utilisateurs s'attendent à ce que leurs sélections restent en place lorsqu'ils interagissent avec d'autres zones de l'interface lorsqu'ils effectuent plusieurs sélections. Ceci est souvent difficile car certains états peuvent être réinitialisés suite à des modifications du réseau. Utiliser JavaScript et le ActiverViewState L'attribut pour stocker et réappliquer l'état de sélection après les publications est un moyen de résoudre ce problème.

Les développeurs peuvent utiliser le stockage côté client, comme stockage local ou sessionStockage, pour garder une trace des objets qui ont été sélectionnés en plus de stocker les critères de recherche. Ceci est particulièrement utile dans les situations où les utilisateurs choisissent plusieurs produits à la fois. JavaScript peut être utilisé pour réappliquer la sélection à la grille après le rechargement de la page en stockant les ID d'élément sélectionnés. En empêchant la perte des actions de l'utilisateur, cette technique améliore considérablement l'ensemble de l'expérience utilisateur.

Une meilleure vitesse est garantie pour les grilles plus complexes, en particulier celles qui gèrent de grands ensembles de données, grâce à l'utilisation des mises à jour AJAX. Des modifications partielles peuvent être apportées tout en conservant intacts les paramètres de recherche et les objets sélectionnés, évitant ainsi de devoir recharger la grille entière. Une expérience de grille plus fluide et interactive est obtenue en combinant AJAX avec une logique côté serveur, qui permet au site Web de s'adapter dynamiquement aux activités des utilisateurs sans interférer avec leur flux de travail.