Problem with pass data to controller - update data - asp.net-core

Question

I have a problem with passing data from view to controller... When I was clicked button which sending POST - I have got only data for Category.Name. No subcategories, no ids etc. I am thinking I do something wrong with my view but i am not sure...
I need really help. Thanks for everything comments.
That is my View:
#model AplikacjaFryzjer_v2.Models.Category
#{
ViewData["Title"] = "Edytuj kategorię";
Layout = "~/Views/Shared/_Layout.cshtml";
var SubcategoriesData = (IList<AplikacjaFryzjer_v2.Models.Subcategory>)ViewBag.Subcategories;
}
<h1>Edytuj kategorię</h1>
<form method="post">
<div class="form-group row">
<div class="col">
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Name" class="col-sm-10 col-form-label"></label>
<div class="col-sm-10">
<input asp-for="Name" disabled class="form-control" />
</div>
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<button class="btn btn-primary" type="submit" id="update">Aktualizuj kategorię</button>
</div>
<div class="col">
#if (SubcategoriesData != null)
{
<div class="col-sm-10 col-form-label">
<div id="subcatContainer">
#foreach (var subcategory in SubcategoriesData.ToList())
{
<div class="form-group col-sm-6">
<input asp-for="#subcategory.Name" />
<button class="btn btn-danger" type="button" id="remove">Usuń</button>
<span asp-validation-for="#subcategory.Name" class="text-danger"></span>
</div>
}
</div>
<button type="button" class="btn btn-secondary" id="add">Dodaj podkategorię</button>
</div>
}
else
{
<div id="container" class="col-md-6">
<label id="labelName">Nazwa podkategorii</label>
<input id="inputName" />
<button type="button" class="btn btn-secondary" id="addNew">Dodaj</button>
</div>
}
</div>
</div>
</form>
<script>
$(document).ready(function (e) {
// Variables
var i = #SubcategoriesData.Count()-1;
// Add rows to the form
$("#add").click(function (e) {
var html = '<p /><div class="form-group col-sm-6"><input asp-for="Subcategories[' + i + '].Name" /><button class="btn btn-danger" type="button" id="remove">Usuń</button></div>';
i++;
$("#subcatContainer").append(html).before();
});
// Remove rows from the form
$("#subcatContainer").on('click', '#remove', function (e) {
i--;
$(this).parent('div').remove();
});
// Populate values from the first row
});
</script>
My Actions EditCategory in controller:
[HttpGet]
public ViewResult EditCategory(int Id)
{
var category = _categoriesRepository.GetCategory(Id);
if (category == null)
{
ViewBag.ErrorMessage = $"Kategoria o id = {Id} nie została odnaleziona";
return View("NotFound");
}
ViewBag.Subcategories = category.Subcategories;
return View(category);
}
[HttpPost]
public IActionResult EditCategory(Category category)
{
if (!ModelState.IsValid)
{
// store Subcategories data which has been added
ViewBag.Subcategories = category.Subcategories == null ? new List<Subcategory>() { } : category.Subcategories;
return View("EditCategory");
}
_categoriesRepository.UpdateCategory(category);
return RedirectToAction("ManageCategories");
}
And my object (model):
public class Category
{
public int Id { get; set; }
public string Name { get; set; }
public List<Subcategory> Subcategories {get;set;}
}

Answer 1

I have got only data for Category.Name. No subcategories, no ids etc.
Based on your Category model class, the property Subcategories is defined as List<Subcategory>, to make form data values that browser user post could be automatically bound to this property, you can modify the field of Subcategories related to <input asp-for="#Subcategories[i].Name" /> as below.
#model AplikacjaFryzjer_v2.Models.Category
#{
ViewData["Title"] = "Edytuj kategorię";
Layout = "~/Views/Shared/_Layout.cshtml";
var Subcategories = (IList<AplikacjaFryzjer_v2.Models.Subcategory>)ViewBag.Subcategories;
}
<form method="post">
<div class="form-group row">
#*code for other fields*#
<div class="col">
#if (Subcategories != null)
{
<div class="col-sm-10 col-form-label">
<div id="subcatContainer">
#for (int i = 0; i < Subcategories.Count; i++)
{
<div class="form-group col-sm-6">
<input asp-for="#Subcategories[i].Name" />
<button class="btn btn-danger" type="button" id="remove">Usuń</button>
<span asp-validation-for="#Subcategories[i].Name" class="text-danger"></span>
</div>
}
</div>
<button type="button" class="btn btn-secondary" id="add">Dodaj podkategorię</button>
</div>
}
else
{
<div id="container" class="col-md-6">
<label id="labelName">Nazwa podkategorii</label>
<input id="inputName" />
<button type="button" class="btn btn-secondary" id="addNew">Dodaj</button>
</div>
}
</div>
</div>
</form>
Update:
why new inputs added by jquery not sending to my controller? I have got "" in my code jquery
As I mentioned in comment, please not use tag helper syntax on js client. You can try to manually set name and value attribute for new generated input field(s)
like below.
$(document).ready(function (e) {
// Variables
var i = #Subcategories.Count();
// Add rows to the form
$("#add").click(function (e) {
//var html = '<p /><div class="form-group col-sm-6"><input asp-for="Subcategories[' + i + '].Name" /><button class="btn btn-danger" type="button" id="remove">Usuń</button></div>';
var html = '<p /><div class="form-group col-sm-6"><input name="Subcategories[' + i + '].Name" value="" /><button class="btn btn-danger" type="button" id="remove">Usuń</button></div>';
i++;
$("#subcatContainer").append(html).before();
});
// Remove rows from the form
$("#subcatContainer").on('click', '#remove', function (e) {
i--;
$(this).parent('div').remove();
});
// Populate values from the first row
});
Test Result