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

Posted 2023-03-27

【中文标题】ASP.NET MVC 敲除绑定不起作用

【英文标题】：ASP.NET MVC Knockout Binding Not Working

【发布时间】：2015-01-05 01:52:54

【问题描述】：

我正在使用 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 = "[e-mail]", 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>

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

【参考方案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

【讨论】：

非常感谢您的回复。实际上已经声明了 Viewmodel 但我没有在这里添加完整的代码。我会做出建议的更改，但是当我提交我的意思的表格时会反映出来吗（将列表传递给控制器​​操作）。

【参考方案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 循环