C# 是否可以使用表单在MVC中提交列表？

我希望该网站的用户可以上传多个图像在同一时间最多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]);
        }
    }
}

公共类ImageCreateViewModel
{
公共int-ImageId{get；set；}
公共int集合ID{get；set；}
[必需（ErrorMessage=“请输入照片的描述。”）]
[MaxLength（50）]
公共字符串说明{get；set；}
[必需（ErrorMessage=“请附上图像”）]
公共HttpPostedFileBase映像{get；set；}
公共字符串位置{get；set；}
公共整数顺序{get；set；}
}
公共类ImageCreateViewModel:ImageCreateViewModel
{
公共列表图像{get；set；}
公共分子GetEnumerator（）
{
返回新分子（本）；
}
}
公共类分子
{
整数指数；
ImagesCreateViewModel ImagesCreateViewModel；
公共分子（ImagesCreateViewModel ImagesCreateViewModel）
{
this.imagesCreateViewModel=imagesCreateViewModel；
指数=-1；
}
公共图书馆
{
索引++；
返回（索引

这是我的控制器：

[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");

}

[HttpPost]
公共操作结果CreateImages（ImagesCreateViewModel imagesEditViewModel）
{
如果（！ModelState.IsValid）
{
返回视图（imagesEditViewModel）；
}
foreach（ImageEditViewModel中的ImageCreateViewModel ImageCreateViewModel）
{
字符串文件名=Guid.NewGuid（）.ToString（）；
字符串serverPath=Server.MapPath（“~”）；
string contentPath=string.Format（“内容\\{0}\\Content\\Images\\{1}”，Helper.Helper.ResolveBrand（），文件名）；
字符串imagePath=serverPath+contentPath；
bool success=Helper.Helper.SaveImage（imagePath，imageCreateViewModel.Image.InputStream）；
如果（成功）
{
图像=新图像
{
Collection=ds.Single（c=>c.CollectionId==imageCreateViewModel.CollectionId），
Description=imageCreateViewModel.Description，
位置=内容路径，
Order=Helper.Helper.GetImageOrder（imageCreateViewModel.CollectionId）
};
ds.InsertOnSubmit（图像）；
ds.SubmitChanges（）；
}
其他的
//TODO:向它们写入错误
成功=错误；
}
返回重定向到操作（“收集”）；
}

但是当我为这个方法生成一个视图时，它一次只能操作一个图像（我必须编辑它才能让它们上传图像）：

@使用（Html.BeginForm（null，null，FormMethod.Post，new{enctype=“multipart/form data”}））
{
@Html.ValidationSummary（true）
新形象
@LabelFor（model=>model.Description）
@EditorFor（model=>model.Description）
@Html.ValidationMessageFor（model=>model.Description）
@LabelFor（model=>model.Image）
@Html.ValidationMessageFor（model=>model.Image）


}

MVC将允许您通过接受

HttpPostedFileBase

对象列表，在一个操作中接受多个文件上载。您需要确保所有文件上载控件与操作方法的参数具有相同的名称

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

public ActionResult上载文件（IEnumerable文件）
{
}

MVC将允许您通过接受

HttpPostedFileBase

对象列表，在一个操作中接受多个文件上载。您需要确保所有文件上载控件与操作方法的参数具有相同的名称

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

public ActionResult上载文件（IEnumerable文件）
{
}

我不确定这是否会转移到正确生成模型，但是如果您能够使用HTML5，那么您可以使用

输入多个

属性来允许多个输入。不过，我承认，chrome浏览器并不漂亮得可怕

---

我不确定这是否会转移到正确生成模型上，但是如果您能够使用HTML5，那么您可以使用

输入多个

属性来允许多个输入。不过，我承认，chrome浏览器并不漂亮得可怕

---

这是可能的，但您将需要做更多的工作，而不仅仅是自动搭建视图。下面是Phil Haack的一篇博客文章，详细介绍了如何在MVC和集合中构建对ModelBinding友好的HTML视图

斯科特·汉斯勒曼关于这个话题的另一篇文章。

---

这是可能的，但您将需要做更多的工作，而不仅仅是自动搭建视图。下面是Phil Haack的一篇博客文章，详细介绍了如何在MVC和集合中构建对ModelBinding友好的HTML视图

斯科特·汉斯勒曼关于这个话题的另一篇文章。

---

一篇文章可以上载多个文件

只需为每个文件设置一个不同的文件上载名称，然后在控制器的

Request.Files

中执行foreach。类似于此：

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

}

---

一篇文章可以上载多个文件

只需为每个文件设置一个不同的文件上载名称，然后在控制器的

Request.Files

中执行foreach。类似于此：

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

}

---

以下是我在网站上传多张图片时使用的一些代码：

---

这是一个简单的e

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