MVC model binding does not work with AJAX request

Question

Having a slight problem with binding the MVC model through AJAX.

Can someone tell me why the CreateTransfereeDetails property is optional, it always returns as "null".

Model:

public class ResolveProfileSelectionRequiredModel { public CreateTransfereeModel CreateTransfereeDetails { get; set; } public bool NewTransfereeSelected { get; set; } } public class CreateTransfereeModel { [Display(Name = "Transferee Name:")] public string TransfereeName { get; set; } } 

Html:

 <input type="text" id="TransfereeName" /> <input type="hidden" id="NewTrasnfereeSelected" /> 

JavaScript:

 var createTransfereeDetails = { "TransfereeName": $("#TransfereeName").val() }; $.ajax({ url: "/myurl", dataType: "json", traditional: true, type: "POST", data: { CreateTransfereeDetails: createTransfereeDetails, NewTransfereeSelected: $("#NewTransfereeSelected").val() }, success: function (result) { // }, error: function (XMLHttpRequest, textStatus, errorThrown) { // }, complete: function () { // } }); 

Thanks!

Answer 1

use name attribute for input fields inside the form. Name attribute values automatically assigned to the model properties.

 <form method="post" id="frm"> <input type="text" name="id="TransfereeName" " id="TransfereeName" /> <input type="hidden" name="NewTrasnfereeSelected" id="NewTrasnfereeSelected" /> <input type="button" onclick="submit()" value="submit" /> </form> 

and use the serialize () jquery function to transfer data using ajax

 function submit(){ $.ajax({ url: "/myurl", dataType: "json", traditional: true, type: "POST", data: $('#frm').serialize(), success: function (result) { // }, error: function (XMLHttpRequest, textStatus, errorThrown) { // }, complete: function () { // } }); }