❔ Add a new item to a models collection in razor form
This is the code I have:
The javascript here for adding an item feels wrong. Is there any other alternative ways of allowing the user to "add an item" to the form?
<div id="items">
@for (var i = 0; i < Model.ImageHighlights.Count; i++)
{
<div class="form-group">
<label asp-for="@Model.ImageHighlights[i].Title"></label>
<input maxlength="250" asp-for="@Model.ImageHighlights[i].Title" class="form-control bg-peach-light" required type="text"/>
<span asp-validation-for="@Model.ImageHighlights[i].Title" class="form-text text-danger"></span>
</div>
<div class="form-group">
<label asp-for="@Model.ImageHighlights[i].Description"></label>
<textarea maxlength="250" asp-for="@Model.ImageHighlights[i].Description" class="form-control bg-peach-light" required type="text"></textarea>
<span asp-validation-for="@Model.ImageHighlights[i].Description" class="form-text text-danger"></span>
</div>
<div class="form-group">
<label asp-for="@Model.ImageHighlights[i].ImageSource"></label>
<textarea maxlength="250" asp-for="@Model.ImageHighlights[i].ImageSource" class="form-control bg-peach-light" required type="file"></textarea>
<span asp-validation-for="@Model.ImageHighlights[i].ImageSource" class="form-text text-danger"></span>
</div>
}
</div>
<button type="button" onclick="addItem()">Add new Feature</button>
<script>
function addItem() {
var itemsDiv = document.getElementById('items');
var newDiv = document.createElement('div');
var index = itemsDiv.childElementCount;
newDiv.innerHTML = '<div class="form-group"><label for="title_' + index + '">Title:</label><textarea id="title_' + index + '" maxlength="250" name="Title" class="form-control bg-peach-light" required type="text"></textarea><span class="form-text text-danger"></span></div>';
itemsDiv.appendChild(newDiv);
}
</script>
<div id="items">
@for (var i = 0; i < Model.ImageHighlights.Count; i++)
{
<div class="form-group">
<label asp-for="@Model.ImageHighlights[i].Title"></label>
<input maxlength="250" asp-for="@Model.ImageHighlights[i].Title" class="form-control bg-peach-light" required type="text"/>
<span asp-validation-for="@Model.ImageHighlights[i].Title" class="form-text text-danger"></span>
</div>
<div class="form-group">
<label asp-for="@Model.ImageHighlights[i].Description"></label>
<textarea maxlength="250" asp-for="@Model.ImageHighlights[i].Description" class="form-control bg-peach-light" required type="text"></textarea>
<span asp-validation-for="@Model.ImageHighlights[i].Description" class="form-text text-danger"></span>
</div>
<div class="form-group">
<label asp-for="@Model.ImageHighlights[i].ImageSource"></label>
<textarea maxlength="250" asp-for="@Model.ImageHighlights[i].ImageSource" class="form-control bg-peach-light" required type="file"></textarea>
<span asp-validation-for="@Model.ImageHighlights[i].ImageSource" class="form-text text-danger"></span>
</div>
}
</div>
<button type="button" onclick="addItem()">Add new Feature</button>
<script>
function addItem() {
var itemsDiv = document.getElementById('items');
var newDiv = document.createElement('div');
var index = itemsDiv.childElementCount;
newDiv.innerHTML = '<div class="form-group"><label for="title_' + index + '">Title:</label><textarea id="title_' + index + '" maxlength="250" name="Title" class="form-control bg-peach-light" required type="text"></textarea><span class="form-text text-danger"></span></div>';
itemsDiv.appendChild(newDiv);
}
</script>
1 Reply
Looks like nothing has happened here. I will mark this as stale and this post will be archived until there is new activity.