如何让Knockout将选择框的值绑定到列表项的属性

时间:2013-01-31 21:09:49

标签: asp.net-mvc knockout.js ko.observablearray

如何让Knockout将选择框的值绑定到列表项的属性?

我有一个ASP.NET MVC强类型视图,用于MynerModel的IEnermerable,MyViewModel定义为

public class MyViewModel{
    public int Id {get;set;}
    public string Name {get;set;}
    public int Status{get;set;}
}

我正在使用,尝试使用,敲除数据绑定MyViewModel的集合,以便用户可以使用下拉菜单更改状态。我的观点js看起来像:

$(document).ready(function () {
    ko.applyBindings(new ViewModel());
});

var statusItems = [
        { id: 0, name: 'New' },
        { id: 1, name: 'Improved' },
        { id: 2, name: 'Bad' }
];

function ViewModel() {
    var self = this;

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

    self.statuses = statusItems;

    self.remove = function () {
        if (confirm('Are you sure you want to remove the entry?\nThis operation cannot be undone.')) {
            self.Items.remove(this);
        }
    }
}

我的标记是

<div id="dashboard-div">
    @using (Ajax.BeginForm("Save", "Dashboard", new AjaxOptions { HttpMethod = "Post" }, new { id = "dashboardForm" }))
    {
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: Items">
            <tr>
                <td><span data-bind="text: Name" /><input type="hidden" data-bind="value: Id, attr: { name: '['+$index()+'].Id'}" /></td>
                <td>
                    <select id="status-dropdown" data-bind="options: $parent.statuses, optionsText: 'name', optionsValue: 'id', value: Status" />
                </td>
            </tr>
        </tbody>
    </table>
    </div>
    <button data-bind="enable: Items().length > 0" type="submit">Save</button>
    }
</div>

我遇到的问题是下拉值没有绑定到状态。在初始页面加载时,正确设置下拉值。即如果它在数据库中的1将具有“改进的”#39;选中但是当我到达我的控制器中的Save方法时,每个项目的状态(MyViewModel)为0.如果我将Status属性更改为type string,则一切都会有效,直到你到达控制器,其中Status的所有值都为null。

1 个答案:

答案 0 :(得分:0)

布伦特说:

一旦我问我会弄清楚我的问题,我就知道了。我需要将属性名称添加到选择中,以便模型绑定起作用。

只需在此添加,以便其他人更快地找到他的解决方案......