ASP.NET MVC 敲除绑定不起作用

Question

我正在使用 Mvc4/bootstrap 3.2 和淘汰赛 3.2。问题是我有一个表格。文本框和按钮，单击按钮时，我将文本框值传递给控制器​​。从控制器绑定 viewModel 接收数据后，使用表。但是表中的数据都没有更新，mvc 模型也没有更新。我在提交数据时已经检查过了。

ViewModel : 我用两种方式尝试过 ViewMoel

var SibviewModel=null;
    $(function () {
        var model = @Html.Raw(Json.Encode(Model));
        SibviewModel = ko.mapping.fromJS(model);
        ko.applyBindings(SibviewModel);
    });

function GetMatchingSibling(_Id) {
        var url = "/Home/GetStudentSiblingDetails/?Id=" + _Id;
        $("#myModal").modal('show');
        $.ajax({
            url: url,
            cache: false,
            type: "GET",
            success: function (data) {
                try {
                    $(data.data).each(function (index, element) {
                        SibviewModel.SibviewModel.push(element);
                    });
                    ko.applyBindings(viewModel);

                } catch (e) {
                    $(".alert-dismissable")
                    .alert('show')
                    .addClass("alert-danger")
                    .append("<h3>"+e+"</h3>");

                }
                finally {
                    $("#myModal").modal('hide');
                }


            },
            error: function (reponse) {
                alert("error : " + data.error);
                $("#myModal").modal('hide');
            }
        });
    }

然后我写了 MVC Razor 视图

<tbody data-bind="foreach: lookupCollection">
            @foreach (var item in Model.LinkedSiblings)
            {
                string dobval = "";
                if (Model.DOB.HasValue)
                {
                    dobval = Model.DOB.Value.ToString("dd-MM-yyyy");
                }

                @Html.HiddenFor(x => item.PhoneNo, new { @Name = "LinkedSiblings[" + item.DynamicControlId + "].PhoneNo", @Value = item.PhoneNo, data_bind = "value: PhoneNo" })
                @Html.HiddenFor(x => item.Email, new { @Name = "LinkedSiblings[" + item.DynamicControlId + "].Email", @Value = "santokh.hcl@hmail.com", data_bind = "value: Email" })
                @Html.HiddenFor(x => dobval, new { @Name = "LinkedSiblings[" + item.DynamicControlId + "].DOB", @Value = dobval, data_bind = "value: DOB" })
                @Html.HiddenFor(x => item.LastName, new { @Name = "LinkedSiblings[" + item.DynamicControlId + "].LastName", @Value = item.LastName, data_bind = "value: LastName" })
                <tr>
                    <td data-bind="text: StudentId">@Html.TextBoxFor(x => item.StudentId, new { style = "max-width:100px;", @Name = "LinkedSiblings[" + item.DynamicControlId + "].StudentId", @Value = item.StudentId, data_bind = "value: StudentId" })
                    </td>
                    <td>@Html.TextBoxFor(x => item.AdmissionId, new { style = "max-width:100px;", @Name = "LinkedSiblings[" + item.DynamicControlId + "].AdmissionId", @Value = item.AdmissionId, data_bind = "value: AdmissionId" })
                    </td>
                    <td>@Html.TextBoxFor(x => item.FirstName, new { style = "max-width:100px;", @Name = "LinkedSiblings[" + item.DynamicControlId + "].FirstName", @Value = item.FirstName, data_bind = "value: FirstName" })
                    </td>
                    <td>@Html.TextBoxFor(x => item.ClassId, new { style = "max-width:100px;", @Name = "LinkedSiblings[" + item.DynamicControlId + "].ClassId", @Value = item.ClassId, data_bind = "value: ClassId" })
                    </td>
                </tr>

            }
            @Html.EditorFor(x => Model.LinkedSiblings)
        </tbody>
    </table>

提交表单时，视图不会使用控制器方法接收到的值更新。

Answer 1

在你的 AJAX 回调中调用 ko.applyBindings 有两个问题：

try {
    $(data.data).each(function (index, element) {
        SibviewModel.SibviewModel.push(element);
    });
    ko.applyBindings(viewModel);
}

第一个问题是您传递的变量viewModel 未声明（我看不到声明）或包含旧数据（您更新了SibviewModel.SibviewModel 中的数据）

第二个问题是你不应该打电话给ko.applyBindings。它将在淘汰赛 3.x 中引发异常 - 您不能将两个 viewModel 绑定到同一个元素。也是对knockout.js和数据绑定的基本概念的误解。如果您修改模型，更改会自动传播到视图，您不必调用任何函数...ko.applyBindings 仅用于初始化新绑定。这不是你的情况，你有一个现有的绑定，你只是想更新模型。

可能还有其他错误，我没有检查整个代码...

顺便说一句，您还有性能问题，请查看这篇文章 - http://www.knockmeout.net/2012/04/knockoutjs-performance-gotcha.html

Answer 2

  var viewModel = {
        lookupCollection: ko.observableArray()
    };
    var SibviewModel=null;
    $(function () {
        var model = @Html.Raw(Json.Encode(Model));
        SibviewModel = ko.mapping.fromJS(model);
        ko.applyBindings(SibviewModel);
    });

    function GetMatchingSibling(_Id) {
        var url = "/Home/GetStudentSiblingDetails/?Id=" + _Id;
        $("#myModal").modal('show');
        $.ajax({
            url: url,
            cache: false,
            type: "GET",
            success: function (data) {
                try {
                    $(data.data).each(function (index, element) {
                        SibviewModel.LinkedSiblings.push(element);
                    });
                    ko.applyBindings(LinkedSiblings);

                } catch (e) {
                    $(".alert-dismissable")
                    .alert('open')
                    .removeClass('alert-warning')
                    .addClass("alert-danger")
                    .append("<h3>"+e+"</h3>");   
                }
                finally {
                    $("#myModal").modal('hide');
                }
            },
            error: function (reponse) {
                alert("error : " + data.error);
                $("#myModal").modal('hide');
            }
        });
    }

:乔金。我附上了用于更新列表的完整 JS 代码。代替查找集合，我一直在使用“LinkedSiblings”进行表上的 foreach 循环