AJAX post a modelview to my controller - ajax

Question

I'm making a website where a moderator can at a certain pc part. This is just a form on my website. I want the form to post trough AJAX so it doesn't refreshed after a part has been added. I'm making the application with ASP.net Core 2.0
This is my view:
#model PcBuildAddViewModel
#{
ViewData["Title"] = "Add";
}
<div class="form-container">
<form id="AddPcForm" class="form-wrapper" method="post">
<p>Name:</p>
<input asp-for="#Model.PcPart._Name" type="text" class="form-control"/>
<br/>
<p >Type:</p>
<div class="form-select">
<select asp-for="#Model.PcPart._Type" asp-items="#Model.AllTypes">
</select>
</div>
<br/>
<p>Info:</p>
<input asp-for="#Model.PcPart.Information" type="text" class="form-control"/>
<br/>
<p>Properties:</p>
<div class="form-select">
<select asp-for="#Model.Properties" asp-items="#Model.AllProperties" multiple="multiple">
</select>
</div>
<br/>
<p>Image:</p>
<input asp-for="#Model.Image" type="file" class="inputfile inputfile-1"/>
<label asp-for="#Model.Image">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
</svg> <span>Choose a file…</span>
</label>
<br/>
<button class="btn btn-1 btn-1e" type="submit">
<span>Add</span>
</button>
</form>
</div>
My viewmodel that i want to post trough AJAX:
public class PcBuildAddViewModel
{
public List<SelectListItem> AllProperties { get; } = new List<SelectListItem>();
public List<SelectListItem> AllTypes { get; } = new List<SelectListItem>();
public IFormFile Image { get; set; }
public PcPart PcPart { get; set; }
public List<int> Properties { get; set; }
public PcBuildAddViewModel()
{
}
public PcBuildAddViewModel(List<Propertie> allProperties, List<string> allTypes)
{
foreach (string type in allTypes)
{
SelectListItem listItem = new SelectListItem
{
Text = type,
Value = type
};
AllTypes.Add(listItem);
}
foreach (Propertie propertie in allProperties)
{
SelectListItem listItem = new SelectListItem
{
Text = propertie._Value,
Value = propertie.Id.ToString()
};
AllProperties.Add(listItem);
}
}
}
My Action Post method where I want to receive the form:
[HttpPost]
public IActionResult AddPcPart(PcBuildAddViewModel viewModel)
{
return RedirectToAction("Add");
}
And finnaly my AJAX:
$('#AddPcForm').on('submit', function(event) {
var viewModel = $(this).serialize();
ajaxPost("/PCBuild/AddPcPart", viewModel);
event.preventDefault();
});
function ajaxPost(ul, dt) {
$.ajax({
type: "POST",
url: ul,
dataType: "json",
contentType: "application/json; charset=utf-8",
data: dt,
success: ajaxSucces,
error: function(result) {
console.log(result);
}
});
}
I hope that someone can help me. I've tried this without AJAX and it worked fine but when I call trough AJAX. I get a empty viewmodel or when I put [Frombody] in front of my parameter in the controller i get a null viewmodel.

Answer 1

Thanks to Stephen Muecke that posted the answer. The problem is that the contentType needs to be the default so I just removed the contentType parameter in my AJAX post. After that I removed the [FromBody] because that wasn't needed anymore.