var counter = 1;
$(function () {
$('#addDonation').click(function () {
$('<div class="card border-apoio mb-3" id="cardDonation' + counter + '">' +
'<div class= "card-body" >' +
'<div class="row">' +
'<div class="form-group col-3">' +
'<label asp-for="@Model[' + counter + '].Type"><strong>Tipo:</strong></label>' +
'<select asp-for="@Model[' + counter + '].Type" class="form-control">' +
'<option value="Alimento">Alimento</option>' +
'<option value="Brinquedo">Brinquedo</option>' +
'<option value="Roupa">Roupa</option>' +
'</select>' +
'</div>' +
'<div class="form-group col-5">' +
'<label asp-for="@Model[' + counter + '].Name"><strong>Nome:</strong></label>' +
'<input asp-for="@Model[' + counter + '].Name" placeholder="Nome ou descrição genérica" class="form-control" />' +
'</div>' +
'<div class="form-group col-1">' +
'<label asp-for="@Model[' + counter + '].Quantity"><strong>Quantidade:</strong></label>' +
'<input asp-for="@Model[' + counter + '].Quantity" value="1" class="form-control" />' +
'</div>' +
'<div class="form-group col-2">' +
'<label asp-for="@Model[' + counter + '].UnitsMeasure"><strong>Unidade de Medida:</strong></label>' +
'<select asp-for="@Model[' + counter + '].UnitsMeasure" value="Unidades" class="form-control">' +
'<option value="Unidade(s)">Unidades</option>' +
'<option value="KG">Quilograma(s) (KG)</option>' +
'<option value="L">Litro(s) (L)</option>' +
'</select>' +
'</div>' +
'<div class="col-1">' +
'<button type="button" class="btn" onclick="removeCard(' + counter + ');"><span class="bi bi-trash icon-size-2"></span></button>' +
'</div>' +
'</div>' +
'</div >' +
'</div >').appendTo('#cardDonations');
counter++;
return false;
});
});
function removeCard(index) {
if (counter > 1) {
$('#cardDonation' + index).remove();
counter--;
}
return false;
}@model List<Donation>;
<div class="text-center">
<h1>Doações</h1>
</div>
<form asp-action="Doacoes" method="post">
<div asp-validation-summary="All"></div>
<div id="cardDonations">
<div class="card border-apoio mb-3" id="cardDonation0">
<div class="card-body">
<div class="row">
<div class="form-group col-3">
<label asp-for="@Model[0].Type"><strong>Tipo:</strong></label>
<select asp-for="@Model[0].Type" class="form-control">
<option value="Alimento">Alimento</option>
<option value="Brinquedo">Brinquedo</option>
<option value="Roupa">Roupa</option>
</select>
</div>
<div class="form-group col-5">
<label asp-for="@Model[0].Name"><strong>Nome:</strong></label>
<input asp-for="@Model[0].Name" placeholder="Nome ou descrição genérica" class="form-control" />
</div>
<div class="form-group col-1">
<label asp-for="@Model[0].Quantity"><strong>Quantidade:</strong></label>
<input asp-for="@Model[0].Quantity" value="1" class="form-control" />
</div>
<div class="form-group col-2">
<label asp-for="@Model[0].UnitsMeasure"><strong>Unidade de Medida:</strong></label>
<select asp-for="@Model[0].UnitsMeasure" value="Unidades" class="form-control">
<option value="Unidade(s)">Unidades</option>
<option value="KG">Quilograma(s) (KG)</option>
<option value="L">Litro(s) (L)</option>
</select>
</div>
<div class="col-1">
<button type="button" class="btn" onclick="removeCard(0);"><span class="bi bi-trash icon-size-2"></span></button>
</div>
</div>
</div>
</div>
</div>
<div class="d-grid gap-2 mt-3">
<button id="addDonation" type="button" class="btn btn-apoio-verde">
<span class="bi bi-list-ol"></span>
Adicionar Item
</button>
</div>
<div class="text-center mt-3">
<button type="submit" class="btn btn-apoio-laranja">
<span class="bi bi-plus"></span>
Adicionar Lista
</button>
</div>
</form>This script enables the addition of multiple objects, represented by bootstrap cards, with a single click on the submit button. Instead of adding one object at a time, this functionality allows for the creation of multiple objects simultaneously based on the number of cards added through the JavaScript code.
The issue being faced is that only the first object is being created, and subsequent objects like @Model[1], @Model[2], and so on are not being recognized or generated by the view.
To resolve this problem, you may need to revisit how the counter variable from the JavaScript code is interacting with the HTML elements and ensure that each newly added object is properly indexed and associated with the corresponding Model data in your application.