NET Core - Ajax post not binding child model - asp.net-core

Question

Child model binding is not working properly on Ajax post call in .Net core controller method
I am using below model -
public class UserViewModel
{
public UserViewModel()
{
UserAttribute = new CAMPv2.Models.AutoPoco.UserAttribute();
}
public UserAttribute UserAttribute { get; set; }
}
public class UserAttribute
{
[JsonPropertyName("FirstName")]
public string FirstName { get; set; }
}
Below is the Ajax call -
#using User.Models
#model UserViewModel
#{
ViewData["Title"] = "UserDetails";
}
<form class="kt-form" id="kt_form">
<div class="kt-wizard-v3__content" data-ktwizard-type="step-content" data-ktwizard-state="current">
<div class="kt-form__section kt-form__section--first">
<div class="form-group row required">
<label for="FirstName" class="col-md-3 col-form-label k-font-bold text-md-right control-label">First Name</label>
<div class="col-6">
<input type="text" class="form-control" name="FirstName" placeholder="" required asp-for="UserAttribute.FirstName">
</div>
</div>
</div>
<div class="btn btn-brand btn-md btn-tall btn-wide btn-bold btn-upper" data-ktwizard-type="action-submit" id="btnSubmit">Submit</div>
</div>
</form>
<script>
$("#btnSubmit").click(function () {
var formData = $("#kt_form").serialize();
alert(formData);
$.ajax({
url: "/User/CreateUser/",
data: formData,
type: "POST",
dataType: "json",
success: function (result) {
if (result.success) {
alert('data submitted successfully');
}
},
error: function (result) {
alert('failed to submit data');
},
});
});
</script>
Below is action method -
[HttpPost]
public ActionResult CreateUser(UserViewModel model)
{
try
{
return Json(new { success = true, result = model, errorMessage = "" });
}
catch (WebException ex)
{
return Json(new { success = false, errorMessage = ex.Message });
}
}
Model values are null. Can anyone please let me know what i am missing here? Ajax post call is returning model to action method with null values.

Answer 1

Model values are null. Can anyone please let me know what i am missing here? Ajax post call is returning model to action method with null values.
As far as I know, if you use $("#kt_form").serialize() it will serialize the form into from data according to input tag's name attribute.
But you have set the input tag's name to FirstName. That means the asp.net core model binding will bind the value to FirstName property. But the value is used for UserAttribute's FirstName not the viewmodel's FirstName. This is the reason why your model binding result is null.
To solve this issue, I suggest you could try to use asp.net core tag helper to help you generate the input tag name or you could modify the name property to UserAttribute.FirstName.
You could modify the input as below:
<input type="text" class="form-control" placeholder="" required asp-for="#Model.UserAttribute.FirstName">
Detail view codes:
<form class="kt-form" id="kt_form">
<div class="kt-wizard-v3__content" data-ktwizard-type="step-content" data-ktwizard-state="current">
<div class="kt-form__section kt-form__section--first">
<div class="form-group row required">
<label for="FirstName" class="col-md-3 col-form-label k-font-bold text-md-right control-label">First Name</label>
<div class="col-6">
<input type="text" class="form-control" placeholder="" required asp-for="#Model.UserAttribute.FirstName">
</div>
</div>
</div>
<div class="btn btn-brand btn-md btn-tall btn-wide btn-bold btn-upper" data-ktwizard-type="action-submit" id="btnSubmit">Submit</div>
</div>
</form>
Result: