.NET 6.0 Razor Pages：数据库数据应在前端还是后端过滤？

你的现有代码 #

前端筛选控件（.cshtml） #

<div id="attack">
    <img class="skill-icon-deselected" src="images/Attack_icon_(detail).png" alt="Attack icon" />
    <input class="skill-input" id="attack-level" placeholder="Attack Level" type="number" min="1" max="99" oninput="validity.valid||(value='');">
</div>

后端EF数据读取代码 #

public List<Activity> allActivities = new List<Activity>();
public void OnGet()
{
    allActivities = _context.Activities.ToList();
}

两种方案对比与建议 #

1. 后端过滤（优先推荐） #

核心优势

• 性能更优：通过EF的Where条件在数据库层面过滤，只返回符合要求的数据，大幅减少网络传输量，数据量越大优势越明显
• 逻辑统一：过滤规则集中在后端，避免前端不同环境的兼容问题，后期维护更方便
• 数据安全：不会将全量数据暴露到前端，降低敏感数据泄露风险

实现思路

• 在Razor Page的Model中添加筛选参数：

  public List<Activity> filteredActivities = new List<Activity>();
  // 筛选参数：是否选中攻击筛选、攻击等级阈值
  public bool IsAttackSelected { get; set; }
  public int? AttackLevel { get; set; }
  

• 修改OnGet方法，根据参数动态构建查询：

  public void OnGet()
  {
      var query = _context.Activities.AsQueryable();
      
      // 应用攻击筛选条件
      if (IsAttackSelected && AttackLevel.HasValue)
      {
          // 这里根据你的业务逻辑调整过滤规则，比如大于等于输入的等级
          query = query.Where(a => a.AttackLevel >= AttackLevel.Value);
      }
      
      // 其他筛选条件可按同样方式添加
      
      filteredActivities = query.ToList();
  }
  

• 前端通过表单提交或AJAX将筛选状态（比如图片是否选中、输入框值）传递给后端，实现数据更新

2. 前端过滤（适合小数据量场景） #

核心优势

• 响应更快：无需后端交互，筛选操作即时生效，用户体验流畅
• 实现简单：前端用JavaScript遍历全量数据即可完成过滤，无需修改后端逻辑

劣势

• 性能瓶颈：数据量较大（如上千条）时，全量传输会增加网络负载，前端遍历也会出现卡顿
• 安全风险：全量数据暴露在前端，存在数据泄露隐患

实现思路

• 在.cshtml中将全量数据序列化到前端：

  <script>
      const allActivities = @Json.Serialize(Model.allActivities);
  </script>
  

• 用JavaScript监听图片点击和输入框变化，根据筛选条件过滤数据并重新渲染页面

最终选择建议 #

• 如果你的Activity数据量超过几百条，或涉及敏感数据，直接选后端过滤
• 如果数据量很小（几十条以内），追求快速实现和流畅体验，可以选前端过滤
• 进阶方案：结合AJAX做局部刷新，既保留后端过滤的性能优势，又避免整页刷新的生硬感

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