Model does not get any properties fillen after post - asp.net

Question

Problem: Hi fellow programmers, I am new to ASP.NET and tried to figure out why this happens for hours but could not find why. The model in the controller does not get any property after the post. They are all nulls, why is that so?
The view
#model AddProductViewModel
#{
ViewBag.Title = "Add a new Product";
}
<h2 class="text-center">#ViewBag.Title</h2>
<div class="row">
<div class="col-sm-12 offset-lg-2 col-lg-8 offset-xl-3 col-xl-6">
<form asp-action="Add" method="post">
<div class="mb-3">
<label asp-for="#Model.Model" class="form-label">Model Name</label>
<input asp-for="#Model.Model" class="form-control" aria-required="true" />
<span asp-validation-for="Model" class="text-danger"></span>
</div>
<div class="mb-3">
<label asp-for="#Model.Description" class="form-label">Description</label>
<textarea asp-for="#Model.Description" class="form-control" aria-required="true" rows="5"></textarea>
<span asp-validation-for="Description" class="text-danger"></span>
</div>
<div class="mb-3">
<label asp-for="#Model.Colour" class="form-label">Colour</label>
<input asp-for="#Model.Colour" class="form-control" value="" />
<span asp-validation-for="Colour" class="text-danger"></span>
</div>
<div class="mb-3">
<label asp-for="#Model.Size" class="form-label">Size</label>
<input asp-for="#Model.Size" class="form-control" value="" />
<span asp-validation-for="Size" class="text-danger"></span>
</div>
<div class="mb-3">
<label asp-for="#Model.Price" class="form-label">Price</label>
<input asp-for="#Model.Price" class="form-control" value="" />
<span asp-validation-for="Price" class="text-danger"></span>
</div>
<div class="mb-3">
<label asp-for="#Model.ImageData" class="form-label">Image URL</label>
<input asp-for="#Model.ImageData" class="form-control" aria-required="true" />
<span asp-validation-for="ImageData" class="text-danger"></span>
</div>
<div class="mb-3">
<label asp-for="#Model.CategoryId" class="form-label">Category</label>
<select asp-for="#Model.CategoryId" class="form-control">
#foreach (var category in Model.Categories)
{
<option value="#category.Id">#category.Name</option>
}
</select>
<span asp-validation-for="CategoryId" class="text-danger"></span>
</div>
<div class="mb-3">
<label asp-for="#Model.BrandId" class="form-label">Brand</label>
<select asp-for="#Model.BrandId" class="form-control">
#foreach (var brand in Model.Brands)
{
<option value="#brand.Id">#brand.Name</option>
}
</select>
<span asp-validation-for="BrandId" class="text-danger"></span>
</div>
<div class="mb-3">
<input class="btn btn-primary" type="submit" value="Add" />
</div>
</form>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
The controller
...
[HttpPost]
public async Task<IActionResult> Add(AddProductViewModel model)
{
if (!ModelState.IsValid)
{
return View(model);
}
try
{
await productService.AddProductAsync(model);
return RedirectToAction("Index", "Home");
}
catch (Exception)
{
ModelState.AddModelError("", "Something went wrong");
return View(model);
}
}
...
That's the first time something like that happens to me. I have done another project which was very similar if not the same. Any help will be appreciated!

Answer 1

Your model contains property named Model which will conflict with your parameter AddProductViewModel model.
So just change your parameter name like below:
[HttpPost]
public async Task<IActionResult> Add(AddProductViewModel addProductViewModel)
{
if (!ModelState.IsValid)
{
return View(addProductViewModel);
}
try
{
await productService.AddProductAsync(addProductViewModel);
return RedirectToAction("Index", "Home");
}
catch (Exception)
{
ModelState.AddModelError("", "Something went wrong");
return View(addProductViewModel);
}
}