ASP.NET Core Web应用中无分页表格的高效客户端过滤实现方案咨询

针对你在ASP.NET Core Razor页面场景下的需求，这里有三个实用的方案，适配不同数据量和开发习惯：

方案一：服务器端局部视图+AJAX无刷新过滤（推荐复杂过滤/大数据量场景） #

这个方案把过滤逻辑放在服务器端，只通过AJAX更新表格区域，既避免全页刷新的低效，又能满足复杂过滤需求，还解决了纯JS DOM过滤卡顿的问题。

实现步骤： #

1. 抽离表格为局部视图
   创建_TablePartial.cshtml，专门渲染表格内容：

   @model IEnumerable<YourDataModel>
   
   <table class="table">
       <thead>
           <tr>
               <th>ID</th>
               <th>名称</th>
               <th>其他字段</th>
           </tr>
       </thead>
       <tbody>
           @foreach (var item in Model)
           {
               <tr>
                   <td>@item.Id</td>
                   <td>@item.Name</td>
                   <td>@item.OtherField</td>
               </tr>
           }
       </tbody>
   </table>
   

2. 主页面添加过滤控件和表格容器
   在你的Razor页面（比如Index.cshtml）中，添加输入框和承载表格的容器：

   <div class="filter-container">
       <input type="text" id="filterInput" placeholder="输入关键词过滤..." />
   </div>
   <div id="tableContainer">
       @await Html.PartialAsync("_TablePartial", Model)
   </div>
   

3. 编写AJAX请求逻辑
   在页面底部添加脚本，监听输入框变化，发送请求到服务器的过滤接口：

   document.getElementById('filterInput').addEventListener('input', function() {
       const filterValue = this.value.trim();
       fetch(`?handler=Filtered&filter=${encodeURIComponent(filterValue)}`)
           .then(response => response.text())
           .then(html => {
               document.getElementById('tableContainer').innerHTML = html;
           });
   });
   

4. 服务器端实现过滤方法
   在对应的页面模型类（Index.cshtml.cs）中，添加处理过滤的GET方法：

   public async Task<IActionResult> OnGetFiltered(string filter)
   {
       // 从数据库查询带过滤条件的数据
       var data = await _dbContext.YourData
           .Where(item => string.IsNullOrEmpty(filter) 
               || item.Name.Contains(filter) 
               || item.OtherField.Contains(filter))
           .ToListAsync();
       
       return Partial("_TablePartial", data);
   }
   

方案二：预加载全量数据+高效JS过滤（适合小数据量场景） #

如果你的数据量在几千条以内，优化之前的JS过滤逻辑，避免直接操作DOM节点导致的卡顿——先把数据存成JS数组，过滤后批量生成表格HTML。

实现步骤： #

1. 页面加载时序列化数据到JS
   在Razor页面中，把全量数据序列化为JS变量：

   <script>
       // 把服务器端模型序列化为JS数组
       const allData = @Html.Raw(Json.Serialize(Model));
       const tableContainer = document.getElementById('tableContainer');
   </script>
   

2. 编写高效过滤渲染逻辑
   监听输入框，过滤数组后用模板字符串批量生成表格：

   document.getElementById('filterInput').addEventListener('input', function() {
       const filterValue = this.value.toLowerCase().trim();
       // 过滤数组
       const filteredData = allData.filter(item => 
           item.name.toLowerCase().includes(filterValue) 
           || item.otherField.toLowerCase().includes(filterValue)
       );
       // 批量生成表格HTML
       let tableHtml = `
           <table class="table">
               <thead><tr><th>ID</th><th>名称</th><th>其他字段</th></tr></thead>
               <tbody>
       `;
       filteredData.forEach(item => {
           tableHtml += `
               <tr>
                   <td>${item.id}</td>
                   <td>${item.name}</td>
                   <td>${item.otherField}</td>
               </tr>
           `;
       });
       tableHtml += `</tbody></table>`;
       // 一次性更新DOM
       tableContainer.innerHTML = tableHtml;
   });
   

   这种方式避免了逐个操作DOM节点，过滤速度会大幅提升。

方案三：使用Blazor Server组件（适合想少写JS的场景） #

如果你的项目可以引入Blazor Server，用组件化的方式实现双向绑定过滤，几乎不用写JS，而且是服务器端渲染的一部分，符合传统ASP.NET开发模式。

简单示例： #

1. 创建Blazor组件DataTable.razor

   @inject YourDbContext DbContext
   
   <input type="text" @bind="@FilterValue" @bind:event="oninput" placeholder="过滤..."/>
   
   <table class="table">
       <thead>
           <tr>
               <th>ID</th>
               <th>名称</th>
           </tr>
       </thead>
       <tbody>
           @foreach (var item in FilteredData)
           {
               <tr>
                   <td>@item.Id</td>
                   <td>@item.Name</td>
               </tr>
           }
       </tbody>
   </table>
   
   @code {
       private string FilterValue { get; set; } = string.Empty;
       private IEnumerable<YourDataModel> FilteredData { get; set; } = Enumerable.Empty<YourDataModel>();
       
       protected override async Task OnInitializedAsync()
       {
           FilteredData = await DbContext.YourData.ToListAsync();
       }
       
       protected override async Task OnParametersSetAsync()
       {
           FilteredData = await DbContext.YourData
               .Where(item => string.IsNullOrEmpty(FilterValue) 
                   || item.Name.Contains(FilterValue))
               .ToListAsync();
       }
   }
   

2. 在Razor页面中引用组件

   @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
   @using Microsoft.AspNetCore.Components.Web
   
   <component type="typeof(DataTable)" render-mode="ServerPrerendered" />
   

   这样输入过滤条件时，Blazor会自动发起服务器请求更新表格，无需手动写AJAX和DOM操作。

内容的提问来源于stack exchange，提问作者eleethesontai