与jquery ajax序列化的模型绑定无法正常工作

时间:2013-05-23 15:16:48

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

我有以下型号:

public class RegisterUseraccount
{
    [Required]
    [DataType(DataType.EmailAddress)]
    [Display(Name = "E-Mail-Adresse")]
    public string Email { get; set; }

    [Required]
    [Display(Name = "Vorname")]
    public string FirstName { get; set; }

    [Required]
    [Display(Name = "Nachname")]
    public string LastName { get; set; }

    [Required]
    [DataType(DataType.Password)]
    [MinLength(5)]
    [Display(Name = "Passwort")]
    public string Password { get; set; }

    ...
}

以下观点:

@using (Html.BeginForm("Register", "Useraccount", FormMethod.Post, new { id = "registerUseraccountForm", @class = "ym-form" }))
{
    @Html.ValidationSummary(true)        

    <div class="ym-grid">
        <div class="ym-g50 ym-gl">
            <div class="ym-fbox-text">
                @Html.LabelForRequired(model => model.RegisterUseraccount.FirstName, null)               
                @Html.EditorFor(model => model.RegisterUseraccount.FirstName, new { required = "required", name = "firstName" })
                @Html.ValidationMessageFor(model => model.RegisterUseraccount.FirstName)                  
            </div>
        </div>
    ...

和我的JavaScript

function sendForm(target) {
    alert(data);
    $.ajax({
        url: target,
        type: "POST",
        contentType: 'application/json',
        data: $("#registerUseraccountForm").serialize(),
        success: ajaxOnSuccess,
        error: function (jqXHR, exception) {
            alert('Error message.');
        }
    });

这是序列化的结果:

RegisterUseraccount.FirstName=Peter&RegisterUseraccount.LastName=Miller&RegisterUseraccount.Email=miller%40gmail.com&RegisterUseraccount.Password=admin

这是我试图POST到的控制器方法:

[HttpPost]
public ActionResult Register(RegisterUseraccount registerUseraccount)
{
    ...
}

...但数据没有到达方法,我收到错误404.我认为模型绑定器无法正常工作。

使用名称firstName = Peter发送的数据有效,但实际发送的是RegisterUseraccount.FirstName = Peter。

我该如何处理这个问题?

2 个答案:

答案 0 :(得分:21)

删除contentType: 'application/json',并将其修改为更好(从我的角度来看)

$('#registerUseraccountForm').submit(function () {
    if ($(this).valid()) {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            beforeSend: function () {

            },
            complete: function () {

            },
            ...

答案 1 :(得分:2)

也许你有这个模特

public class YourModel
{
    public RegisterUseraccount RegisterUseraccount { get; set; }
}

在这种情况下,您必须放置与您的操作相对应的模型:

[HttpPost]
public ActionResult Register(YourModel model)
{
    var registerUseraccount = model.RegisterUseraccount;
    ...
}

或者:

@using (Html.BeginForm("Register", "Useraccount", FormMethod.Post, new { id = "registerUseraccountForm", @class = "ym-form" }))
{
   @{ Html.RenderPartial("RegisterUseraccount"); }
}

RegisterUseraccount.cshtml

@model YourNamespace.RegisterUseraccount

@Html.ValidationSummary(true)        

<div class="ym-grid">
    <div class="ym-g50 ym-gl">
        <div class="ym-fbox-text">
            @Html.LabelForRequired(model => model.FirstName, null)               
            @Html.EditorFor(model => model.FirstName, new { required = "required", name = "firstName" })
            @Html.ValidationMessageFor(model => model.FirstName)                  
        </div>
    </div>

但您必须更改@Html.ValidationSummary (true)等内容。

修改

或最简单:

data: $("#registerUseraccountForm").serialize().replace("RegisterUseraccount.",""),

编辑II

data: $("#registerUseraccountForm").serialize().replace(/RegisterUseraccount./g,""),