选择项目后如何使用 JavaScript 在 ASP.NET 网格中维护搜索条件

Mia Chevalier
2024年9月30日星期一 上午9:52:55
Search persistence

优化 ASP.NET 网格搜索和选择中的用户体验

使客户能够在网格界面中搜索和选择对象是 ASP.NET 应用程序中的一项常见功能。然而，开发人员经常遇到一个问题：选择某个项目时，网格会刷新并且搜索参数会丢失。因为他们每次选择新项目时都必须重新开始搜索，这可能会激怒用户。

为了提高可用性，必须在回发或网格更新后保留搜索条件。当消费者必须根据相同的标准选择多个选项时，这一点尤其重要。如果搜索词丢失，则不必要地重复该过程。

幸运的是，通过利用 JavaScript 和 ASP.NET 的内置功能，即使在网格中选择一个项目后，我们也可以确保搜索关键字继续存在。通过使用补充DataTables和ASP.NET的视图状态的方法，我们可以让用户体验更加流畅。

我们将在接下来的指南中了解如何使用 JavaScript 和 VB.Net 在 ASP.NET 项目中实现此目的。我们还将通过一个实际场景向您展示如何在更新网格时有效维护搜索条件。

命令 使用示例
sessionStorage.getItem() 可以使用此命令从浏览器的会话存储中检索搜索参数。在这种情况下，它会检索之前提供的搜索值，并确保在页面刷新或网格更新后再次填充搜索字段。
sessionStorage.setItem() 将当前搜索查询保存在浏览器的会话存储中。这可以防止在用户选择某个项目或 ASP.NET 网格回发时搜索参数丢失。
ScriptManager.RegisterStartupScript() 从服务器注册并运行 ASP.NET 客户端脚本。为了将搜索值保存在网格的搜索框中，此处使用它在页面加载时或回发后应用存储的搜索条件。
DataTable().search() 更新或页面加载后，使用此 DataTables 方法将缓存的搜索值应用回网格。它保证根据先前输入的搜索查询过滤网格。
DataTable().draw() 应用搜索条件并重新绘制数据表。当使用 AJAX 或其他技术刷新或更新页面时，需要此命令来重新应用搜索词并显示过滤后的数据。
on('keyup') 将事件处理程序添加到搜索输入框，以便记录每次击键。在这种情况下，即使通过使用当前搜索输入更新会话存储来刷新或重新加载网格，它也可以确保搜索值得以保留。
__doPostBack() 此 ASP.NET 函数使用 JavaScript 将数据发送回服务器以启动回发。当选择网格中的某个项目时，脚本用于将当前搜索值传递给服务器，确保在服务器端进程期间保持搜索状态。
$.ajax() 向服务器发送异步 HTTP 请求。在这种情况下，它可以通过将搜索条件发送到服务器而无需重新加载整个页面，从而在使用 AJAX 更新网站的特定区域（如网格）时帮助保留搜索输入。

了解在 ASP.NET 网格中保留搜索条件的脚本解决方案

所提供脚本的目的是解决 ASP.NET 应用程序中的一个常见问题，即用户在从网格中进行选择时会丢失搜索参数。第一种方法使用 JavaScript 将搜索输入存储在客户端 功能。此策略改善了用户体验，确保即使在网站重新加载后搜索短语仍保持活动状态。当页面重新加载或选择某个项目时，可以通过捕获并本地保存输入来将缓存的搜索值再次应用到网格。由于这种方法，用户不必不断输入相同的条件。

另一种方法使用服务器端 ASP.NET 的功能。在这种情况下，搜索值保留​​在 ViewState 对象中，该对象在回发期间保留数据。当用户与网格交互并选择一个项目时，保存在 ViewState 中的值将传输回页面。此方法保证整个会话都可以访问搜索参数，并且可以轻松地将其合并到服务器端处理中。为了防止搜索输入丢失，服务器可以运行脚本将搜索重新应用到客户端网格。

在第三种方法中使用来停止整页重新加载。当选择某个项目时，就会发生页面的动态更新，这会触发对服务器的异步请求。这使得搜索条件（通过 AJAX 请求给出）在网格刷新时保持不变。更新完成后，JavaScript 函数将搜索值重新应用到网格。该技术异步更新材料，同时保留网格状态以最大化用户体验。

这些方法以不同的方式保证搜索输入的保存。对于更简单的客户端解决方案，sessionStorage 技术是合适的，而 ViewState 提供了更全面的 ASP.NET 策略。 AJAX 通过在服务器端更新和客户端交互之间提供平衡来确保用户操作不会干扰搜索过程。每个解决方案都遵循性能和可用性最佳实践，目标是最大限度地减少用户摩擦并保留基于 ASP.NET 网格的无缝数据交互体验。

选择项目后在 ASP.NET 网格中维护搜索条件

方法 1：使用 JavaScript 和会话存储（客户端）

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

在 ASP.NET 回发期间保留搜索输入

方法 2：使用 ASP.NET ViewState（服务器端）

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

使用 AJAX 保留搜索条件以防止整页重新加载

方法 3：AJAX 进行部分页面更新

// 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 和 回发后存储并重新应用选择状态的属性是解决此问题的一种方法。

开发人员可以使用客户端存储，例如 或者 ，除了存储搜索条件之外，还可以跟踪已拾取的对象。这在用户同时选择多个产品的情况下特别有用。 JavaScript 可用于在页面重新加载后通过存储所选项目 ID 将选择重新应用到网格。通过防止用户操作丢失，该技术极大地增强了整个用户体验。

通过使用 AJAX 更新，可以保证更复杂的网格（尤其是管理大型数据集的网格）获得更好的速度。可以进行部分修改，同时保持搜索参数和所选对象不变，从而无需重新加载整个网格。通过结合以下方式实现更加流畅和交互式的网格体验 具有服务器端逻辑，使网站能够动态适应用户活动，而不会干扰他们的工作流程。

  1. 回发后如何维护搜索条件？
  2. 通过将搜索输入存储在回发之间可以保留搜索条件 或者 。
  3. 当网站刷新时，我可以保留网格中的选择吗？
  4. 是的，通过在页面重新加载时使用 JavaScript 重新应用所选项目 ID 并将其保存在 或者 。
  5. 选择网格项时，有没有办法阻止页面完全重新加载？
  6. 对于部分页面更新，请使用 以避免网格完全重新加载并保留搜索参数。
  7. 可以在回发之间保留排序和分页选择吗？
  8. 是的，雇用 ;或者，利用 或 财产来维持状况。
  9. 网格中的项目选择和搜索持久性一起吗？
  10. 是的，您可以使用 JavaScript 在页面重新加载时重新应用搜索条件和所选项目，并将其存储在 。

要改善 ASP.NET 网格中的用户体验，需要在选择项目后保留搜索条件。客户端和服务器端策略保证用户在回发期间保持其搜索输入。这会带来更加无缝且用户友好的界面。

保留搜索输入和所选项目，无论是通过 保留或 存储，是目的。这应该可以最大限度地减少烦恼。通过使用这些技术，您可以保持基于网格的应用程序的动态性和用户友好性，同时还增强整体可用性。

  1. 详细信息 以及它如何在回发之间保留数据来自 微软官方文档 。
  2. 这 JavaScript 搜索功能中使用的集成引用自 数据表官方文档 。
  3. 使用 使用以下示例探索了在 JavaScript 中存储客户端数据的方法 MDN 网络文档 。
  4. 实施指南 为了防止页面重新加载，同时维护网格状态是从 W3Schools AJAX 教程 。