如何綁定與ASP.NET MVC和Knockout JS的複選框的真/假值

Question

我試圖從ASP.NET webpages_Membership表中將IsConfirmed字段綁定到複選框，使用Knockout JS並且似乎無法獲取它工作。

我把它綁定到複選框，但是除非我將它設置爲！$ data.IsConfirmed，否則複選框不會被檢查。我還掛鉤了一個點擊事件來觸發我的視圖模型中的updateUser函數，它會更新它，但不會切換髮送的值。它總是發送true，如果複選框被選中，它應該發送true，否則爲false，然後取消選中複選框。

這裏是我的標記

<table id="usersTable" class="table table-striped table-bordered table-hover"> 
    <thead> 
     <tr> 
      <th>User ID</th> 
      <th>Username</th> 
      <th>Role</th> 
      <th>Date Created</th>    
      <th>Last Failed Login</th>    
      <th>Active</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: users"> 
     <tr>    
      <td> 
       <span data-bind="text: $data.UserId"></span> 
      </td> 
      <td> 
       <span data-bind="text: $data.Username"></span> 
      </td> 
      <td> 
       <span data-bind="text: $data.Role"></span> 
      </td>    
      <td> 
       <span data-bind="text: $data.DateCreated"></span> 
      </td> 
      <td> 
       <span data-bind="text: $data.LastFailedLogin"></span> 
      </td> 
      <td> 
       <input type="checkbox" data-bind="click: updateUser, checked: $data.IsConfirmed" /> 
      </td>   
     </tr> 
    </tbody> 
</table> 

和JavaScript

<script type="text/javascript"> 
    var baseUri = '@ViewBag.ApiUrl'; 
    var self = this; 
    self.users = ko.observableArray(); 
    // define user view-model 
    function UsersViewModel() {    
     // get users to populate the view model   
     $.getJSON(baseUri, self.users);   

     // update the users IsConfirmed status 
     self.updateUser = function (user) {    
      $.ajax({ type: "PUT", url: baseUri + '/' + user.UserId, data: user }); 
     } 
     // re-load the users after any modifications 
     $.getJSON(baseUri, self.users);   
    }; 
    $(document).ready(function() { 
     ko.applyBindings(new UsersViewModel());   
    }); 
</script> 

JSON從服務器

[{ 
    "UserId": 6, 
    "Username": "john@jdoe.com", 
    "Role": "Guest", 
    "DateCreated": "11/12/2012 1:18:41 PM", 
    "LastFailedLogin": "", 
    "IsConfirmed": false 
}, { 
    "UserId": 3, 
    "Username": "simpleuser", 
    "Role": "Administrator", 
    "DateCreated": "11/11/2012 6:17:32 PM", 
    "LastFailedLogin": "", 
    "IsConfirmed": false 
}, { 
    "UserId": 2, 
    "Username": "testUser", 
    "Role": "Administrator", 
    "DateCreated": "11/11/2012 6:17:32 PM", 
    "LastFailedLogin": "", 
    "IsConfirmed": false 
}, { 
    "UserId": 5, 
    "Username": "jdoe1@nowhere.com", 
    "Role": "Student", 
    "DateCreated": "11/12/2012 3:31:38 AM", 
    "LastFailedLogin": "", 
    "IsConfirmed": false 
}, { 
    "UserId": 8, 
    "Username": "nobody@somewhere.com", 
    "Role": "Alumni", 
    "DateCreated": "11/12/2012 1:24:15 PM", 
    "LastFailedLogin": "", 
    "IsConfirmed": false 
}, { 
    "UserId": 9, 
    "Username": "test@test.com", 
    "Role": "Applicant", 
    "DateCreated": "11/12/2012 1:25:18 PM", 
    "LastFailedLogin": "", 
    "IsConfirmed": false 
}, { 
    "UserId": 1, 
    "Username": "user1", 
    "Role": "Administrator", 
    "DateCreated": "11/11/2012 6:17:31 PM", 
    "LastFailedLogin": "11/12/2012 4:54:51 PM", 
    "IsConfirmed": false 
}, { 
    "UserId": 4, 
    "Username": "test@test.com", 
    "Role": "Alumni", 
    "DateCreated": "11/11/2012 6:22:23 PM", 
    "LastFailedLogin": "11/11/2012 8:23:57 PM", 
    "IsConfirmed": false 
}, { 
    "UserId": 7, 
    "Username": "test@test2.com", 
    "Role": "Student", 
    "DateCreated": "11/12/2012 1:23:56 PM", 
    "LastFailedLogin": "", 
    "IsConfirmed": false 
}] 

C＃的Web API控制器

// GET api/Membership 
     public IEnumerable<SiteMemberDTO> GetMemberships() 
     { 
      var users = db.webpages_Membership.AsEnumerable(); 
      var profiles = db.UserProfiles.AsEnumerable();    

      // now build our DTO object 
      var membersList = new List<SiteMemberDTO>(); 
      foreach (var profile in profiles) 
      { 
       var member = new SiteMemberDTO() { 
        UserId = profile.UserId, 
        Username = profile.UserName, 
        Role = profile.webpages_Roles.SingleOrDefault(r => r.RoleName != "").RoleName, 
        DateCreated = db.webpages_Membership.Find(profile.UserId).CreateDate.ToString(), 
        LastFailedLogin = db.webpages_Membership.Find(profile.UserId).LastPasswordFailureDate.ToString() 
       }; 

       membersList.Add(member); 
      } 
      return membersList; 
     } 

DTO（數據傳輸，對象）

public class SiteMemberDTO 
    { 
     public int UserId { get; set; } 
     public string Username { get; set; } 
     public string Role { get; set; } 

     public string DateCreated { get; set; } 
     public string LastFailedLogin { get; set; } 

     public bool IsConfirmed { get; set; } 
    } 

這是我在做什麼的完整代碼。出於某種原因，我在JSON中看到，它在IsConfirmed中返回false，在數據庫中它對於每條記錄都爲真。

Answer 1

我看到你在創建DTO對象時沒有分配IsConfirmed。這就是爲什麼它總是假的！

var member = new SiteMemberDTO() { 
       UserId = profile.UserId, 
       Username = profile.UserName, 
       Role = profile.webpages_Roles.SingleOrDefault(r => r.RoleName != "").RoleName, 
       DateCreated = db.webpages_Membership.Find(profile.UserId).CreateDate.ToString(), 
       LastFailedLogin = db.webpages_Membership.Find(profile.UserId).LastPasswordFailureDate.ToString(), 
       IsConfirmed = profile.IsConfirmed 
      }; 

編輯：

似乎還有與複選框問題，請單擊事件：Checkboxes are being checked before click handler is even called

所以不是點擊，使用改變事件：

data-bind="checked: IsConfirmed, event: { change: $parent.updateUser}" 

結帳這個小提琴： http://jsfiddle.net/Soroush/89anx/10/