Knockout下拉列表数据绑定不能在ajax调用中工作

Question

I try to bind a dropdownlist in knockout with MVC 4. Please see my code below.

Action

    public JsonResult GetUserTypes()
    {
        using (QuestApplicationEntities db = new QuestApplicationEntities())
        {
            var usertypes = (from usertype in db.UserTypes
                             select new
                             {
                                 usertype.Id,
                                 usertype.Name
                             }).ToArray();

            return Json(usertypes, JsonRequestBehavior.AllowGet);
        }
    }

Knockout.js

var Register =
{
    Name: ko.observable("Ragesh"),
    Email: ko.observable().extend({ email: true }),
    Password: ko.observable(),
    UserTypes: ko.observableArray([]),

    UserType: ko.observable(),

    SaveRegistration: function () {
        //alert('saved');
        $.ajax({
            url: '/Home/RegisterUser',
            type: 'post',
            datatype: 'json',
            data: ko.toJSON(this),
            contentType: 'application/json',
            success: function () {
                alert('saved');
            }
        });
    }
};

$.ajax({
            url: '/Home/GetUserTypes',
            type: 'post',
            datatype: 'json',
            data: ko.toJSON(this),
            contentType: 'application/json',
            success: function () {
                ko.mapping.fromJS(data,Register.UserTypes);
        }
    });

    ko.applyBindings(Register);

Html

  <h4>Register</h4>
 <fieldset>
<legend>New User Registration</legend>
<div class="editor-label">
    Name 
</div>
<div class="editor-field">
    <input data-bind="value:Name" />
</div>
<div class="editor-label">
    Email 
</div>
<div class="editor-field">
    <input data-bind="value:Email" />
</div>
<div class="editor-label">
    User Type 
</div>
<div class="editor-field">
    <select data-bind="options: UserTypes, value: UserType, optionsCaption: 'Select User Type...'">
    </select>
</div>
<p>
    <button type="button" data-bind="click:SaveRegistration">Register</button>
</p>
</fieldset>
<script src="~/Scripts/knockout-2.2.1.js"></script>
<script src="~/Scripts/knockout.validation.js"></script>
<script src="~/Scripts/App/Register.js"></script>

But the GetUserTypes action is not fired.

And there is another error show in the firebug .

Please help.

Answer 1

I think the list is not getting to data variable. so the data variable must be null.

try this. add data parameter in the success function

$.ajax({
        url: '/Home/GetUserTypes',
        type: 'post',
        datatype: 'json',
        data: ko.toJSON(this),
        contentType: 'application/json',
        success: function (data) {
            ko.mapping.fromJS(data,Register.UserTypes);
    }
});

Answer 2

Your action GetUserTypes doesn't expected any parameters, but you pass viewModel object:

....
$.ajax({
    url: '/Home/GetUserTypes',
     type: 'post',
     datatype: 'json',
     data: ko.toJSON(this),
     ...

Try to remove this property from ajax call.

About error in FireBug , just include jQuery script in your page.