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

Question

我正在使用Mvc4/bootstrap 3.2和knockout 3.2。問題我有一個表單有一個。文本框和按鈕，在按鈕上單擊我將文本框值傳遞給控制器​​。從表控制器綁定viewModel接收數據後。但是這兩個數據都沒有在表中更新，也沒有更新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 = "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。它會在knockout 3.x中拋出一個異常 - 你不能將兩個viewModel綁定到同一個元素。它也是對knockout.js和數據綁定的基本概念的誤解。如果修改模型，則更改會自動傳播到視圖，您不必調用任何函數... ko.applyBindings僅用於初始化新綁定。這不是你的情況，你有一個現有的綁定，你只是想更新模型。

也許有可能是另一種錯誤，我沒有檢查整個代碼...

BTW你也有性能問題，請查看這篇文章 - 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'); 
      } 
     }); 
    } 

：Jookyn。我附上了用於更新List的完整JS代碼。代替查找集合我一直在使用「LinkedSiblings」作爲foreach循環在表