Get partial view models in submit action of parent - asp.net-core

Question

I can add multiple partialview dynamically into my page like this
Create.cshtml
#model Opto.Models.GlassOrder
...
...
...
<div class="text-center" dir="rtl" id="ttt">
</div>
<a id="add1" style="cursor:pointer">add</a>
<script>
var rowNum = 0;
$('#add1').click(function () {
rowNum++;
$.get('/Glasses/DisplayBill?id=' + rowNum, function (partial) {
console.log(partial);
$('#ttt').append(partial);
});
});
</script>
BillFarSighted.cshtml
#model Opto.Models.BillFarSighted
<div style="display: inline-block">
<div class="row form-group">
<label asp-for="PackFactor" class="col-5 text-left col-form-label"></label>
<div class="col-7">
<select asp-for="PackFactor" class="form-control" asp-items="Html.GetEnumSelectList<Compression>()">
<option selected value="">انتخاب کنید</option>
</select>
<span asp-validation-for="PackFactor" class="text-danger"></span>
</div>
</div>
...
...
...
</div>
BillFarSighted.cs
public partial class BillFarSighted
{
public long Id { get; set; }
public long RecipeId { get; set; }
...
...
...
}
GlassesController.cs
public ActionResult DisplayBill(int id)
{
BillFarSighted billFarSighted = new BillFarSighted() { PackFactor = 3 };
return PartialView("BillFarSighted", billFarSighted);
}
[HttpPost]
public async Task<IActionResult> Create(List<BillFarSighted> billFarSighteds)
{
....
}
but when I submit parent form( in create action ), billFarSighteds list is empty, how can I get those partial models in controller?

Answer 1

The key to list object binding is ensuring that a sequential index in square brackets is added to the form field's name attribute e.g [0].PackFactor.
In your case, you can make the rowNum as the index.
Create.csthml
<form asp-action="Create" method="post">
<div class="text-center" dir="rtl" id="ttt">
</div>
<input type="submit" value="submit" class="btn btn-primary" />
</form>
<a id="add1" style="cursor:pointer">add</a>
#section scripts{
<script>
var rowNum = 0;
$('#add1').click(function () {
$.get('/Glasses/DisplayBill?id=' + rowNum, function (partial) {
console.log(partial);
$('#ttt').append(partial);
rowNum++;
});
});
</script>
}
BillFarSighted.cshtml
#model BillFarSighted
<div style="display: inline-block">
<div class="row form-group">
<label asp-for="PackFactor" class="col-5 text-left col-form-label"></label>
<div class="col-7">
<select asp-for="PackFactor" name="[#Model.Id].PackFactor" class="form-control" asp-items="Html.GetEnumSelectList<Compression>()">
<option selected value="">Select</option>
</select>
<span asp-validation-for="PackFactor" class="text-danger"></span>
</div>
</div>
</div>
Model:
public class BillFarSighted
{
public long Id { get; set; }
public long RecipeId { get; set; }
public long PackFactor { get; set; }
}
public enum Compression
{
AAA = 1,
BBB = 2,
CCC = 3,
DDD = 4
}
Controller:
public ActionResult DisplayBill(int id)
{
BillFarSighted billFarSighted = new BillFarSighted() { Id = id };
return PartialView("BillFarSighted", billFarSighted);
}
[HttpPost]
public async Task<IActionResult> Create(List<BillFarSighted> billFarSighteds)
{
//some codes
}
Result: