ASP.NET Core MVC 实现类Azure DevOps样式的字符串列表增删绑定

完全不需要从零重复造轮子，现有成熟实现可以快速落地，轻松做出和Azure DevOps「编辑工作项类型」页面一致的交互效果：

方案一：无第三方依赖的原生轻量实现 #

基于ASP.NET Core原生模型绑定机制实现，零额外组件成本：

• 后端视图模型只需要定义标准列表属性即可，无需额外扩展字段：

  public class WorkItemEditViewModel
  {
      // 直接定义字符串列表，模型绑定自动识别符合命名规则的表单字段
      public List<string> AllowedValues { get; set; } = new();
  }
  

• 前端布局完全匹配目标交互：
  顶部放置单行文本输入框 + 「添加」按钮，下方用独立列表容器渲染已有条目，每个条目行右侧配置删除用的叉号按钮，通过CSS调整即可和Azure DevOps的视觉效果保持一致。
• 配套极简JS逻辑（总代码量不超过30行，无需引入重型JS库）：
  • 点击添加按钮时，自动生成符合模型绑定规则的隐藏input节点，按照当前列表长度设置name属性为AllowedValues[当前索引]，值取顶部输入框的文本，追加到列表容器中，完成后清空顶部输入框。
  • 点击删除叉号时，移除对应条目DOM后，自动把剩余所有条目的input索引按顺序重新赋值——这是自写实现最容易踩的坑：不重排索引会造成列表索引断档，后端绑定会直接丢失断档位置之后的所有列表值。
  • 页面初始加载时，将后端返回的已有列表，按照相同的索引规则渲染到列表容器中即可。

方案二：现成封装组件直接接入 #

如果连基础JS逻辑都不想手写，可以直接用已有的成熟封装组件：

• 社区通用的.NET Tag Helper动态集合组件：已经完整封装了新增节点、删除节点、自动索引重排、模型绑定对接的全流程逻辑，只需要在视图中通过标签助手绑定对应的列表属性，就能直接生成可交互的列表组件，修改少量CSS就能匹配目标界面的样式。
• 通用轻量前端组件库的可输入标签组件：所有主流前端组件库都自带支持手动新增、单独删除条目的标签输入组件，只需要在组件值变化时，把输出的字符串数组同步生成符合MVC绑定规则的隐藏input节点，就能零额外适配完成后端绑定，不需要手动处理DOM增删和索引逻辑。

避坑提示：实现过程中绝对不能省略删除后的索引重排步骤，这是90%自写列表绑定实现会遇到的问题：出现索引断档后，ASP.NET Core的模型绑定器会从第一个缺失的索引位置开始，丢弃后续所有的列表值。

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