Create/Update one-to-many relationship models on one page - asp.net-core

Question

Can't find an example of this online that doesn't involve creating or updating rows for each individual model on separate pages. I have a simple visitation form, where the overall Visit is a model, with the host's information and other generic parameters. The second model is Visitor, of which a Visit can have many. Relationship works great, I can update them separately.
I've built a request form which I'd like to do everything on one page. Top part of the form is generic information about the visit and the bottom half is a javascript dynamic form section to add/remove visitors on the fly. Form works great, enters the Visit information just fine, but I can't take in the List from the information coming in. Names for them are following the 'Visitors[1].Name' etc etc format.
I've tried adding List Visitors as a variable inside the Visit model, I've also tried a combined custom model, containing both Visit and Visitors. Anyone have any suggestions?

Answer 1

According to your description, I guess this issue may be related with input's name value. Since the model binding will bind the value according to the parameter's name. I suggest you could check the input name to make sure it is match the model binding format.
For example:
If your visit and visitor's class as below:
public class Visit
{
public int id { get; set; }
public string visitname { get; set; }
public List visitors { get; set; }
}
public class Visitors
{
public int id { get; set; }
public string visitor { get; set; }
}
Then the visitor's input name should be visitors[0].id , visitors[1].id,visitors[2].id, visitors[0].visitor,visitors[1].visitor or else.
More details, you could refer to below codes:
Controller:
public class HomeController : Controller
{
Visit visits;//It is a global variable
public HomeController()
{
visits = new Visit
{
id = 10,
visitname = "visit1",
visitors = new List<Visitors>
{
new Visitors{ id=19, visitor="visitor1"},
new Visitors{ id=20, visitor="visitor2"}
}
};
}
public IActionResult Index()
{
return View(visits);
}
}
In Index.cshtml, the changes made by JavaScript to the view may affect the changes of the subscript in Visitors1.Name. So the index value should be changed when adding elements and deleting corresponding elements.
#model solution930.Models.Visit
#{
//Set a global variable
var count = Model.visitors.Count;
}
<form action="/home/get" method="post">
id
<input asp-for="#Model.id" />
visitname
<input asp-for="#Model.visitname" />
<div id="visitors">
#for (var i = 0; i <count; i++)
{
<div class="visitor">
<input name="visitors[#i].id" asp-for="#Model.visitors[i].id" />
<input name="visitors[#i].visitor" asp-for="#Model.visitors[i].visitor" />
<input type="button" name="name" value="deleterow" onclick="del(event,#Model.visitors[i].id)" />
</div>
}
</div>
<input type="submit" name="name" value="sub" />
</form>
<button id="addvisit" onclick="add()">add</button>
#section Scripts{
<script>
var hasCount=#count;
function del(e, id) {
if (index == 0) {
console.log(e.currentTarget.parentElement)
e.currentTarget.parentElement.remove()
return;
}
location.href = '/home/delete?id=' + id
}
function add() {
var ele = '<div class="visitor"> <input name="visitors[' + hasCount + '].id" type="number" data-val="true" data-val-required="The id field is required." id="visitors_' + hasCount + '__id" value=""> <input name = "visitors[' + hasCount + '].visitor" type = "text" id = "visitors_' + hasCount + '__visitor" value = "" > <input type="button" name="name" value="deleterow" onclick="del(event,0)"> </div>'
$('#visitors').last().parent().append(ele)
hasCount++
console.log(hasCount)
}
</script>
}
Result: