Τρόπος χρήσης JavaScript για τη διατήρηση των κριτηρίων αναζήτησης σε ένα πλέγμα ASP.NET αφού επιλέξω στοιχεία

Βελτιστοποίηση της εμπειρίας χρήστη στο ASP.NET Grid Search and Selection

Η παροχή στους πελάτες της δυνατότητας αναζήτησης και επιλογής αντικειμένων μέσα σε μια διεπαφή πλέγματος είναι μια συχνή δυνατότητα στις εφαρμογές ASP.NET. Ωστόσο, οι προγραμματιστές αντιμετωπίζουν συχνά ένα πρόβλημα: το πλέγμα ανανεώνεται και οι παράμετροι αναζήτησης χάνονται όταν επιλέγεται ένα στοιχείο. Επειδή πρέπει να επανεκκινούν την αναζήτησή τους κάθε φορά που επιλέγουν ένα νέο στοιχείο, αυτό μπορεί να ενοχλήσει τους χρήστες.

Είναι επιτακτική ανάγκη να διατηρηθούν τα κριτήρια αναζήτησης μετά από αναδρομή ή ενημέρωση πλέγματος προκειμένου να βελτιωθεί η χρηστικότητα. Αυτό είναι ιδιαίτερα σημαντικό όταν οι καταναλωτές πρέπει να επιλέξουν πολλές επιλογές με βάση τα ίδια πρότυπα. Η διαδικασία επαναλαμβάνεται άσκοπα εάν χαθούν οι όροι αναζήτησης.

Ευτυχώς, μπορούμε να διασφαλίσουμε ότι οι λέξεις-κλειδιά αναζήτησης συνεχίζονται ακόμα και μετά την επιλογή ενός στοιχείου στο πλέγμα, χρησιμοποιώντας JavaScript και τις ενσωματωμένες δυνατότητες του ASP.NET. Μέσω της χρήσης μεθόδων που συμπληρώνουν τους DataTables και την κατάσταση προβολής του ASP.NET, μπορούμε να κάνουμε την εμπειρία χρήστη πιο ομαλή.

Θα δούμε πώς να χρησιμοποιήσετε JavaScript και VB.Net για να το πετύχετε αυτό σε ένα έργο ASP.NET στον οδηγό που ακολουθεί. Θα περάσουμε επίσης από ένα πραγματικό σενάριο για να σας δείξουμε πώς να διατηρείτε αποτελεσματικά τα κριτήρια αναζήτησης καθώς ενημερώνετε το πλέγμα σας.

Κατανόηση λύσεων σεναρίων για τη διατήρηση των κριτηρίων αναζήτησης στο ASP.NET Grid

Ο σκοπός των προσφερόμενων σεναρίων είναι να αντιμετωπίσουν ένα κοινό πρόβλημα στις εφαρμογές ASP.NET όπου οι χρήστες χάνουν την παρακολούθηση των παραμέτρων αναζήτησής τους όταν κάνουν μια επιλογή από ένα πλέγμα. Η πρώτη προσέγγιση αποθηκεύει τα δεδομένα αναζήτησης στην πλευρά του πελάτη χρησιμοποιώντας JavaScript sessionStorage λειτουργία. Η εμπειρία χρήστη βελτιώνεται με αυτήν τη στρατηγική, η οποία διασφαλίζει ότι η φράση αναζήτησης παραμένει ενεργή ακόμη και μετά τη φόρτωση εκ νέου του ιστότοπου. Όταν η σελίδα επαναφορτώνεται ή επιλέγεται ένα στοιχείο, η αποθηκευμένη τιμή αναζήτησης μπορεί να εφαρμοστεί ξανά στο πλέγμα καταγράφοντας και αποθηκεύοντας τα δεδομένα τοπικά. Ο χρήστης δεν θα χρειαστεί να συνεχίσει να εισάγει τα ίδια κριτήρια χάρη σε αυτήν τη μέθοδο.

Μια άλλη μέθοδος χρησιμοποιεί την πλευρά του διακομιστή ViewState χαρακτηριστικό του ASP.NET. Σε αυτήν την περίπτωση, η τιμή αναζήτησης διατηρείται στο αντικείμενο ViewState, το οποίο διατηρεί δεδομένα σε όλες τις επιστροφές. Η τιμή που διατηρείται στο ViewState μεταδίδεται πίσω στη σελίδα όταν ένας χρήστης αλληλεπιδρά με το πλέγμα και επιλέγει ένα στοιχείο. Αυτή η μέθοδος εγγυάται ότι οι παράμετροι αναζήτησης είναι προσβάσιμες για ολόκληρη τη συνεδρία και ενσωματώνονται εύκολα στην επεξεργασία από την πλευρά του διακομιστή. Προκειμένου να αποφευχθεί η απώλεια εισόδου αναζήτησης, ο διακομιστής μπορεί στη συνέχεια να εκτελέσει ένα σενάριο για να εφαρμόσει ξανά την αναζήτηση στο πλέγμα της πλευράς του πελάτη.

