Question

我正在使用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>

我正在向表单注册验证器，并在submithandler上调用它（我不认为这与问题有关，因为验证正在执行）：

$.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>

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

Answer 1

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

KO View Model中的AvailableUsers包含一个基于C＃MVC类的KeyValueModel列表（使用KO映射插件转换）：

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

我只需要将optionsValue: 'Id'添加到下拉列表的data-bind属性中。但是应该注意，这只能起作用，因为我在动作参数中传递了Guid作为MVC视图模型的SelectedUser属性。

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

请注意，在控制台中，如果您没有optionsValue: 'Id'，则从下拉列表中选择一个选项，然后输入mappedModel.SelectedUser()：

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

因为淘汰赛可以存储整个所选对象。但是，knockout没有为实际HTML标记的下拉列表中的选项设置任何值，它们都为空（这就是验证失败的原因）。

如果您确实添加了optionsValue: 'Id'并在控制台中输入mappedModel.SelectedUser()，那么您只需获取：

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

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

使用knockout.js下拉列表的MVC Unobtrusive验证？

1 个答案: