Cześć,
Korzystam z Razor Pages w swoim projekcie oraz z helperów do tworzenia dropdowna. Koncepcja jest taka: użytkownik ma widoczny rekord tabeli z pierwszą kolumną z uzupełnioną listą rozwijaną (dane pobrane z bazy danych) i drugą kolumną z inputem, do tego ma przycisk "Dodaj kolejny rekord", który ma mu dodawać następne rekordy do tablicy. Do tego momentu wszystko udało mi się osiągnąć, ale z nie do końca takim skutkiem jakiego oczekiwałem.
Chciałbym aby skrypt jQuery generował kolejny rekord wraz z odpowiednim "id" czy po prostu indeksem tablicy tak aby przy przekazaniu modelu do kontrolera nie pojawiło się kilka wartości o tym samym indeksie (a co za tym idzie - nadpisywałyby się) lub żeby wartości były gubione po drodze.
Problem leży w tym, że nie wiem** jak zdefiniować w skrypcie jQuery zmienną "markup"** tak aby dynamicznie ustawiała indeks na długość tablicy. W tej chwili mam do niej przypisanego helper z kodem html.
Kod HTML:
@page
@model MealApp.Pages.Meals.AddModel
@{
<h1>Dodaj posiłek</h1>
<form method="post" class="mt-3">
<div class="form-group row">
<label asp-for="Meal.MealName" class="col-sm-2 col-form-label">
</label>
<div class="col-sm-10">
<input asp-for="Meal.MealName" class="form-control" placeholder="Nazwa posiłku">
</div>
</div>
<div class="form-group row">
<label asp-for="Meal.TypeOfMeal" class="col-sm-2 col-form-label">
</label>
<div class="col-sm-10">
@Html.DropDownListFor(p => p.Meal.TypeOfMealId, new SelectList(Model.TypeOfMeals, "Id", "TypeName"), "--Wybierz typ posiłku--", new { @class = "form-control" })
</div>
</div>
<div class="form-group row">
<label asp-for="Meal.Description" class="col-sm-2 col-form-label">
</label>
<div class="col-sm-10">
<input asp-for="Meal.Description" class="form-control" placeholder="Opis">
</div>
</div>
<div id="myTable" class="datatable" data-hover="true" data-border-color="dark ">
<table class="table datatable-table">
<thead class="datatable-header">
<tr>
<th>Produkt</th>
<th>Ilość</th>
</tr>
</thead>
<tbody class="datatable-body">
@for (int i = 0; i < 10; i++)
{
<tr>
<td>
@Html.DropDownListFor(p => p.Meal.MealProducts[i].ProductId, new SelectList(Model.Products, "Id", "ProductName"), "--Wybierz produkt--", new { @class = "form-control" })
</td>
<td>
<input asp-for="Meal.MealProducts[i].Quantity" class="form-control" placeholder="Ilość" />
</td>
</tr>
}
</tbody>
</table>
</div>
@*<button type="button" id="add-row" class="btn btn-primary">Dodaj produkt</button>*@
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Dodaj</button>
<a asp-page="/Products/Index" class="btn btn-danger">Cancel</a>
</div>
</div>
</form>
}
Skrypt jQuery:
<script type="text/javascript">
$(document).ready(function () {
$("#add-row").click(function () {
markup = `<tr><td>@(@Html.DropDownListFor(p => p.Meal.MealProducts[1].ProductId, new SelectList(Model.Products, "Id", "ProductName"), "--Wybierz produkt--", new { @class = "form-control" }))</td><td><input asp-for="Meal.MealProducts[1].Quantity" class="form-control" placeholder="Ilość" /></td></tr>`
tableBody = $("table tbody");
tableBody.append(markup);
i++;
});
});
</script>
Wyrenderowany row tablicy HTML:
<tbody class="datatable-body">
<tr>
<td>
<select class="form-control" id="Meal_MealProducts_0__ProductId" name="Meal.MealProducts[0].ProductId"><option value="">--Wybierz produkt--</option>
<option value="4">Mleko 1,5%</option>
<option value="5">Płatki owsiane</option>
<option value="6">Płatki kukurydziane</option>
<option value="7">Truskawki</option>
<option value="8">Ser chudy</option>
</select>
</td>
<td>
<input class="form-control" placeholder="Ilość" type="number" id="Meal_MealProducts_0__Quantity" name="Meal.MealProducts[0].Quantity" value="">
</td>
</tr>