ASP MVC nicht sequentielle Elemente

Question

Ich habe eine Ansicht Modell enthält public List<Room> Rooms { get; set; } Zimmer enthält eine List<BL.Image> Images. Aus meiner Sicht durchlaufe ich den Raum und zeige jedes Bild an.

for (int i = 0; i < Model.Rooms.Count; i++) 
{ 
    @for (var ii = 0; ii < Model.Rooms[i].Images.Count; ii++) 
    { 
     <div class="slide"> 
      <img class="pic panel" src="@Url.Content(Model.Rooms[i].Images.ToList()[ii].Path)" /> 
      @{ ViewBag.Imageindex = "Rooms[" + i + "].Images[" + ii + "].Index"; } 
      <input type="hidden" name="@ViewBag.ImageIndex" value="@Html.Raw(ii)" /> 
@*also tried<input type="hidden" name="@ViewBag.ImageIndex" value="" />also tried*@ 

      @Html.HiddenFor(m => Model.Rooms[i].Images.ToList()[ii].ImageID, new { Name = "Rooms[" + i + "].Images[" + ii + "].ImageID" }) 
      @Html.HiddenFor(m => Model.Rooms[i].Images.ToList()[ii].Path, new { Name = "Rooms[" + i + "].Images[" + ii + "].Path" }) 
      <div class="snipit"> 
       <img class="hoverpic panel" src="http://findicons.com/files/icons/99/office/128/delete.png" width="40" height="40" /> 
      </div> 
     </div> 
    } 
} 

Bilder vom Benutzer hinzugefügt oder gelöscht werden können, aber wenn ein Bild gelöscht wird, wenn das Formular nur Bilder vor den gelöschten Bildern vorgelegt werden beispielsweise erkannt

• Bild 1, Bild 2, Bild 3, Bild 4

• Bild 3 get

• wenn das Formular abgeschickt wird nur anerkannt werden 1 und 2 Bilder gelöscht angezeigt.

Einer der befragten ich überprüft, dieses Problem zu lösen war this one und ich scheine das gleiche tun werden. Die Frage auch Links zu einem Blog Post in diesem - in der Nähe des Endes deckt nicht-sequenziellen Indizes

Non-Sequential-Indizes ... was passiert, wenn Sie nicht garantieren können, dass die vorgelegten Werte a aufrechterhalten werden sequenzieller Index? Angenommen, Sie möchten das Löschen von Zeilen zulassen, bevor Sie eine Liste von Büchern über JavaScript senden. Die gute Nachricht ist, dass Sie durch die Einführung einer zusätzlichen versteckten Eingabe beliebige Indizes zulassen können. Im folgenden Beispiel stellen wir eine versteckte Eingabe mit dem Suffix .index für jedes Element bereit, das an die Liste gebunden werden muss. Der Name jeder dieser versteckten Eingaben ist gleich ... Dies gibt dem Modellbinder eine schöne Sammlung von Indizes, nach denen beim Binden an die Liste gesucht werden soll.

<form method="post" action="/Home/Create"> 

<input type="hidden" name="products.Index" value="cold" /> 
<input type="text" name="products[cold].Name" value="Beer" /> 
<input type="text" name="products[cold].Price" value="7.32" /> 

<input type="hidden" name="products.Index" value="123" /> 
<input type="text" name="products[123].Name" value="Chips" /> 
<input type="text" name="products[123].Price" value="2.23" /> 

<input type="hidden" name="products.Index" value="caliente" /> 
<input type="text" name="products[caliente].Name" value="Salsa" /> 
<input type="text" name="products[caliente].Price" value="1.23" /> 

<input type="submit" /> 

Leider haben wir einen Helfer nicht diese versteckten Eingänge zu erzeugen.

Was mache ich falsch?

Answer 1

Sie benötigen 2 versteckte Eingänge für die Sammlung Indexer mit Namen Rooms.Index und Rooms[i].Images.Index. Versuchen Sie außerdem nicht, die von den Methoden HtmlHelper generierten name-Attribute zu ändern. Ihr Code sollte

sein

for (int i = 0; i < Model.Rooms.Count; i++) 
{ 
    <input type="hidden" name="Rooms.Index" value="@i" /> // outer indexer 
    @for (var ii = 0; ii < Model.Rooms[i].Images.Count; ii++) 
    { 
     <input type="hidden" name="Rooms[@i].Images.Index" value="@ii" /> // inner indexer 
     <div class="slide"> 
      <img class="pic panel" src="@Url.Content(Model.Rooms[i].Images.ToList()[ii].Path)" /> 
      @Html.HiddenFor(m => Model.Rooms[i].Images[ii].ImageID) 
      @Html.HiddenFor(m => Model.Rooms[i].Images[ii].Path) 
      <div class="snipit"> 
       <img class="hoverpic panel" src="http://findicons.com/files/icons/99/office/128/delete.png" width="40" height="40" /> 
      </div> 
     </div> 
    } 
}