与 jquery ajax 序列化的模型绑定不起作用

Posted 2023-05-08

【中文标题】与 jquery ajax 序列化的模型绑定不起作用

【英文标题】：Model binding with jquery ajax serialize not working

【发布时间】：2013-05-19 00:52:34

【问题描述】：

我有以下型号：

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

这是我尝试发布到的控制器方法：

[HttpPost]
public ActionResult Register(RegisterUseraccount registerUseraccount)

    ...

...但是数据没有到达方法，我收到错误404。我认为modelbinder无法工作。

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

我该如何处理这个问题？

【问题讨论】：

你确定url 是正确的吗？

你在哪里调用sendForm方法？

删除contentType: 'application/json',

【参考方案1】：

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

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

            ,
            complete: function () 

            ,
            ...

【讨论】：

你说得对，我所要做的就是删除 contentType ...谢谢！

【参考方案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,""),

【讨论】：

.replace() 只替换字符串的第一个实例，所以它不起作用。

这有效：var data = $("#registerUseraccountForm").serialize().replace(new RegExp("RegisterUseraccount.", "g"), '');

@mosquito87 感谢 cmets，我已经修复了 javascript 代码

【参考方案3】：

使用 jQuery ajax 发布数据有两种变体。

使用 $.ajax 使用 $.post

下面展示了如何使用 $.post

   $('#btn-register').click(function () 

        var $form = $('#registerUseraccountForm');

         if ($form.valid()) 
        
               var url = $form.attr('action'),
                   fd = $form.serialize();
    
                $.post(url, fd).done(function (result) 
                    if (result) 
                        Swal.fire(
                            'Success!',
                            'User registered successfully',
                            'success'
                        )
                     else
                        Swal.fire(
                            'Failed!',
                            'Failed to register user',
                            'error'
                        )
                ).fail(function () 
                    Swal.fire(
                        'Failed!',
                        'Failed to register user',
                        'error'
                    )
                );
            else
                Swal.fire(
                    'Invalid!',
                    'Form contains invalid data',
                    'error'
                )
            
        );

我会说，在不需要像使用 $.ajax 那样进行额外配置的地方，只需序列化表单并发布即可。当然，如果您已经为字段定义了验证，请验证表单。很简单！

【讨论】：

仅供参考：这里的“Swal”是一个名为“Sweet alerts”的单独 javascript 库