使用 knockout.js 对下拉菜单进行 MVC 不显眼的验证？答案

【问题标题】：MVC Unobtrusive validation for a dropdown using knockout.js?使用 knockout.js 对下拉菜单进行 MVC 不显眼的验证？
【发布时间】：2014-04-10 16:07:17
【问题描述】：

我正在使用 knockout.js 填充下拉列表：

<select data-bind="options: AvailableUsers, optionsText: 'DisplayName', value: SelectedUser, optionsCaption: '-- Select a User --'" data-val="true" data-val-required="You must select a user." id="SelectedUser" name="SelectedUser"></select>
<span class="field-validation-valid" data-valmsg-for="SelectedUser" data-valmsg-replace="true"></span>

我正在将验证器注册到表单并在提交处理程序上调用它（我认为这与问题无关，因为正在执行验证）：

$.validator.unobtrusive.parse("#UserProfileCreation");
$("#UserProfileCreation").data("validator").settings.submitHandler = mappedModel.save;

但是，当尝试提交页面时，它总是表现得好像下拉列表没有选择值。即使我通过控制台确认 SelectedUser 有一个值。我已经在其他页面中成功地为 textareas 做了同样的事情，如下所示：

<textarea style="width: 100%; height: 50px; min-height: 30px;" name="GroupReply" id="GroupReply" data-bind="value: GroupReply" data-val="true" data-val-required="You must enter a reply."></textarea><br/><span class="field-validation-valid" data-valmsg-for="GroupReply" data-valmsg-replace="true"></span>

而且效果很好。因此，我不确定下拉列表中缺少什么，但是无论我是否选择一个选项，它都会一直表现得像空白一样并显示验证错误消息。我错过了什么？

【问题讨论】：

我还没有确认这一点，这就是为什么我要添加评论而不是答案，但我相信验证正在寻找要设置为可用选项之一的值验证设置时，即在页面加载时，当没有可用选项时。通过不依赖 data-* 验证，而是稍后通过 JavaScript 应用该字段的规则（在淘汰赛呈现选项之后），我认为你会解决这个问题。

标签： asp.net-mvc knockout.js unobtrusive-validation

【解决方案1】：

我想通了，这很简单，因为我对淘汰赛如何处理下拉列表的选定值缺乏了解。

我在 KO 视图模型中的 AvailableUsers 包含一个 KeyValueModel 列表，这些模型基于 C# MVC 类（使用 KO 映射插件转换）：

public class KeyValueModel{
   public Guid Id {get; set;}
   public string DisplayName {get; set;}
}

我只需将optionsValue: 'Id' 添加到下拉列表的数据绑定属性中。但是应该注意的是，这只是因为我在 action 参数中传递了一个 Guid 作为 MVC 视图模型的 SelectedUser 属性。

有时我想将下拉选择表示的整个 javascript 对象传递给 MVC 视图模型，在这种情况下，此解决方案将不起作用。

注意在控制台中，如果您没有optionsValue: 'Id'，您可以从下拉列表中选择一个选项并输入mappedModel.SelectedUser()，您会得到：

Object {Id: "adb9ae2d-01c8-468d-96e6-06ec39039e29", DisplayName: "Johnson, John"}

因为挖空可以存储整个选定的对象。但是，knout 不会为实际 HTML 标记中下拉列表中的选项设置任何值，它们都是 null（这就是验证失败的原因）。

如果您确实添加optionsValue: 'Id' 并在控制台中输入mappedModel.SelectedUser()，那么您将得到：

"adb9ae2d-01c8-468d-96e6-06ec39039e29"

对于我在此页面上的目的而言，这很好。如前所述，如果您想根据该选择将整个对象传递给 MVC 操作，则此设置将不起作用。您可能需要设置一个隐藏字段并将其值设置为 SelectedUser().Id 并将验证放在该隐藏字段上。

【讨论】：