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

问题描述:

我正在使用Mvc4/bootstrap 3.2和knockout 3.2。问题我有一个表单有一个。文本框和按钮,在按钮上单击我将文本框值传递给控制器​​。从表控制器绑定viewModel接收数据后。但是这两个数据都没有在表中更新,也没有更新mvc模型。我在提交数据时检查了一下。ASP.NET MVC敲除绑定不起作用

视图模型:我已经在两个方面

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'); 
      } 
     }); 
    } 

试过ViewMoel然后我写了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 = "[email protected]", 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> 

无论是观与价值观接收控制器上的方法不是价值观提交时更新表格。

有呼吁在你的AJAX回调ko.applyBindings两个问题:

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

第一个问题是,你是通过变量viewModel未声明的(我看不到的声明),或包含旧数据(您更新的数据为SibviewModel.SibviewModel

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

也许有可能是另一种错误,我没有检查整个代码...

BTW你也有性能问题,请查看这篇文章 - http://www.knockmeout.net/2012/04/knockoutjs-performance-gotcha.html

+0

非常感谢您的回应。实际上已经宣布Viewmodel,但我没有在这里添加完整的代码。我会提出建议的更改,但是当我提交表格时,会反映出我的意思(将列表传递给控制器​​操作)。 – 2014-11-11 11:45:17

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'); 
      } 
     }); 
    } 

:Jookyn。我附上了用于更新List的完整JS代码。代替查找集合我一直在使用“LinkedSiblings”作为foreach循环在表