How to link a list of objects in ASP.NET MVC when one element in between is deleted

Question

I have a problem when Binding model To A List in MVC. My page has the functionality to dynamically add and remove a text field. My HTML page will be

<form id="prdt"> <div id="div_0"> <input type="text" name="products[0].Name" value="Coffee"/><button id="0" onclick="return DeleteLocation(this.id)">Delete</button></div> <div id="div_1"> <input type="text" name="products[1].Name" value="Tea" /><button id="1" onclick="return DeleteLocation(this.id)">Delete</button></div> <div id="div_2"> <input type="text" name="products[2].Name" value="Cola" /><button id="2" onclick="return DeleteLocation(this.id)">Delete</button></div> <div id="div_3"> <input type="text" name="products[3].Name" value="Pepsi" /><button id="3" onclick="return DeleteLocation(this.id)">Delete</button></div> </form> 

Below is the code to delete the text field

 <script type="text/javascript"> function DeleteLocation(id) { $("#div_" + id).remove(); } </script> 

But when I delete the “Cola” text box and take the ajax post, I only get the coffee and tea on my list (“Controller Message”). last skipped in list

Similarly, when I delete the “Tea” text box and do an ajax post, I only get coffee. the other three values ​​are excluded from the list.

I think the list is related to the List index. Is there a way to get all the values ​​even if the deleted item is deleted.

Answer 1

This can be done by adding a special field named products.Index with the next index value. You need to repeat that for each new index:

 <form id="prdt"> <div id="div_0"> <input type="hidden" name="products.Index" value="0" /> <input type="text" name="products[0].Name" value="Coffee"/> <button id="0" onclick="return DeleteLocation(this.id)">Delete</button> </div> <div id="div_1"> <input type="hidden" name="products.Index" value="1" /> <input type="text" name="products[1].Name" value="Tea" /> <button id="1" onclick="return DeleteLocation(this.id)">Delete</button> </div> <div id="div_2"> <input type="hidden" name="products.Index" value="2" /> <input type="text" name="products[2].Name" value="Cola" /> <button id="2" onclick="return DeleteLocation(this.id)">Delete</button> </div> <div id="div_3"> <input type="hidden" name="products.Index" value="3" /> <input type="text" name="products[3].Name" value="Pepsi" /> <button id="3" onclick="return DeleteLocation(this.id)">Delete</button> </div> </form> 

You can find more information in this article , the section "Non-second Indices"

Answer 2

You can extend your javascript function to specify the names of your products:

 <form id="prdt"> <div id="div_0"> <input type="text" name="products[0].Name" class="product" value="Coffee"/> <button id="0" onclick="return DeleteLocation(this.id)">Delete</button> </div> <div id="div_1"> <input type="text" name="products[1].Name" class="product" value="Tea" /> <button id="1" onclick="return DeleteLocation(this.id)">Delete</button> </div> <div id="div_2"> <input type="text" name="products[2].Name" class="product" value="Cola" /> <button id="2" onclick="return DeleteLocation(this.id)">Delete</button> </div> <div id="div_3"> <input type="text" name="products[3].Name" class="product" value="Pepsi" /> <button id="3" onclick="return DeleteLocation(this.id)">Delete</button> </div> 

 <script type="text/javascript"> function DeleteLocation(id) { $("#div_" + id).remove(); $(".product").each(function(i){ $(this).prop('name',"products["+i+"].Name" ); }); }; </script> 

Here is the result after removing the Tea product and the message to the controller action.