Binding model with jquery ajax serialization not working

Question

I have the following model:

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; } ... } 

And the following view:

 @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> ... 

and my 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.'); } }); 

This is the result of serialization:

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

This is my controller method that I am trying to do POST:

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

... but the data does not come to the method, I get a 404 error. I think the manipulator model cannot work.

What works is the data that is sent with the name firstName = Peter, but actually RegisterUseraccount.FirstName = Peter is sent.

How can I deal with this problem?

Answer 1

remove contentType: 'application/json', and change it better (from my point of view)

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

Answer 2

Perhaps you have this model

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

In this case, you need to put the model corresponding to your action:

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

Or:

 @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> 

but you have to change some things like @Html.ValidationSummary (true) .

Edit

or the simplest:

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

Change II

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