验证下拉项在具有相同 id 的下拉字段列表中不会出现多次

Posted 2023-05-08

【中文标题】验证下拉项在具有相同 id 的下拉字段列表中不会出现多次

【英文标题】：Validate dropdown item does not occur more than once in a list of dropdown fields with the same id

【发布时间】：2018-06-27 12:33:59

【问题描述】：

我有一个表单，用户可以根据需要添加任意多的行。每次他们都希望从提供的下拉列表中选择不同的选项。目前没有验证可以阻止他们多次选择相同的值。

每一行都是一个“ResourceCount”。 ViewModel 有一个 ResourceCountViewModel 的 IList，因此每一行都作为一个项目添加到列表中。

ResourceCount 视图模型由一个“id”（用于存储所选下拉值）和一个“quantity”（用于数字字段）组成。

我想不出在这种情况下使用 Compare 注释的方法。 我该如何为此实施适当的验证？

编辑： 接受的答案中有很多好的建议。我在控制器发布操作中进行了简单的检查：

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");
//etc.

【问题讨论】：

你可能不得不编写自己的自定义验证来迭代列表并检查每个值，我猜。您还可以使用一些 javascript 来根据其他下拉列表中的内容来限制每个下拉列表中的内容，以降低传入数据包含错误的可能性。

@ADyson 非常感谢您的意见。您能否为自定义验证提供进一步的帮助？不幸的是，如果我使用 javascript 删除第二个下拉列表中的“on-call”选项，那么在示例场景中会出现一个问题，即用户删除第一行（每行末尾都有一个删除按钮。）第二个然后下拉菜单需要有待命选项。并且在添加到未选择待命的页面的任何其他下拉列表中。用户不太可能遇到这个问题，但无论如何它有点混乱。希望有更简单的出路！

您必须编写一些调用删除的 js 来确定哪些下拉列表不再包含正确的选项。一旦你弄清楚你的逻辑，应该是相对直截了当的。提示：将流程写在纸上，然后转换成代码。

@MrJF 这就是我刚刚开始做的事情；现在正在为“转换为代码位”而苦苦挣扎:)

我知道那种感觉！你可能最好尝试一个简单的实现来做一小部分，比如填充列表。然后尝试添加和删除项目。然后继续逐步让它做更多的事情！

【参考方案1】：

使用 ValidationAttribute（内置或自定义）和 MVC 不显眼的客户端验证是不可能的。

验证属性应用于模型（您的类）的属性，并且检查验证的上下文仅针对该实例 - 它不知道集合中模型的其他实例，因此无法比较其他实例。

相反，如果您将ValidationAttribute 应用于集合（例如List<T> 属性），则不显眼的验证将不起作用，因为将规则添加到$.validator 所需的data-val-* 属性只有在您包含集合属性的输入（而不是集合中每个对象的每个属性），这意味着 ModelBinding 将失败。

您需要编写自己的控制器代码和脚本来实现自定义验证。

在客户端，您可以处理<select> 的.change() 事件并检查之前的选择是否匹配，如果匹配则显示错误消息。您没有显示您的模型或视图，而是基于以下 html（针对集合中的每个对象重复

<select class="select" .....>
    <option value="">Please select</option>
    <option value="1">On-call</option>
    ....
<select>
<div class="error"></div> // see notes below if you using ValidationMessageFor()

那么脚本就是

var errors = $('.error');
var selects = $('.select');
$('.select').change(function() 
  var selected = $.map(selects, function(s, i) 
    return $(s).val();
  )
  $.each(selects, function(i, s) 
    var error = $(this).next('.error');
    var val = $(this).val();
    var index = i;
    if ($(this).val()) 
      var others = selected.filter(function(s, i) 
        if (i != index) 
          return s;
        
      );
      if (others.indexOf(val) > -1) 
        error.text('Please make a unique selection');
       else 
        error.text('');
      
     else 
      error.text('');
    

  )
)

请参阅 this fiddle 了解工作示例。

或者，您可以在每个 <select> 中隐藏/显示（或禁用）选项，以防止用户首先做出无效选择，但如果您动态添加/删除项目和/或当您查看正在编辑属性已经具有选定值的现有数据（如果你想实现它，我会留给你一个新问题来显示你的尝试）。

在服务器端，可以检查是否有重复值，如果有，则添加ModelState错误并返回视图，例如

var selected = new List<int>();
for (int i = 0 i < model.Count; i++)

    if (selected.Contains(model[i].YourProperty))
    
        ModelState.AddModelError("", "Please make a unique selection");
        break;
    
    else
    
        selected.Add(model[i].YourProperty);
    

if (!ModelState.IsValid)

    return View(model);

....

或使用 linq

if (model.Select(x => x.YourProperty).GroupBy(x => x).Any(g => g.Count() > 1))

    ModelState.AddModelError("", "Please make a unique selection");

然后将显示在视图中@Html.ValidationSummary()。

如果您在视图中为每个下拉列表使用@Html.ValidationMessageFor(m => m[i].YourProperty)，则可以将上述循环修改为

if (selected.Contains(model[i].YourProperty))

    var propertyName = string.Format("[0].yourPropertyName", i);
    ModelState.AddModelError(propertyName, "Please make a unique selection");
    break;

并修改脚本以添加/删除由ValidationMessageFor() 生成的<span> 元素的消息（即代替上面显示的<div class="error"> 元素）

附带说明，如果您想了解有关验证属性如何与客户端验证结合使用的更多信息，我建议您阅读The Complete Guide To Validation In ASP.NET MVC 3 - Part 2。

【讨论】：

非常感谢您的洞察力；我使用控制器代码只是为了保持简单，尽管牺牲了用户友好性。小提琴是有缺陷的，如果您选择前两个下拉菜单作为“选项 1”，然后将第一个下拉菜单更改为“选项 2”，错误仍然存​​在。 （我也设法用其他一些组合来打破它。）

@egmfrs，我应该多测试一下小提琴）。我有forked it here，它现在应该可以显示正确的消息（它又快又脏，毫无疑问可以优化，我会在接下来的几天里尝试做）