Asp.Net MVC 4 模型绑定和剔除绑定以选择元素

Posted 2023-03-27

【中文标题】Asp.Net MVC 4 模型绑定和剔除绑定以选择元素

【英文标题】：Asp.Net MVC 4 Model binding AND knockout binding to select element

【发布时间】：2019-07-15 18:10:12

【问题描述】：

我有一个页面，它目前正在使用模型属性作为要从中选择的项目的“列表”，以及一个属性“selectedItems”用于已经选择的项目。 （这是一个多选元素）。

我的问题是，当使用这样的选择元素时：

<select name="SelectedItems" id="SelectedItems" multiple class="form-control chosen-select" data-placeholder="Select Your Items" style="width: 100%">
    @foreach (var item in Model.AvailableItems)
    
        var itemSelected = Model.SelectedItems.Contains(item) ? " selected " : "";
        <option value="@item.ToString()" @itemSelected>@item.Humanize()</option>
    
</select>

它会预先选择合适的项目，并且可用的项目列表是完美的。但是当我去保存/发布时，它无法识别任何更改，因为该元素未包含在淘汰赛绑定中。

所以，当我将它包含在淘汰赛绑定中时，如下所示：

<select name="SelectedItems" id="SelectedItems" multiple class="form-control chosen-select" data-bind="selectedOptions: selectedItems" data-placeholder="Select Your Items" style="width: 100%">
    @foreach (var item in Model.AvailableItems)
    
        var itemSelected = Model.SelectedItems.Contains(item) ? " selected " : "";
        <option value="@item.ToString()" @itemSelected>@item.Humanize()</option>
    
</select>

它不会加载已选择的项目，但会看到尝试保存/发布时所做的更改。

值得注意的是，当我在渲染视图模型的敲除代码（见下文）中放置断点时，就在它执行 ko.applyBindings() 之前，您可以在浏览器中看到它确实具有所选项目正确预选。然后，一旦 ko.applyBindings() 执行，那些预先选择的项目就会消失。

这是我的 cshtml 文件中脚本部分/标签中的淘汰内容：

var viewModelJson = '@Html.Json(Model)';
var viewModelJs = ;
var viewModel = ;
viewModelJs = JSON.parse(viewModelJson);
initializeViewModelJs(viewModelJs);
viewModel = ko.mapping.fromJS(viewModelJs);
ko.applyBindings(viewModel);

我如何让它同时适用于：1) 加载当前选定的项目，以及 2) 查看对选定项目所做的更改？

【参考方案1】：

当页面最初加载并呈现时，因为您将选项标记为选中，所以它们呈现为选中状态。一旦绑定到视图模型，我怀疑 selectedItems 数组是空的，因此不再选择项目并清除它们。

我的解决方案是在视图模型中做所有事情。拥有选项列表，使用options 绑定以及selectedOptions 绑定。因为您正在混合服务器端和客户端代码，这会导致这种行为。

请记住，DOM 是由视图模型控制的。它通过data-bind: 绑定反映视图模型属性的状态。

也许您可以设置 Model 对象的状态，将其转换为 JSON，然后转换为视图模型以匹配您想要的 DOM 的状态或编写 javascript 视图模型。