ΑΪΑΣ χρησιμοποιείται στην τρίτη προσέγγιση για τη διακοπή της επαναφόρτωσης πλήρους σελίδας. Η δυναμική ενημέρωση της σελίδας πραγματοποιείται όταν επιλέγεται ένα στοιχείο, το οποίο ενεργοποιεί ένα ασύγχρονο αίτημα στον διακομιστή. Αυτό διατηρεί τα κριτήρια αναζήτησης - τα οποία δίνονται με το αίτημα AJAX - σε διακριτικότητα ενώ το πλέγμα ανανεώνεται. Μετά την ολοκλήρωση της ενημέρωσης, η συνάρτηση JavaScript εφαρμόζει ξανά την τιμή αναζήτησης στο πλέγμα. Αυτή η τεχνική ενημερώνει το υλικό ασύγχρονα, ενώ διατηρεί την κατάσταση του πλέγματος για να μεγιστοποιήσει την εμπειρία του χρήστη.

Με διαφορετικό τρόπο, καθεμία από αυτές τις μεθόδους εγγυάται τη διατήρηση των δεδομένων αναζήτησης. Για απλούστερες λύσεις από την πλευρά του πελάτη, η τεχνική sessionStorage είναι κατάλληλη, ενώ το ViewState προσφέρει μια πιο ολοκληρωμένη στρατηγική ASP.NET. Το AJAX διασφαλίζει ότι οι ενέργειες των χρηστών δεν παρεμβαίνουν στη διαδικασία αναζήτησης, παρέχοντας μια ισορροπία μεταξύ των ενημερώσεων από την πλευρά του διακομιστή και της αλληλεπίδρασης από την πλευρά του πελάτη. Κάθε λύση ακολουθεί τις βέλτιστες πρακτικές απόδοσης και χρηστικότητας, με στόχο την ελαχιστοποίηση της τριβής των χρηστών και τη διατήρηση μιας απρόσκοπτης εμπειρίας αλληλεπίδρασης δεδομένων βάσει δικτύου 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();
      }
    });
  });
});

Βελτίωση της εμμονής αναζήτησης πλέγματος με ASP.NET και JavaScript

Η διατήρηση της επισημασμένης κατάστασης των επιλεγμένων στοιχείων στο πλέγμα μετά από ανανέωση σελίδας ή αναδρομή είναι ένα κρίσιμο μέρος για να διατηρηθεί ανέπαφη η εμπειρία χρήστη του δικτύου ASP.NET. Οι χρήστες αναμένουν ότι οι επιλογές τους θα παραμείνουν στη θέση τους καθώς αλληλεπιδρούν με άλλες περιοχές της διεπαφής όταν κάνουν πολλαπλές επιλογές. Αυτό είναι συχνά δύσκολο, καθώς ορισμένες καταστάσεις ενδέχεται να επαναφέρονται ως αποτέλεσμα τροποποιήσεων του πλέγματος. Χρησιμοποιώντας JavaScript και το EnableViewState Το χαρακτηριστικό για την αποθήκευση και την εκ νέου εφαρμογή της κατάστασης επιλογής μετά τις επιστροφές είναι ένας τρόπος για να λυθεί αυτό.

Οι προγραμματιστές μπορούν να χρησιμοποιούν χώρο αποθήκευσης από την πλευρά του πελάτη, όπως π.χ τοπική αποθήκευση ή sessionStorage, για να παρακολουθείτε τα αντικείμενα που έχουν επιλεγεί εκτός από την αποθήκευση κριτηρίων αναζήτησης. Αυτό είναι ιδιαίτερα χρήσιμο σε περιπτώσεις όπου οι χρήστες επιλέγουν πολλά προϊόντα ταυτόχρονα. Η JavaScript μπορεί να χρησιμοποιηθεί για την εκ νέου εφαρμογή της επιλογής στο πλέγμα μετά την επαναφόρτωση της σελίδας, αποθηκεύοντας τα επιλεγμένα αναγνωριστικά στοιχείων. Αποτρέποντας την απώλεια των ενεργειών χρήστη, αυτή η τεχνική βελτιώνει σημαντικά ολόκληρη την εμπειρία χρήστη.

Καλύτερη ταχύτητα είναι εγγυημένη για πιο περίπλοκα πλέγματα, ειδικά εκείνα που διαχειρίζονται μεγάλα σύνολα δεδομένων, χρησιμοποιώντας ενημερώσεις AJAX. Μπορούν να γίνουν μερικές τροποποιήσεις, διατηρώντας ανέπαφα τις παραμέτρους αναζήτησης και τα επιλεγμένα αντικείμενα, εξοικονομώντας την ανάγκη επαναφόρτωσης ολόκληρου του πλέγματος. Μια πιο ρευστή και διαδραστική εμπειρία πλέγματος επιτυγχάνεται με το συνδυασμό ΑΪΑΣ με λογική από την πλευρά του διακομιστή, η οποία επιτρέπει στον ιστότοπο να προσαρμόζεται δυναμικά στις δραστηριότητες των χρηστών χωρίς να παρεμβαίνει στη ροή εργασίας τους.