How to bind list of objects in ASP.NET MVC when one item in between is deleted

Question

I have an issue while Binding model To A List in MVC. My page has a functionality to add and delete text-box dynamically. My page HTML 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 textbox

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

But when I delete "Cola" text-box and do an ajax post I am getting only Coffee and Tea in my list(Controller Action Post). i.e last one is omitted in the list

Similarly when I delete "Tea" text-box and do an ajax post I am getting Coffee only. i.e other three values are excluded in the list.

I think list is binding with on List index. Is there any way to get all values even if any item in between is deleted.

Answer 1

It can be done by adding special field named products.Index with the value of what next index will be. 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 info in this article, section 'Non-Sequential Indices'

Answer 2

You can extend your javascript function to give the proper names to your products collection:

<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's the result after deleting 'Tea' product and post to a controller action.