通过AJAX而不是回发模型绑定复选框时出现MVC 3问题

时间:2011-11-25 10:57:58

标签: jquery asp.net-mvc asp.net-mvc-3 razor

我有一个问题,即使用包含布尔值的自定义对象将表单中的复选框绑定到服务器上的操作。

做谷歌似乎有很多问题,并没有好的解决方案。我尝试了很多东西,问题似乎只发生在通过ajax调用而不是正常的回发发送时。

我的项目中有以下内容(为简洁而减少):

查看

@Html.LabelFor(model => model.TillAccess)
@Html.CheckBoxFor(m => m.TillAccess)

模型

public class CreateUserModel 
{
    public Boolean TillAccess { get; set; } 
}

控制器操作

[HttpPost]
public virtual ActionResult CreateUserWizard(CreateUserModel model)
{
   ...
}

我在表单中添加了2个按钮,一个作为回发发送并正常工作。如果我在fiddler2上检查它,它会发送以下回发:

TillAccess=true&TillAccess=false

如果我使用ajax按钮发送它,它会发送以下内容,并且不起作用:

{"TillAccess":["true","false"]}

MVC模型绑定JSON会阻止此工作吗?

我无法通过AJAX(我将大量使用)来实现这一点,其他每个字段都绑定得很好,而不是复选框,事实上这很正常,因为正常的回发表明它是JSON序列化程序的一个问题或MVC的模型绑定器?

更新

ajax调用如下:

function CreateUser() {
        var FormData = JSON.stringify($('#CreateUserWizardForm').serializeObject());

        $.ajax({
            url: '@Url.Action(MVC.User.User.ActionNames.CreateUserWizard)',
            data: FormData,
            contentType: "application/json",
            dataType: "json",
            type: 'POST',
            cache: 'false',
            success: function (response) {
                alert('successfully created user!');
            },
            error: function (xhr) {
                alert('There was an error creating a user');
            }
        });
    }

完整的ajax帖子如下:fyi:

{"BusinessUnitId":"cd56b710-0171-11e1-be50-0800200c9a66","Person.Salutation":"","Person.FirstName":"","Person.LastName":"","‌​TillAccess":["true","false"],"OfficeAccess":"false","TillLoginId":"","OfficeEmail‌​Address":"","OfficePassword":""}

更新

serializeObject方法是从互联网上下载的(因为我的帖子有json问题),如下所示:

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

更新

我使用此serializeObject方法的原因是由于我收到的错误,如果我使用内置调用:

$('#CreateUserWizardForm').serialize()

它创建了一个帖子:

BusinessUnitId=cd56b710-0171-11e1-be50-0800200c9a66&Person.Salutation=&Person.FirstName=&Person.LastName=&TillAccess=true&TillAccess=false&OfficeAccess=false&TillLoginId=&OfficeEmailAddress=&OfficePassword=

这给了我一个错误如下:

System.ArgumentException: Invalid JSON primitive: BusinessUnitId.

更新 - 答案(我试图在底部添加我的答案,但它不会让我)

我找到了解决方案。这是我的AJAX调用错了。我将其更改为以下内容并且正在运行。

$.ajax({
            url: '@Url.Action(MVC.User.User.ActionNames.CreateUserWizard)',
            data: $('#CreateUserWizardForm').serialize(),
            type: 'POST',
            cache: 'false',
            success: function (response) {
                alert('successfully created user!');
            },
            error: function (xhr) {
                alert('There was an error creating a user');
            }
        });

旧的AJAX电话:

var FormData = JSON.stringify($('#CreateUserWizardForm').serializeObject());

        $.ajax({
            url: '@Url.Action(MVC.User.User.ActionNames.CreateUserWizard)',
            data: FormData,
            contentType: "application/json",
            dataType: "json",
            type: 'POST',
            cache: 'false',
            success: function (response) {
                alert('successfully created user!');
            },
            error: function (xhr) {
                alert('There was an error creating a user');
            }
        });

2 个答案:

答案 0 :(得分:2)

我找到了解决方案。这是我的AJAX调用错了。我将其更改为以下内容并且正在运行。

$.ajax({
            url: '@Url.Action(MVC.User.User.ActionNames.CreateUserWizard)',
            data: $('#CreateUserWizardForm').serialize(),
            type: 'POST',
            cache: 'false',
            success: function (response) {
                alert('successfully created user!');
            },
            error: function (xhr) {
                alert('There was an error creating a user');
            }
        });

旧的AJAX电话:

var FormData = JSON.stringify($('#CreateUserWizardForm').serializeObject());

        $.ajax({
            url: '@Url.Action(MVC.User.User.ActionNames.CreateUserWizard)',
            data: FormData,
            contentType: "application/json",
            dataType: "json",
            type: 'POST',
            cache: 'false',
            success: function (response) {
                alert('successfully created user!');
            },
            error: function (xhr) {
                alert('There was an error creating a user');
            }
        });

答案 1 :(得分:0)

您需要发送

{"model":{"TillAccess":["true","false"]}}

模型绑定器未绑定模型,因为它无法将model参数与任何属性匹配。

更新:

TillAccess属性的类型为bool,但您要发送一个包含2个字符串的数组。我认为这是一个问题