2016-08-01 44 views
1

我有一个视图模型包含public List<Room> Rooms { get; set; }房间包含一个List<BL.Image> Images。在我看来,我循环穿过房间并显示每个图像。ASP MVC通过非顺序项目

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

图像可以被添加或由用户删除,但如果图像被删除,当表单被删除的图像之前仅提交图像被例如识别

  • 图像1,图像2,图像3,图像4显示

  • 图像3被删除

  • 仅提交当表单图像1和2中确认。

我为解决这个问题而回顾的问题之一是this one,我似乎也在做同样的事情。这个问题还链接到一个Blog Post在这 - 临近结束它涵盖了非连续指数

非循序索引 ...当你不能保证提交的值将维持,会发生什么顺序索引?例如,假设您希望允许在通过JavaScript提交书籍列表之前删除行。 好消息是,通过引入额外的隐藏输入,您可以允许任意索引。在下面的例子中,我们为每个需要绑定到列表的项目提供一个带有.Index后缀的隐藏输入。这些隐藏输入中的每一个的名称都是相同的......这将给模型绑定器一个很好的索引集合,以便在绑定到列表时查找。

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

不幸的是,我们没有产生这些隐藏输入的帮手。

我在做什么错?

回答

2

您需要2个隐藏的输入,用于名称为Rooms.IndexRooms[i].Images.Index的收集索引器。另外,请勿尝试更改由HtmlHelper方法生成的name属性。你的代码应该是

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> 
    } 
} 
+0

谢谢你的回答,它已经工作(非常安心)。关于不改变名称元素,我只是作为最后的手段。在改变它之前,'name =“[4] .Path”'被渲染(例如)并且图像被传递为空。我可以在链条上进一步做错吗,还是这个问题需要一个新的线程? – tony09uk

+0

刚刚注意到你有'.ToList()'在那里需要被删除(见编辑) –

+0

对不起,我把'List '它应该是'ICollection',因此索引不会被应用而不会将其转换为列表。 'Room'类是由实体框架生成的,所以我认为我坚持它是一个集合,我认为 – tony09uk