基于用户偏好列布局在Razor视图中构建无闪烁HTML表格

问题背景 #

现有定期更新的客户信息表，通过AJAX每2分钟轮询数据库获取新记录。之前用拖拽表格实现列自定义排序，但刷新/更新时会出现跳变闪烁，影响用户体验，需要改为服务端构建布局，避免视觉闪烁。

数据模型 #

精简后的Customer模型：

public class Customer
{
    public string UserId { get; set; }
    public string Name { get; set; }
    public DateTime DateJoined { get; set; }
    public string PlanName { get; set; }  
}

用户需求 #

用户可通过为列名设置数字指定列的左右显示顺序，支持任意列组合，例如：

示例1 #

示例2 #

实现思路 #

一、用户偏好存储 #

• 数据库表设计：新增UserColumnPreference表，字段包含UserId（关联用户）、ColumnName（对应Customer的属性名，如"Name"）、DisplayOrder（排序数字，越小越靠左）、IsVisible（可选，控制列是否显示）。
• 偏好保存：当用户在页面设置列顺序后，通过AJAX将列名和对应的排序号提交到后端，更新或插入该用户的偏好记录。
• 默认配置：如果用户没有设置过偏好，使用系统默认的列顺序（比如UserId、Name、DateJoined、PlanName）。

二、服务端构建视图 #

• 获取用户偏好：在渲染页面或处理AJAX请求时，根据当前UserId从UserColumnPreference表中获取排序后的列配置，按DisplayOrder升序排列。
• 动态生成表格：
  1. 表头：遍历排序后的列配置，依次生成<th>标签，同时可保留原有的对齐样式（比如从偏好表额外存储TextAlign字段，或固定对应列的对齐规则）。
  2. 表体：遍历Customer列表，对每个客户对象，按偏好的列顺序依次取出对应属性值，生成<td>标签，匹配对应列的对齐样式。
• AJAX更新优化：轮询获取新数据时，后端直接按照用户偏好的列顺序组装好HTML片段（或结构化数据，前端按顺序渲染），返回给前端替换现有表格内容，避免前端重新排序导致的闪烁。如果用结构化数据（比如JSON数组），前端需要提前拿到用户偏好的列顺序，按顺序生成DOM，也能避免闪烁。
• 避免闪烁技巧：可以在后端渲染完整表格，前端替换时使用visibility: hidden先隐藏旧表格，替换完成后再显示；或者使用AJAX返回增量数据，只追加新行而不是替换整个表格，减少DOM操作。

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