敲除下拉列表数据绑定在 ajax 调用中不起作用答案

【问题标题】：Knockout dropdownlist databind is not working in ajax call敲除下拉列表数据绑定在 ajax 调用中不起作用
【发布时间】：2014-04-05 19:51:41
【问题描述】：

我尝试使用 MVC 4 在淘汰赛中绑定下拉列表。这是我的代码：

动作

    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>

但没有触发 GetUserTypes 操作。

Firebug 中显示另一个错误。

【问题讨论】：

你需要在页面中添加'jquery'库。
我在我的 _Layout.cshtml 页面中使用 @Scripts.Render("~/bundles/jquery") 。我认为它不起作用。现在我直接在我的网页中调用 jQuery 文件。

标签： c# javascript jquery asp.net knockout.js

【解决方案1】：

您的操作GetUserTypes 不需要任何参数，但您传递了 viewModel 对象：

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

尝试从 ajax 调用中删除此属性。

关于 FireBug 中的错误，只需在您的页面中包含 jQuery 脚本即可。

【讨论】：

感谢您的宝贵重播。我在我的布局页面中评论了@Scripts.Render("~/bundles/jquery")。并直接在我的 .cshtml 文件中调用 jQuery，并删除 ajax 请求中的 data 属性。但另一个错误显示在火灾错误“ko.mapping is undefined”中。
关于ko.mapping，包括knockout.mapping.js。
对不起，我没有在我的应用程序中添加包敲除映射。现在我添加了这个包。并在我的网页中引用 knockout.mapping-latest.js。
但它显示 ReferenceError: data is not defined ko.mapping.fromJS(data, Register.UserTypes);
在success函数中添加data参数。

【解决方案2】：

我认为该列表没有进入数据变量。所以数据变量必须为空。

试试这个。在成功函数中添加数据参数

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

【讨论】：