Currently, I am facing an issue with adding multiple actors to a DVD object. Despite my efforts to use JavaScript to dynamically create text boxes for each actor, only the first one is being saved. Do you have any advice or suggestions on how to resolve this?
Below is the code snippet in the view related to the actor list:
<div id="actorsContainer">
<div class="form-group">
@Html.LabelFor(model => model.dvd.ActorList, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(model => model.dvd.ActorList, new { htmlAttributes = new { @class = "form-control", id = "actors", name = "actors[]" } })
<input type="button" class="btn-sm btn-default col-md-2" id="addActor" value="+" />
@Html.ValidationMessageFor(model => model.dvd.ActorList, "", new { @class = "text-danger" })
</div>
</div>
</div>
I have also included the JavaScript code that I am currently using:
<script>
document.getElementById("addActor").onclick = function () {
var div = document.getElementById("actorsContainer");
var input = document.createElement("input");
input.type = "text";
input.name = "actors[]";
div.appendChild(document.createElement("br"));
div.appendChild(input);
}
</script>
In addition, here is the code for the controller that may be relevant to this issue:
[HttpGet]
public ActionResult AddDVD()
{
DVDListVM vm = new DVDListVM();
return View(vm);
}
[HttpPost]
public ActionResult AddDVD(DVDListVM model)
{
if (ModelState.IsValid)
{
DVD newDVD = new DVD();
// Setting properties of newDVD
_dvdManager.AddDVD(newDVD);
return RedirectToAction("Collection");
}
else
{
return View(model);
}
}