Add Dynamic TextBox with Remove Button in ASP.Net MVC

Last Reply 29 days ago By dharmendr

Posted 29 days ago

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>