How do you create multiple rows at the same time in Entity Framework Core? - entity-framework-core

Question

I am trying to add multiple rows to a MySql database using ASP.net Core with Entity Framework Core. I want to add multiple rows to a one-to-many relationship. The code I have so far is:
#model Products.Models.SideEffect
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
#{
ViewData["Title"] = "Create";
}
<h1>Create</h1>
<h4>SideEffect</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group" id="side-effect-list">
Add
<br />
<label asp-for="SideEffects" class="control-label"></label>
<input asp-for="SideEffects" class="form-control side-effect" name="SideEffects[0].SideEffect" />
<span asp-validation-for="SideEffects" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ProductName" class="control-label"></label>
<select asp-for="ProductName" class ="form-control" asp-items="ViewBag.ProductName"></select>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back to List</a>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script>
$(function () {
$("#add").click(function (e) {
e.preventDefault();
var i = ($(".side-effect").length) / 2;
var n = '<br />' + '<input asp-for="SideEffects" class="form-control side-effect" name="SideEffects[0].SideEffect" />';
$("#side-effect-list").append(n);
});
});
</script>
}
And for the controller:
// GET: SideEffect/Create
public IActionResult Create()
{
ViewData["ProductName"] = new SelectList(_context.Products, "ProductId", "ProductName");
return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("Id,SideEffects,ProductId, ProductName")] SideEffect sideEffect)
{
if (ModelState.IsValid)
{
_context.AddRange(sideEffect);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
ViewData["ProductName"] = new SelectList(_context.Products, "ProductId", "ProductName", sideEffect.ProductName);
return View(sideEffect);
}
When I submit the form it adds value for Side Effect. Suggestions would be helpful.