如何实现动态添加行中下拉框选项不重复验证？

嘿，这个动态添加多行、需要确保下拉选项不重复的表单验证场景我之前也碰到过，确实CompareAttribute在集合元素对比的场景下完全派不上用场，给你几个实用的解决思路，也聊聊你已经采用的控制器端检查方案：

1. 控制器Post操作内的直接检查（你已采纳的方案） #

这种方式简单直接，适合快速落地。在接收表单提交的Action里，我们可以对resourceCounts集合做去重计数对比，判断是否有重复选择：

if (resourceCounts.Count != resourceCounts.Where(d => d.Id!= 0)
    .Select(x => x.Id)
    .Distinct()
    .Count())
{
    ModelState.AddModelError(string.Empty, "You can't select the same option more than once");
    // 回显表单或其他后续逻辑
}

这里Where(d => d.Id != 0)是为了过滤掉未选择的项（假设下拉框的默认值是0），避免把空选的无效项算进重复检查里。这个方法的好处是零额外依赖、代码量小，非常适合小型项目或者快速迭代的场景。

2. 自定义模型验证特性（更贴合MVC规范） #

如果想让验证逻辑和模型绑定，更贴合MVC的模型验证流程，可以自定义一个专属的验证特性，把检查逻辑封装起来：

public class NoDuplicateResourceIdsAttribute : ValidationAttribute
{
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        var resourceCounts = value as IList<ResourceCountViewModel>;
        if (resourceCounts == null)
            return ValidationResult.Success;

        var selectedValidIds = resourceCounts.Where(d => d.Id != 0).Select(x => x.Id);
        if (selectedValidIds.Count() != selectedValidIds.Distinct().Count())
        {
            return new ValidationResult("You can't select the same option more than once");
        }

        return ValidationResult.Success;
    }
}

然后在父ViewModel的集合属性上标记这个特性：

public class YourParentViewModel
{
    [NoDuplicateResourceIds]
    public IList<ResourceCountViewModel> ResourceCounts { get; set; }
}

这样后续在控制器里只需要检查ModelState.IsValid就会自动触发这个验证，不需要重复写检查逻辑，更符合MVC的分层思想，也方便后续复用。

3. 前端JS实时验证（提升用户体验） #

除了后端的安全验证，建议同时加上前端的实时验证，避免用户填完所有内容提交后才看到错误提示，大大提升用户体验：

// 监听所有下拉框的变化事件，实时检查重复
$('.resource-select').on('change', function() {
    const selectedIds = [];
    $('.resource-select').each(function() {
        const id = $(this).val();
        if (id !== '0') { // 过滤未选择的默认项
            selectedIds.push(id);
        }
    });
    // 通过Set去重后对比长度，判断是否有重复
    const hasDuplicates = new Set(selectedIds).size !== selectedIds.length;
    if (hasDuplicates) {
        $('#duplicate-error').text('You can\'t select the same option more than once').show();
    } else {
        $('#duplicate-error').hide();
    }
});

// 表单提交前再做一次最终检查，防止绕过前端验证
$('form').on('submit', function(e) {
    const selectedIds = [];
    $('.resource-select').each(function() {
        const id = $(this).val();
        if (id !== '0') {
            selectedIds.push(id);
        }
    });
    if (new Set(selectedIds).size !== selectedIds.length) {
        e.preventDefault();
        $('#duplicate-error').text('You can\'t select the same option more than once').show();
    }
});

这里要注意，前端验证只是提升体验的辅助手段，后端验证才是确保数据正确性的最后防线，毕竟前端逻辑是可以被绕过的。

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