是否可以使用表單在MVC中提交列表？

Question

我希望網站的用戶同時上傳多個圖片，最多可以添加5個圖片。我創建了我的所有ViewModels以及[HttpPost]方法，這些方法將處理圖像列表並遍歷每個圖像，從而保存圖像。

我的問題是：如何在Post方法中接收該列表？

我已經爲我的ViewModels下面的代碼：

public class ImageCreateViewModel 
{ 
    public int ImageId { get; set; } 

    public int CollectionId { get; set; } 

    [Required(ErrorMessage = "Please enter a description of the photo.")] 
    [MaxLength(50)] 
    public string Description { get; set; } 

    [Required(ErrorMessage = "Please attach an image.")] 
    public HttpPostedFileBase Image { get; set; } 

    public string Location { get; set; } 

    public int Order { get; set; } 
} 

public class ImagesCreateViewModel : ImageCreateViewModel 
{ 
    public List<ImageCreateViewModel> Images { get; set; } 

    public MyEnumerator GetEnumerator() 
    { 
     return new MyEnumerator(this); 
    } 
} 


public class MyEnumerator 
{ 
    int index; 
    ImagesCreateViewModel imagesCreateViewModel; 

    public MyEnumerator(ImagesCreateViewModel imagesCreateViewModel) 
    { 
     this.imagesCreateViewModel = imagesCreateViewModel; 
     index = -1; 
    } 

    public bool MoveNext() 
    { 
     index++; 
     return (index < imagesCreateViewModel.Images.Count()); 
    } 

    public ImageCreateViewModel Current 
    { 
     get 
     { 
      return (imagesCreateViewModel.Images[index]); 
     } 
    } 
} 

這裏是我的控制器：

[HttpPost] 
public ActionResult CreateImages(ImagesCreateViewModel imagesEditViewModel) 
{ 
    if (!ModelState.IsValid) 
    { 
     return View(imagesEditViewModel); 
    } 

    foreach (ImageCreateViewModel imageCreateViewModel in imagesEditViewModel) 
    { 
     string fileName = Guid.NewGuid().ToString(); 
     string serverPath = Server.MapPath("~"); 
     string contentPath = String.Format("Content\\{0}\\Content\\Images\\{1}", Helper.Helper.ResolveBrand(), fileName); 
     string imagePath = serverPath + contentPath; 

     bool success = Helper.Helper.SaveImage(imagePath, imageCreateViewModel.Image.InputStream); 

     if (success) 
     { 
      Image image = new Image 
      { 
       Collection = ds.Single<Collection>(c => c.CollectionId == imageCreateViewModel.CollectionId), 
       Description = imageCreateViewModel.Description, 
       Location = contentPath, 
       Order = Helper.Helper.GetImageOrder(imageCreateViewModel.CollectionId) 
      }; 

      ds.InsertOnSubmit<Image>(image); 
      ds.SubmitChanges(); 
     } 

     else 
      //TODO: Write Error to them 
      success = false; 
    } 

    return RedirectToAction("Collection"); 

} 

但是，當我生成這個方法的視圖它不僅具有abilty操縱一個

@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" })) 
{ 
    @Html.ValidationSummary(true) 
    <fieldset> 
     <legend>New Image</legend> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Description) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.Description) 
      @Html.ValidationMessageFor(model => model.Description) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Image) 
     </div> 
     <div class="editor-field"> 
      @Html.ValidationMessageFor(model => model.Image) 
      <input type="file" name="Image" /> 
     </div> 

     <p> 
      <input type="submit" value="Create" /> 
     </p> 
    </fieldset> 
} 

Answer 1

下面是一些代碼，我在我的網站用來上傳多張圖片：

---

好了，這是怎麼做的一個簡單的例子。最終結果是：

的HTML標記是一個簡單的形式，一個提交按鈕。

@using (Html.BeginForm("Create", "Product", FormMethod.Post, new { enctype = "multipart/form-data" })) { 
    @Html.ValidationSummary() 

    <div class="form-field"> 
     <p>Select pictures:</p> 
     <div class="upload-container"> 
      <div class="upload"> 
       <input type="file" name="files" id="file1" /> 
       <img src="@Url.Content("~/Public/images/delete.png")" alt="Remove picture." /> 
      </div> 
     </div>   
    </div> 

    <div class="form-field"> 
     <input type="submit" value="Create" /> 
    </div> 
} 

我們還需要一些jQuery的魔力，因此每次有人添加圖像，讓我們需要他們還可以添加更多。用戶可以上傳N張圖像。我們使用的on()方法，這樣的事件每一個新創建的元素結合上。添加輸入

公告名稱爲「文件」，我們在ActionMethod使用相同的名稱。

<script type="text/javascript"> 
    $(document).ready(function() { 
     var currentImage = 1; 
     $("body").on("change", "input[name='files']", function() { 
      var pathToRemoveIcon = "@Url.Content("~/Public/images/delete.png")"; 
      currentImage = currentImage + 1; 
      var htmlToAppend = '<div class="upload"><input type="file" name="files" id="file' + currentImage + '" /><img src="' + pathToRemoveIcon + '" alt="Remove picture." /></div>'; 
      $('.upload-container').append(htmlToAppend); 
     }).on("click", ".upload img", function() { 
      if ($(this).parent().siblings().length > 0) { 
       $(this).parent().remove();  
      } 
     }); 
    }); 
</script> 

最後，我們收到我們要綁定的模式，也文件的枚舉的控制器代碼：

[HttpPost] 
public ActionResult Create(ProductModel model, IEnumerable<HttpPostedFileBase> files) 
{ 
    try 
    { 
     if (ModelState.IsValid) 
     { 
      foreach (var file in files) 
      { 
       // Verify that the user selected a file 
       if (file != null && file.ContentLength > 0) 
       { 
        // extract only the filename 
        var fileName = Path.GetFileName(file.FileName); 

        // etc. 
       } 
      } 
     } 
     return RedirectToAction("Index"); 
    } 
    catch 
    { 
     return View(model); 
    } 
} 

Answer 2

L：在時間（我來編輯，以允許他們上載的圖像）圖像VC將允許您通過接受HttpPostedFileBase對象列表來接受多個文件上傳。您需要確保所有文件上傳控件的名稱與您的操作方法的參數名稱相同。

public ActionResult UploadFiles(IEnumerable<HttpPostedFileBase> files) 
{ 
} 

Answer 3

我不知道這是否會轉移到正確生成模型，但是如果你能夠使用HTML5，那麼你可以做使用input multiple屬性允許多於一個的輸入。它不是在鉻我承認可怕的漂亮，不過，

Here is the documentation

And, here is a decent example that makes things a little prettier

Answer 4

這是可能的，但你將不得不做的不僅僅是汽車腳手架更多的工作的看法。以下是Phil Haack撰寫的博客文章，詳細介紹如何構建對MVC和集合中的ModelBinding友好的HTML視圖。

http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx

另一篇文章由斯科特·Hansleman的話題。 http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx

Answer 5

您可以上傳一個帖子的多個文件。

只需爲每個文件上傳一個不同的文件上傳名稱，然後在控制器中執行Request.Files的foreach。一些類似於：

foreach (var file in Request.Files) 
{ 
    if (file.ContentLength > 0) 
    ... do something ... 

} 

Here a sample