c# - 如何使用 ASP.NET MVC 和 Knockout JS 将真/假值绑定(bind)到复选框

Question

我正在尝试使用 Knockout JS 将 ASP.NET webpages_Membership 表中的 IsConfirmed 字段绑定(bind)到复选框，但似乎无法正常工作。

我将其绑定(bind)到复选框，但除非我将其设置为 !$data.IsConfirmed，否则复选框不会被选中。我还在我的 View 模型中连接了一个点击事件来触发一个 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# 网络 API Controller

// 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，而在数据库中它为每条记录返回 true。

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}"

检查这个 fiddle :http://jsfiddle.net/Soroush/89anx/10/