Jak powiązać listę obiektów w ASP.NET MVC, gdy jeden element pośredni zostanie usunięty

Question

Mam problem podczas wiązania modelu do listy w MVC. Moja strona ma funkcję dynamicznego dodawania i usuwania pola tekstowego. Moja strona HTML będzie

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

Poniżej znajduje się kod, aby usunąć pole tekstowe

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

Ale gdy usunę „cola” pole tekstowe i zrobić wpis ajax jestem tylko coraz kawa i herbata w moja lista (stanowisko kontrolera działań). tj. ostatni jest pominięty na liście:

Podobnie po usunięciu pola tekstowego "Herbata" i wykonaniu wpisu ajax otrzymuję tylko kawę. to znaczy inne trzy wartości są wykluczone na liście.

Myślę, że lista jest wiążąca z indeksem listy. Czy istnieje sposób na uzyskanie wszystkich wartości, nawet jeśli jakikolwiek element pośredni zostanie usunięty.

Answer 1

Można to zrobić, dodając specjalne pole o nazwie products.Index z wartością tego, jaki będzie następny indeks. Trzeba powtórzyć dla każdego nowego indeksu:

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

można znaleźć więcej informacji w this article sekcja „niesekwencyjnej Indeksy”

Answer 2

Można przedłużyć funkcji javascript, aby nadać odpowiednie nazwy produktów kolekcja:

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

Oto wynik po usunięciu produktu "Herbata" i opublikowaniu go w akcji kontrolera.