使用带有剃刀语法的敲除绑定

本文关键字：绑定 语法 剃刀 | 更新日期: 2023-09-27 18:00:54

我想知道是否可以在Razor语法中使用Knockoutdata-bind。

我有这样的代码在我的看法：

<tbody data-bind="foreach: relays">
    <tr>
        <td id="body-button-column">
            <button class="btn btn-default btn-sm" title="Remove relay" data-bind="click: $parent.removeRelay">
                <i class="glyphicon glyphicon-remove-circle"></i>
            </button>
        </td>
        <td><input type="text" data-bind="value: $index"/></td>
        <td>@Html.DropDownList("RelayConfigurations[" + $index + "].Address", Model.Addresses, "Select an Item")</td>
    </tr>
</tbody>

我的视图模型具有以下属性

self.relays = ko.observableArray(@Html.Raw(Json.Encode(Model.RelayConfigurations)));

其中RelayConfigurations是模型上的集合对象。

在使用Razor语法@Html.DropDownList…的行中。。。。我想对$index值使用淘汰绑定，但不确定如何做到这一点。或者如果可能的话。

如果我将该行中的$index替换为硬编码值零，则控制器操作中的模型绑定在Postback上按预期工作(尽管由于硬编码值为零，只有集合中的第一个中继具有任何数据(。

使用带有剃刀语法的敲除绑定

当然你可以在剃刀中使用击倒：(

我相信你正在寻找的是这种匿名对象方法：

@Html.DropDownList("somelist", Model.List, new { id = "listbox", data_bind = "" })

我所理解的问题

  1. 将html转换为一种格式，当表单提交时，该格式将很容易被接受为服务器端模型
  2. 从客户端向下拉列表中添加项目的功能

第一个问题的解决方案是查看DropdownList的渲染HTML，并复制生成的<select>标签，然后将knockoutjs应用于该标签，这样一来，您将保持与服务器期望的格式相同的格式，以便能够将提交的表单转换回服务器端模型，同时利用knockoutjs

所以你最终会得到这样的

<tbody data-bind="foreach: relays">
    <tr>
        <td id="body-button-column">
            <button class="btn btn-default btn-sm" title="Remove relay" data-bind="click: $parent.removeRelay">
                <i class="glyphicon glyphicon-remove-circle"></i>
            </button>
        </td>
        <td><input type="text" data-bind="value: $index"/></td>
        <td>
           <select data-bind="attr: {id : 'RelayConfigurations[' + $index + '].Address' }, options: relays ,optionsCaption:'Select an Item'"></select>
        </td>
    </tr>
</tbody>

至于第二个问题，您已经有了要data-bind到的数据，因此您可以根据需要添加和删除项。

来自下方的@meyousikmann评论

对于其他人来说，这只是一个快速的语法更正：

<select data-bind="attr: {name: 'RelayConfigurations[' + $index() + '].Address'}, options: $parent.addresses, optionsCaption: 'Select an Item'"></select>
相关文章：