ASP  .NET Core 2.1 - How to dynamically remove html table rows while maintaining proper indexing

nightshadz
nightshadz used Ask the Experts™
on
In the below example code using ASP .NET Core 2.1, I am dynamically adding a table row when the add button is clicked. The row contains 3 input boxes and one button (a minus symbol which removes the row when clicked). I'm struggling to find the best way to handle the deletion since I want to preserve model-binding when the form is posted. The rows in this table should populate List<People> when the form is submitted.

Is there a more elegant way to handle this besides re-indexing each row every time a delete happens? Any examples I can review will be much appreciated.


Initial view from HttpGet controller
<div>
	<table class="table table-condensed" id="people-list">
		<thead>
		<tr>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Email Address</th>
		</tr>
		</thead>
		<tbody>
		@for (var i = 0; i < Model.PeopleList.Count; i++)
		{
			<tr>
				<td>
					@Html.HiddenFor(m => Model.PeopleList[i].FirstName)
					@Html.TextBoxFor(m => Model.PeopleList[i].FirstName, new { @class = "row-index form-control"})
				</td>
				<td>
					@Html.HiddenFor(m => Model.PeopleList[i].LastName)
					@Html.TextBoxFor(m => Model.PeopleList[i].LastName, new { @class = "form-control" })
				</td>
				<td>
					@Html.HiddenFor(m => Model.PeopleList[i].Email)
					@Html.TextBoxFor(m => Model.PeopleList[i].Email, new { @class = "form-control" })
				</td>
				<td>
					<button class="btn btn-default" id="remove-person-@i"><i class="glyphicon glyphicon-minus"></i></button>
				</td>
			</tr>
		}                    
		</tbody>
	</table>
</div>
<div>
	<div class="btn-group">
		<button type="button" class="btn btn-primary" id="add-person"><i class="glyphicon glyphicon-plus"></i>Add Person</button>
		<br/><br/>
	</div>
</div>

Open in new window


Add new row
$("#add-person").click(function() {
    var i = $(".row-index").length;
    $.ajax({
        url: "people/AddPerson?index=" + i,
        success: function (data) {
            $('#people-list > tbody').append(data);
        },
        error: function (a, b, c) {
            console.log(a, b, c);
        }
    });  
});

Open in new window


Partial View that returns a template row
<tr>
    <td>
        <input id="People_@(ViewBag.Index)__FirstName" name="People[@(ViewBag.Index)].FirstName" type="hidden" value="Bob">
        <input id="People_@(ViewBag.Index)__FirstName" name="People[@(ViewBag.Index)].FirstName" type="text" value="Bob" class="form-control">
    </td>
    <td>
        <input id="People_@(ViewBag.Index)__LastName" name="People[@(ViewBag.Index)].LastName" type="hidden" value="Smith">
        <input id="People_@(ViewBag.Index)__LastName" name="People[@(ViewBag.Index)].LastName" type="text" value="Smith" class="form-control">
    </td>
    <td>
        <input id="People_@(ViewBag.Index)__Email" name="People[@(ViewBag.Index)].Email" type="hidden" value="bsmith@yopmail.com">
        <input id="People_@(ViewBag.Index)__Email" name="People[@(ViewBag.Index)].Email" type="text" value="bsmith@yopmail.com" class="form-control">
    </td>
    <td>
        <button class="btn btn-default" id="remove-person"><i class="glyphicon glyphicon-minus"></i></button>
    </td>
</tr>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,

You may want to check Datatables editor for this (this save a lot of time and headache)
https://editor.datatables.net/

Author

Commented:
Thank you, and sorry for taking a while to respond back to you.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial