Jak używać JavaScript do utrzymywania kryteriów wyszukiwania w siatce ASP.NET po wybraniu elementów

Optymalizacja doświadczenia użytkownika w wyszukiwaniu i wybieraniu siatki ASP.NET

Zapewnienie klientom możliwości wyszukiwania i wybierania obiektów w interfejsie siatki jest częstą funkcją aplikacji ASP.NET. Programiści jednak często napotykają problem: siatka odświeża się, a parametry wyszukiwania są tracone po wybraniu elementu. Ponieważ za każdym razem, gdy wybierają nowy przedmiot, muszą rozpoczynać wyszukiwanie od nowa, może to irytować użytkowników.

Aby poprawić użyteczność, konieczne jest zachowanie kryteriów wyszukiwania po ogłoszeniu zwrotnym lub aktualizacji siatki. Jest to szczególnie istotne, gdy konsumenci muszą wybierać kilka opcji w oparciu o te same standardy. Jeśli wyszukiwane hasła zostaną utracone, proces jest niepotrzebnie powtarzany.

Na szczęście możemy mieć pewność, że słowa kluczowe wyszukiwania będą kontynuowane nawet po wybraniu elementu w siatce, wykorzystując JavaScript i wbudowane funkcje ASP.NET. Dzięki zastosowaniu metod, które uzupełniają DataTables i stan widoku ASP.NET, możemy sprawić, że doświadczenie użytkownika będzie bardziej płynne.

W poniższym przewodniku przyjrzymy się, jak używać JavaScript i VB.Net, aby osiągnąć ten cel w projekcie ASP.NET. Przeanalizujemy także rzeczywisty scenariusz, aby pokazać, jak skutecznie utrzymywać kryteria wyszukiwania podczas aktualizacji siatki.

Zrozumienie rozwiązań skryptowych służących do zachowania kryteriów wyszukiwania w siatce ASP.NET

Celem oferowanych skryptów jest rozwiązanie częstego problemu w aplikacjach ASP.NET, w którym użytkownicy tracą kontrolę nad parametrami wyszukiwania podczas dokonywania wyboru z siatki. Pierwsze podejście przechowuje dane wejściowe wyszukiwania po stronie klienta za pomocą JavaScript Pamięć sesji funkcjonować. Strategia ta poprawia komfort użytkownika, zapewniając, że wyszukiwana fraza pozostanie aktywna nawet po ponownym załadowaniu witryny. Po ponownym załadowaniu strony lub wybraniu elementu wartość wyszukiwania z pamięci podręcznej można ponownie zastosować do siatki, przechwytując i zapisując dane wejściowe lokalnie. Dzięki tej metodzie użytkownik nie będzie musiał ciągle wpisywać tych samych kryteriów.

Inna metoda wykorzystuje stronę serwera Wyświetl stan funkcja ASP.NET. W tym przypadku wyszukiwana wartość jest przechowywana w obiekcie ViewState, który zachowuje dane podczas ogłaszania zwrotnego. Wartość przechowywana w ViewState jest przesyłana z powrotem na stronę, gdy użytkownik wchodzi w interakcję z siatką i wybiera element. Metoda ta gwarantuje, że parametry wyszukiwania są dostępne dla całej sesji i można je łatwo włączyć do przetwarzania po stronie serwera. Aby zapobiec utracie danych wejściowych wyszukiwania, serwer może następnie uruchomić skrypt, aby ponownie zastosować wyszukiwanie do siatki po stronie klienta.

AJAKS jest używany w trzecim podejściu do zatrzymywania przeładowywania całej strony. Dynamiczna aktualizacja strony następuje po wybraniu elementu, co wyzwala asynchroniczne żądanie do serwera. Dzięki temu kryteria wyszukiwania — podane w żądaniu AJAX — pozostają niezmienione podczas odświeżania siatki. Po zakończeniu aktualizacji funkcja JavaScript ponownie stosuje wartość wyszukiwania do siatki. Ta technika aktualizuje materiał asynchronicznie, zachowując jednocześnie stan siatki, aby zmaksymalizować wygodę użytkownika.

W inny sposób każda z tych metod gwarantuje zachowanie wyników wyszukiwania. W przypadku prostszych rozwiązań po stronie klienta odpowiednia jest technika sessionStorage, natomiast ViewState oferuje bardziej wszechstronną strategię ASP.NET. AJAX zapewnia, że ​​działania użytkownika nie zakłócają procesu wyszukiwania, zapewniając równowagę pomiędzy aktualizacjami po stronie serwera i interakcją po stronie klienta. Każde rozwiązanie jest zgodne z najlepszymi praktykami dotyczącymi wydajności i użyteczności, a celem jest zminimalizowanie tarć użytkowników i zachowanie płynnej interakcji z danymi w oparciu o siatkę 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();
      }
    });
  });
});

Zwiększanie trwałości wyszukiwania siatki za pomocą ASP.NET i JavaScript

Utrzymanie wyróżnionego stanu wybranych elementów w siatce po odświeżeniu strony lub ogłaszaniu zwrotnym jest kluczową częścią utrzymania nienaruszonego środowiska użytkownika siatki ASP.NET. Użytkownicy oczekują, że ich wybory pozostaną niezmienione podczas interakcji z innymi obszarami interfejsu, gdy dokonują wielokrotnych wyborów. Jest to często trudne, ponieważ niektóre stany mogą zostać zresetowane w wyniku modyfikacji sieci. Korzystanie z JavaScript i Włącz stan widoku Jednym ze sposobów rozwiązania tego problemu jest atrybut do przechowywania i ponownego stosowania stanu wyboru po ogłaszaniu zwrotnym.

Programiści mogą korzystać z pamięci po stronie klienta, np lokalny magazyn Lub Pamięć sesji, aby śledzić wybrane obiekty i przechowywać kryteria wyszukiwania. Jest to szczególnie pomocne w sytuacjach, gdy użytkownicy wybierają kilka produktów na raz. JavaScriptu można użyć do ponownego zastosowania zaznaczenia do siatki po ponownym załadowaniu strony poprzez zapisanie identyfikatorów wybranych elementów. Zapobiegając utracie działań użytkownika, technika ta znacznie poprawia całe doświadczenie użytkownika.

Lepsza prędkość jest gwarantowana w przypadku bardziej skomplikowanych sieci, szczególnie tych, które zarządzają dużymi zbiorami danych, dzięki zastosowaniu aktualizacji AJAX. Można dokonać częściowych modyfikacji, zachowując niezmienione parametry wyszukiwania i wybrane obiekty, co pozwala uniknąć konieczności ponownego ładowania całej siatki. Bardziej płynne i interaktywne wrażenia z siatki uzyskuje się poprzez łączenie AJAKS z logiką serwerową, która umożliwia dynamiczne dostosowywanie się serwisu do działań użytkowników, bez zakłócania ich pracy.