Working with MVC, Razor pages. Trying to create a grid with a functionality to insert rows within the grid (not against a pop up or a separate page) with a click of add (+) and delete (-) a row on - .
The counter is not working on the front end (Razor HTML). Code given below. Any one can help please?
@model New_Booking_Home.Models.Booking
@{
Layout = null;
}
<!DOCTYPE html>
<body>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="container">
<div class="row">
<p></p>
<table id="myTable" style="width:100%">
<tr>
<td>
<button value="ADD" type="button" class="btnplus tooltip" onclick="myCreateFunction(this)"><i class="fa fa-plus"></i></button>
</td>
<td>
<div>Container Type</div>
</td>
<td>
<div>Quantity</div>
</td>
</tr>
@if (Model != null)
{
int i = 0;
foreach (var item in Model.cargolist2.ToList())
{
<!-- for (int i = 0; i < Model.cargolist2.Count; i++)-->
<tr>
<td>
<button value="delete" type="button" class="btndel tooltip" onclick="deleteRow(this)"><i class="fa fa-trash"></i></button>
</td>
<td>
@Html.EditorFor(model => model.cargolist2[i].CntrtypeID, new { htmlAttributes = new { @class = "form-control textbx" } })
@Html.ValidationMessageFor(model => model.cargolist2[i].CntrtypeID, "", new { @class = "text-danger" })
</td>
<td>
@Html.EditorFor(model => model.cargolist2[i].Qty, new { htmlAttributes = new { placeholder = "Enter quantity", @class = "form-control" } })
@Html.ValidationMessageFor(model => model.cargolist2[i].Qty, "", new { @class = "text-danger" })
</td>
</tr>
}
}
</table>
</div>
<div>
<input type="submit" class="genbtn" value="Submit" />
</div>
}
<script>
function myCreateFunction() {
var table = document.getElementById("myTable");
var x = document.getElementById("myTable").rows.length;
x = x + 1;
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = '<button class="btndel tooltip" type="button" value="Delete" onclick="deleteRow(this)"><i class="fa fa-trash"></i></button>';
cell2.innerHTML = '@Html.EditorFor(model => model.cargolist2[' + x + '].CntrtypeID, new { htmlAttributes = new { @class = "form-control textbx" } }) @Html.ValidationMessageFor(model => model.cargolist2[' + x + '].CntrtypeID, "", new { @class = "text-danger" })';
cell3.innerHTML = '@Html.EditorFor(model => model.cargolist2[' + x + '].Qty, new { htmlAttributes = new { placeholder = "Enter quantity", @class = "form-control" } }) @Html.ValidationMessageFor(model => model.cargolist2[' + x + '].Qty, "", new { @class = "text-danger" });';
}
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("myTable").deleteRow(i);
}
</script>
</body>
</html>
