Question

我有两个分层的MVC4 .NET应用程序，带有DAL和Web层。尝试使用Ajax返回的数据绑定数据时遇到问题。

在Html上，我正在尝试获取SubcriteriaList成员，并在填充其值时为每个成员创建表。

HTML：

 <h2 style="text-align:center">Criteria Info</h2>
<table align="center">
    <tr>
        <th colspan="3">Subcriteria Info</th>
    </tr>
    <tr>
        <td>
            <table class="table-condensed">
                <tbody data-bind="foreach:SubcriteriaList">
                    <tr>
                        <td>
                            <table class="table-condensed">
                                <tr>
                                    <th colspan="5" width="100%;">
                                        <select style="width:100%;"></select>
                                    </th>
                                    <td>
                                        <a class="btn btn-small btn-danger" href="#" style="margin-bottom:10px">X</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label style="padding-top:5px;">Code</label>
                                    </td>
                                    <td>
                                        <input class="input-large" placeholder="Code" data-bind="value:Code" />
                                    </td>
                                    <td>
                                        <label style="padding-top:5px;">Weight</label>
                                    </td>
                                    <td>
                                        <input class="input-large" placeholder="Weight" data-bind="value:Weight" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label style="padding-top:5px;">Name</label>
                                    </td>
                                    <th colspan="4" width="100%;">
                                        <input style="width:100%;" class="input-large" placeholder="Name" data-bind="value:Name" />
                                    </th>
                                </tr>
                                <tr>
                                    <td>
                                        <label style="padding-top:5px;">Goal</label>
                                    </td>
                                    <td>
                                        <input class="input-large" placeholder="Goal" data-bind="value:Goal" />
                                    </td>
                                    <td>
                                        <label style="padding-top:5px;">Achieved</label>
                                    </td>
                                    <td>
                                        <input class="input-large" placeholder="Achieved" data-bind="value:Achieved" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr style="text-align:right">
        <td>
            <p>
                <button class="btn btn-small btn-primary">Add Criteria</button>
            </p>
        </td>
    </tr>
</table>

在不同的JavaScript文件中敲除JS ViewModel。

JavaScript文件：

function SubCriteriaViewModel() {
    var self = this;

    self.id = ko.observable("");
    self.code = ko.observable("");
    self.name = ko.observable("");
    self.weight = ko.observable("");
    self.goal = ko.observable("");
    self.achieved = ko.observable("");
    self.isActive = ko.observable("");

    var Subcriteria = {
        Id: self.id,
        Code: self.code,
        Name: self.name,
        Weight: self.weight,
        Goal: self.goal,
        Achieved: self.achieved,
        IsActive: self.isActive
    };

    self.Subcriteria = ko.observable();
    self.SubcriteriaList = ko.observableArray();

    // Initializing the view-model
    $.ajax({
        url: "/Subcriteria/GetAllSubcriteria",
        cache: false,
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        data: {},
        success: function (data) {
            alert(data);
            //Probably Problem is here
            self.SubcriteriaList(data); //Putting the response in ObservableArray
            alert(SubcriteriaList);
            alert(Subcriteria);
        }
    });
}
var viewModel = new SubCriteriaViewModel();
ko.applyBindings(viewModel);

当alert(data)命中时，我可以看到; [object Object],[object Object],[object Object] 返回succesfuly然而我无法将此JsonResult添加到SubCriteriaList数组。

因此（我认为）我得到了

*Uncaught ReferenceError: Unable to process binding "value: function(){return Code }" Message: Code is not defined*

错误。

如何使用此Ajax用法填充此SubcriteriaList数组？

提前致谢。

Answer 1

您的数据绑定为Code，但您的观察结果为code。变量名称区分大小写。您需要修复所有不匹配的内容，因为一旦修复了这些内容，其他内容就会失败。

但是你还有其他一些问题。您实际上并未将响应映射到视图模型。您可能应该有父视图和子视图模型。孩子将拥有属性，并且将成为ajax响应的映射。孩子会维护列表，执行ajax请求等等。

function SubCriteriaViewModel(data) {
    var self = this;

    self.id = ko.observable(data.id);
    self.code = ko.observable(data.code);
    self.name = ko.observable(data.name);
    self.weight = ko.observable(data.weight);
    self.goal = ko.observable(data.goal);
    self.achieved = ko.observable(data.achieved);
    self.isActive = ko.observable(data.isActive);        
}

function ViewModel() {
    var self = this;
    self.SubcriteriaList = ko.observableArray();

    // Initializing the view-model
    $.ajax({
        url: "/Subcriteria/GetAllSubcriteria",
        cache: false,
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        data: {},
        success: function (data) {
            var subcriteriaList = data.map(function (item) { return new SubCriteriaViewModel(item); });
            self.SubcriteriaList(subcriteriaList); //Putting the response in ObservableArray
        }
    });
}
var viewModel = new ViewModel();
ko.applyBindings(viewModel);

然后，记得解决所有套管问题。这里只有一个：

<input class="input-large" placeholder="Code" data-bind="value:Code" />

应该是

<input class="input-large" placeholder="Code" data-bind="value:code" />

未捕获的ReferenceError：无法使用Ajax处理绑定

1 个答案: