Question

我正在尝试将ASP.NET webpages_Membership表中的IsConfirmed字段绑定到一个复选框，使用Knockout JS并且似乎无法使其正常工作。

我将它绑定到复选框，但除非我将其设置为！$ data.IsConfirmed，否则不会选中复选框。我还连接了一个click事件来触发我的视图模型中的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/

如何使用ASP.NET MVC和Knockout JS将true / false值绑定到checkbox

1 个答案: