Come associare l'elenco di oggetti in ASP.NET MVC quando viene eliminato un elemento intermedio

Question

Ho un problema durante il collegamento del modello a un elenco in MVC. La mia pagina ha una funzionalità per aggiungere ed eliminare la casella di testo in modo dinamico. La mia pagina HTML sarà

<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> 

Di seguito si riporta il codice per eliminare la casella di testo

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

Ma quando elimino "Cola" casella di testo e fare un posto ajax sto ottenendo solo Caffè e Tè in la mia lista (Controller Action Post). l'ultimo è omesso nell'elenco

Analogamente quando elimino la casella di testo "Tè" e faccio un post ajax, sto ricevendo solo il caffè. altri tre valori sono esclusi nella lista.

Credo che la lista sia vincolante con l'indice Elenco. C'è un modo per ottenere tutti i valori anche se qualsiasi elemento intermedio viene eliminato.

Answer 1

Può essere fatto aggiungendo un campo speciale denominato products.Index con il valore di quale sarà il prossimo indice. È necessario ripetere che per ogni nuovo indice:

<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> 

È possibile trovare maggiori informazioni nella this article, sezione 'non sequenziali Indici'

Answer 2

è possibile estendere la funzione JavaScript per dare i nomi propri per i vostri prodotti collezione:

<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> 

Ecco il risultato dopo l'eliminazione del prodotto "Tè" e la pubblicazione su un'azione del controller.