Öğeleri Seçtikten Sonra ASP.NET Izgarasında Arama Ölçütlerini Korumak için JavaScript Nasıl Kullanılır

ASP.NET Izgara Arama ve Seçiminde Kullanıcı Deneyimini Optimize Etme

Müşterilere ızgara arayüzü içindeki nesneleri arama ve seçme yeteneği vermek, ASP.NET uygulamalarında sık görülen bir özelliktir. Ancak geliştiriciler sıklıkla bir sorunla karşılaşıyor: Bir öğe seçildiğinde ızgara yenileniyor ve arama parametreleri kayboluyor. Her yeni öğe seçtiklerinde aramayı yeniden başlatmak zorunda kaldıklarından bu durum kullanıcıları rahatsız edebilir.

Kullanılabilirliği artırmak için bir geri gönderme veya tablo güncellemesinin ardından arama kriterlerini korumak zorunludur. Bu, özellikle tüketicilerin aynı standartlara göre birden fazla seçenek seçmesi gerektiğinde çok önemlidir. Arama terimleri kaybolursa süreç gereksiz yere tekrarlanır.

Neyse ki, JavaScript'i ve ASP.NET'in yerleşik özelliklerini kullanarak, ızgaradaki bir öğeyi seçtikten sonra bile arama anahtar kelimelerinin devam etmesini sağlayabiliriz. DataTable'ları ve ASP.NET'in görünüm durumunu tamamlayan yöntemlerin kullanılmasıyla kullanıcı deneyimini daha sorunsuz hale getirebiliriz.

Bunu bir ASP.NET projesinde gerçekleştirmek için JavaScript ve VB.Net'in nasıl kullanılacağına aşağıdaki kılavuzda bakacağız. Ayrıca, kılavuzunuzu güncellerken arama kriterlerini etkili bir şekilde nasıl koruyacağınızı göstermek için gerçek dünya senaryosunu da inceleyeceğiz.

ASP.NET Grid'de Arama Kriterlerini Korumak için Komut Dosyası Çözümlerini Anlamak

Sunulan komut dosyalarının amacı, ASP.NET uygulamalarında kullanıcıların bir kılavuzdan seçim yaptıklarında arama parametrelerinin izini kaybetmelerine neden olan yaygın bir sorunu çözmektir. İlk yaklaşım, JavaScript'i kullanarak arama girişini istemci tarafında saklar. oturumDepolama işlev. Kullanıcı deneyimi, web sitesi yeniden yüklendikten sonra bile arama ifadesinin etkin kalmasını sağlayan bu stratejiyle iyileştirilir. Sayfa yeniden yüklendiğinde veya bir öğe seçildiğinde, önbelleğe alınan arama değeri, girişin yerel olarak yakalanıp kaydedilmesiyle ızgaraya tekrar uygulanabilir. Bu yöntem sayesinde kullanıcı sürekli aynı kriterleri girmek zorunda kalmayacaktır.

Başka bir yöntem sunucu tarafını kullanır Görünüm Durumu ASP.NET'in özelliği. Bu durumda arama değeri, geri göndermelerdeki verileri koruyan ViewState nesnesinde tutulur. ViewState'te tutulan değer, kullanıcı ızgarayla etkileşime girdiğinde ve bir öğeyi seçtiğinde sayfaya geri iletilir. Bu yöntem, arama parametrelerinin tüm oturum boyunca erişilebilir olmasını ve sunucu tarafı işlemeye kolayca dahil edilmesini garanti eder. Arama girişi kaybını önlemek için sunucu, aramayı istemci tarafındaki ızgaraya yeniden uygulamak için bir komut dosyası çalıştırabilir.

AJAX tam sayfa yeniden yüklemelerini durdurmak için üçüncü yaklaşımda kullanılır. Sayfanın dinamik güncellenmesi, sunucuya eşzamansız bir isteği tetikleyen bir öğe seçildiğinde gerçekleşir. Bu, ızgara yenilenirken AJAX isteğiyle birlikte verilen arama kriterlerini bozulmadan tutar. Güncelleme tamamlandıktan sonra JavaScript işlevi, arama değerini ızgaraya yeniden uygular. Bu teknik, kullanıcı deneyimini en üst düzeye çıkarmak için kılavuzun durumunu korurken materyali eşzamansız olarak günceller.

Farklı bir şekilde, bu yöntemlerin her biri arama girişinin korunmasını garanti eder. Daha basit istemci tarafı çözümleri için sessionStorage tekniği uygundur, ViewState ise daha kapsamlı bir ASP.NET stratejisi sunar. AJAX, sunucu tarafı güncellemeleri ile istemci tarafı etkileşimi arasında bir denge sağlayarak kullanıcı eylemlerinin arama sürecine müdahale etmemesini sağlar. Her çözüm, kullanıcı sıkıntısını en aza indirmek ve kusursuz bir ASP.NET ızgara tabanlı veri etkileşimi deneyimini korumak amacıyla performans ve kullanılabilirlik açısından en iyi uygulamalara uyar.

// 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 ve JavaScript ile Izgara Arama Kalıcılığını Artırma

Bir sayfa yenileme veya geri gönderme sonrasında ızgarada seçilen öğelerin vurgulanan durumunu korumak, ASP.NET ızgara kullanıcı deneyimini sağlam tutmanın çok önemli bir parçasıdır. Kullanıcılar, birden fazla seçim yaptıklarında arayüzün diğer alanlarıyla etkileşime girdiklerinde seçimlerinin yerinde kalmasını beklerler. Şebeke değişikliklerinin bir sonucu olarak belirli durumlar sıfırlanabileceğinden bu genellikle zordur. JavaScript'i kullanma ve ViewState'i Etkinleştir Geri göndermelerin ardından seçim durumunu saklama ve yeniden uygulama özelliği, bunu çözmenin bir yoludur.

Geliştiriciler, istemci tarafı depolamayı aşağıdaki gibi kullanabilir: yerelDepolama veya oturumDepolamaArama kriterlerini saklamanın yanı sıra seçilen nesneleri takip etmek için. Bu, özellikle kullanıcıların aynı anda birden fazla ürünü seçtiği durumlarda faydalıdır. Sayfa yeniden yüklendikten sonra seçilen öğe kimliklerini kaydederek seçimi ızgaraya yeniden uygulamak için JavaScript kullanılabilir. Kullanıcı eylemlerinin kaybolmasını önleyen bu teknik, tüm kullanıcı deneyimini büyük ölçüde geliştirir.

AJAX güncellemelerini kullanarak, özellikle büyük veri kümelerini yönetenler olmak üzere daha karmaşık ızgaralar için daha iyi hız garanti edilir. Arama parametrelerini ve seçilen nesneleri olduğu gibi korurken, tüm kılavuzu yeniden yükleme ihtiyacını ortadan kaldırarak kısmi değişiklikler yapılabilir. Birleştirerek daha akıcı ve etkileşimli bir ızgara deneyimi elde edilir. AJAX Web sitesinin, iş akışlarına müdahale etmeden kullanıcı etkinliklerine dinamik olarak uyum sağlamasını sağlayan sunucu tarafı mantığıyla.