Tối ưu hóa trải nghiệm người dùng trong tìm kiếm và lựa chọn lưới ASP.NET
Cung cấp cho khách hàng khả năng tìm kiếm và chọn các đối tượng trong giao diện lưới là một tính năng thường xuyên có trong các ứng dụng ASP.NET. Tuy nhiên, các nhà phát triển thường xuyên gặp phải sự cố: lưới làm mới và các tham số tìm kiếm bị mất khi một mục được chọn. Vì họ phải khởi động lại tìm kiếm mỗi khi chọn một mục mới, điều này có thể gây khó chịu cho người dùng.
Điều bắt buộc là phải duy trì các tiêu chí tìm kiếm sau khi cập nhật lại hoặc cập nhật lưới để cải thiện khả năng sử dụng. Điều này đặc biệt quan trọng khi người tiêu dùng phải lựa chọn nhiều lựa chọn dựa trên cùng một tiêu chuẩn. Quá trình này sẽ được lặp lại một cách không cần thiết nếu thuật ngữ tìm kiếm bị mất.
May mắn thay, chúng tôi có thể đảm bảo các từ khóa tìm kiếm tiếp tục ngay cả sau khi chọn một mục trong lưới bằng cách sử dụng JavaScript và các tính năng tích hợp sẵn của ASP.NET. Thông qua việc sử dụng các phương thức bổ sung cho DataTables và trạng thái xem của ASP.NET, chúng tôi có thể làm cho trải nghiệm người dùng mượt mà hơn.
Chúng ta sẽ xem xét cách sử dụng JavaScript và VB.Net để đạt được điều này trong dự án ASP.NET trong hướng dẫn sau. Chúng tôi cũng sẽ xem xét một tình huống thực tế để chỉ cho bạn cách duy trì hiệu quả các tiêu chí tìm kiếm khi bạn cập nhật lưới của mình.
| Yêu cầu | Ví dụ về sử dụng |
|---|---|
| sessionStorage.getItem() | Các tham số tìm kiếm có thể được truy xuất bằng lệnh này từ bộ lưu trữ phiên của trình duyệt. Trong trường hợp này, nó truy xuất giá trị tìm kiếm đã được cung cấp trước đó và đảm bảo rằng trường tìm kiếm được điền lại sau khi làm mới trang hoặc cập nhật lưới. |
| sessionStorage.setItem() | Lưu truy vấn tìm kiếm hiện tại vào bộ nhớ phiên của trình duyệt. Điều này giữ cho các tham số tìm kiếm không bị mất trong trường hợp người dùng chọn một mục hoặc lưới ASP.NET đăng lại. |
| ScriptManager.RegisterStartupScript() | Đăng ký và chạy tập lệnh phía máy khách ASP.NET từ máy chủ. Để lưu giá trị tìm kiếm vào hộp tìm kiếm của lưới, ở đây nó được sử dụng để áp dụng các tiêu chí tìm kiếm được lưu trữ khi tải trang hoặc sau khi đăng lại. |
| DataTable().search() | Sau khi cập nhật hoặc tải trang, giá trị tìm kiếm được lưu trong bộ nhớ đệm sẽ được áp dụng trở lại lưới bằng phương pháp DataTables này. Nó đảm bảo rằng lưới được lọc theo truy vấn tìm kiếm đã được nhập trước đó. |
| DataTable().draw() | Áp dụng tiêu chí tìm kiếm và vẽ lại DataTable. Khi trang được làm mới hoặc cập nhật bằng AJAX hoặc kỹ thuật khác, lệnh này được yêu cầu để áp dụng lại cụm từ tìm kiếm và hiển thị dữ liệu đã lọc. |
| on('keyup') | Thêm trình xử lý sự kiện vào hộp nhập tìm kiếm để mỗi lần nhấn phím được ghi lại. Trong trường hợp này, nó đảm bảo rằng giá trị tìm kiếm được duy trì ngay cả khi lưới được làm mới hoặc tải lại bằng cách cập nhật bộ nhớ phiên với đầu vào tìm kiếm hiện tại. |
| __doPostBack() | Hàm ASP.NET này gửi dữ liệu trở lại máy chủ bằng cách sử dụng JavaScript để bắt đầu đăng lại. Khi một mục trong lưới được chọn, tập lệnh sẽ được sử dụng để truyền đạt giá trị tìm kiếm hiện tại tới máy chủ, đảm bảo rằng trạng thái tìm kiếm được duy trì trong suốt quá trình phía máy chủ. |
| $.ajax() | Gửi cho máy chủ một yêu cầu HTTP không đồng bộ. Trong trường hợp này, nó giúp duy trì đầu vào tìm kiếm trong khi cập nhật các khu vực cụ thể của trang web (như lưới) bằng AJAX bằng cách gửi tiêu chí tìm kiếm đến máy chủ mà không cần tải lại toàn bộ trang. |
Hiểu các giải pháp tập lệnh để duy trì tiêu chí tìm kiếm trong lưới ASP.NET
Mục đích của các tập lệnh được cung cấp là để giải quyết một vấn đề phổ biến trong các ứng dụng ASP.NET trong đó người dùng mất dấu các tham số tìm kiếm khi họ thực hiện lựa chọn từ một lưới. Cách tiếp cận đầu tiên lưu trữ đầu vào tìm kiếm ở phía máy khách bằng cách sử dụng JavaScript phiênStorage chức năng. Trải nghiệm người dùng được cải thiện nhờ chiến lược này, đảm bảo rằng cụm từ tìm kiếm vẫn hoạt động ngay cả sau khi trang web tải lại. Khi trang tải lại hoặc một mục được chọn, giá trị tìm kiếm được lưu trong bộ nhớ đệm có thể được áp dụng lại vào lưới bằng cách thu thập và lưu dữ liệu đầu vào cục bộ. Người dùng sẽ không phải tiếp tục nhập các tiêu chí giống nhau nhờ phương pháp này.
Một phương pháp khác sử dụng phía máy chủ XemTrạng thái tính năng của ASP.NET. Trong trường hợp này, giá trị tìm kiếm được lưu giữ trong đối tượng ViewState, đối tượng này bảo toàn dữ liệu qua các lần đăng lại. Giá trị được giữ trong ViewState được truyền trở lại trang khi người dùng tương tác với lưới và chọn một mục. Phương pháp này đảm bảo rằng các tham số tìm kiếm có thể truy cập được trong toàn bộ phiên và dễ dàng được tích hợp vào quá trình xử lý phía máy chủ. Để tránh mất dữ liệu đầu vào tìm kiếm, máy chủ có thể chạy tập lệnh để áp dụng lại tìm kiếm vào lưới phía máy khách.
AJAX được sử dụng trong cách tiếp cận thứ ba để dừng tải lại toàn trang. Quá trình cập nhật động của trang xảy ra khi một mục được chọn, điều này sẽ kích hoạt yêu cầu không đồng bộ tới máy chủ. Điều này giúp giữ nguyên các tiêu chí tìm kiếm—được đưa ra cùng với yêu cầu AJAX—trong khi lưới làm mới. Sau khi cập nhật xong, hàm JavaScript sẽ áp dụng lại giá trị tìm kiếm vào lưới. Kỹ thuật này cập nhật tài liệu không đồng bộ trong khi vẫn duy trì trạng thái của lưới để tối đa hóa trải nghiệm người dùng.
Theo một cách khác, mỗi phương pháp này đảm bảo duy trì đầu vào tìm kiếm. Đối với các giải pháp phía máy khách đơn giản hơn, kỹ thuật sessionStorage là phù hợp, trong khi ViewState cung cấp chiến lược ASP.NET toàn diện hơn. AJAX đảm bảo rằng hành động của người dùng không can thiệp vào quá trình tìm kiếm bằng cách cung cấp sự cân bằng giữa các cập nhật phía máy chủ và tính tương tác phía máy khách. Mọi giải pháp đều tuân thủ các phương pháp hay nhất về hiệu suất và khả năng sử dụng, với mục tiêu giảm thiểu sự cản trở của người dùng và duy trì trải nghiệm tương tác dữ liệu dựa trên lưới ASP.NET liền mạch.
Duy trì tiêu chí tìm kiếm trong lưới ASP.NET sau khi chọn mục
Cách tiếp cận 1: Sử dụng JavaScript với Bộ lưu trữ phiên (Phía máy khách)
// 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());});});
Giữ lại đầu vào tìm kiếm trong quá trình đăng lại trong ASP.NET
Cách tiếp cận 2: Sử dụng ASP.NET ViewState (Phía máy chủ)
' VB.NET Code-Behind: Store search criteria in ViewStateProtected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.LoadIf Not IsPostBack ThenViewState("SearchValue") = String.EmptyEnd IfEnd SubProtected Sub chkSelect_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs)' Retain search criteria in ViewStateDim 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());});});
Giữ nguyên tiêu chí tìm kiếm bằng cách sử dụng AJAX để ngăn tải lại toàn bộ trang
Cách tiếp cận 3: AJAX để cập nhật một phần trang
// 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();}});});});
Tăng cường tính bền bỉ của tìm kiếm lưới với ASP.NET và JavaScript
Duy trì trạng thái được đánh dấu của các mục đã chọn trong lưới sau khi làm mới trang hoặc đăng lại là một phần quan trọng để giữ nguyên trải nghiệm của người dùng lưới ASP.NET. Người dùng mong đợi các lựa chọn của họ sẽ giữ nguyên vị trí khi họ tương tác với các khu vực khác của giao diện khi họ thực hiện nhiều lựa chọn. Điều này thường khó thực hiện vì một số trạng thái nhất định có thể bị đặt lại do sửa đổi lưới điện. Sử dụng JavaScript và EnableViewState thuộc tính lưu trữ và áp dụng lại trạng thái lựa chọn sau khi đăng lại là một cách để giải quyết vấn đề này.
Nhà phát triển có thể sử dụng bộ nhớ phía máy khách, như lưu trữ cục bộ hoặc phiênStorage, để theo dõi các đối tượng đã được chọn ngoài việc lưu trữ tiêu chí tìm kiếm. Điều này đặc biệt hữu ích trong trường hợp người dùng chọn nhiều sản phẩm cùng một lúc. Bạn có thể sử dụng JavaScript để áp dụng lại lựa chọn vào lưới sau khi tải lại trang bằng cách lưu trữ ID mục đã chọn. Bằng cách ngăn chặn hành động của người dùng bị mất, kỹ thuật này nâng cao đáng kể toàn bộ trải nghiệm người dùng.
Tốc độ tốt hơn được đảm bảo cho các lưới phức tạp hơn, đặc biệt là các lưới quản lý tập dữ liệu lớn, bằng cách sử dụng các bản cập nhật AJAX. Có thể thực hiện sửa đổi một phần trong khi vẫn giữ nguyên các tham số tìm kiếm và các đối tượng được chọn, tiết kiệm nhu cầu tải lại toàn bộ lưới. Trải nghiệm lưới tương tác và linh hoạt hơn đạt được bằng cách kết hợp AJAX với logic phía máy chủ, cho phép trang web thích ứng linh hoạt với các hoạt động của người dùng mà không can thiệp vào quy trình làm việc của họ.
Các câu hỏi thường gặp và câu trả lời để duy trì tìm kiếm và lựa chọn trong lưới ASP.NET
- Làm cách nào tôi có thể duy trì tiêu chí tìm kiếm sau khi đăng lại?
- Tiêu chí tìm kiếm có thể được giữ nguyên giữa các lần đăng lại bằng cách lưu trữ đầu vào tìm kiếm trong sessionStorage hoặc ViewState.
- Khi trang web được làm mới, tôi có thể duy trì các lựa chọn của mình trong lưới không?
- Có, bằng cách sử dụng JavaScript để áp dụng lại ID mục đã chọn khi trang tải lại và lưu chúng vào localStorage hoặc sessionStorage.
- Khi chọn các mục lưới, có cách nào để ngăn trang tải lại hoàn toàn không?
- Để cập nhật một phần trang, hãy sử dụng AJAX để tránh lưới tải lại hoàn toàn và bảo toàn các tham số tìm kiếm.
- Các lựa chọn sắp xếp và phân trang có thể được giữ nguyên giữa các lần đăng lại không?
- Có, tuyển dụng DataTables; cách khác, sử dụng sessionStorage hoặc ViewState tài sản để duy trì tình trạng.
- Lựa chọn mục trong lưới và kiên trì tìm kiếm cùng nhau?
- Có, bạn có thể sử dụng JavaScript để áp dụng lại tiêu chí tìm kiếm và các mục đã chọn khi tải lại trang sau khi lưu trữ chúng trong sessionStorage.
Suy nghĩ cuối cùng về Tìm kiếm và Lựa chọn trong Lưới ASP.NET
Cải thiện trải nghiệm người dùng trong lưới ASP.NET yêu cầu phải giữ nguyên tiêu chí tìm kiếm sau khi các mục được chọn. Chiến lược phía máy khách và phía máy chủ đảm bảo rằng người dùng duy trì thông tin đầu vào tìm kiếm của họ trong quá trình đăng lại. Điều này dẫn đến một giao diện liền mạch và thân thiện hơn với người dùng.
Giữ nguyên đầu vào tìm kiếm và các mục đã chọn, cho dù bằng cách XemTrạng thái giữ lại hoặc JavaScript lưu trữ, là mục tiêu. Điều này sẽ giảm thiểu sự khó chịu. Bằng cách sử dụng các kỹ thuật này, bạn có thể duy trì tính năng động và thân thiện với người dùng của các ứng dụng dựa trên lưới, đồng thời nâng cao khả năng sử dụng tổng thể.
Tài liệu tham khảo và nguồn tài liệu cho tính bền bỉ tìm kiếm lưới ASP.NET
- Thông tin chi tiết về Chế độ xem ASP.NET và cách nó bảo toàn dữ liệu giữa các lần đăng lại có nguồn gốc từ Tài liệu chính thức của Microsoft .
- các Bảng dữ liệu tích hợp được sử dụng trong chức năng tìm kiếm JavaScript được tham chiếu từ Tài liệu chính thức của DataTables .
- Việc sử dụng phiênStorage trong JavaScript để lưu trữ dữ liệu phía máy khách đã được khám phá bằng cách sử dụng các ví dụ từ Tài liệu web MDN .
- Hướng dẫn thực hiện AJAX để ngăn tải lại trang trong khi duy trì trạng thái lưới được thu thập từ Hướng dẫn sử dụng AJAX của W3Schools .