如何绑定与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/