1

Knockout JSを使用して、ASP.NET webpages_MembershipテーブルのIsConfirmedフィールドをチェックボックスにバインドしようとしていますが、機能していないようです。

チェックボックスにバインドしていますが、！$ 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＃WebAPIコントローラー

// 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が返されます。

4

1 に答える 1

2

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

編集：

チェックボックスとクリックイベントに問題があるようです。クリックハンドラーが呼び出される前にチェックボックスがチェックされています

したがって、クリックする代わりに、変更イベントを使用します。

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

このフィドルをチェックアウト：http：//jsfiddle.net/Soroush/89anx/10/

于 2012-11-13T07:20:18.913 に答える