处理在 ASP.NET MVC 中动态添加的文件上传答案

【问题标题】：Handle file uploads added dynamically in ASP.NET MVC处理在 ASP.NET MVC 中动态添加的文件上传
【发布时间】：2019-03-05 21:34:18
【问题描述】：

早安/晚安，亲爱的 SOers，

我坚持在 ASP.NET MVC 的表单中动态添加文件上传。我使用动态添加的控件创建表单（在表中插入行）。其中之一是文件上传。控件是通过这个 jQuery 函数添加的：

$('#addRow').on('click', function () {
    var counter = $('.itemRow').length;
    $('#itemstable').append('<tr class="itemRow"> <td><select required name="ItemsList[' + counter + '].ProgramNameShort">@foreach (SelectListItem item in ViewBag.VBprograms) { <option value="@item.Value">@item.Text</option>} </select></td>' +
        '<td><input type="text" name="ItemsList[' + counter + '].ItemName" /></td>' +
        '<td><input type="text" name="ItemsList[' + counter + '].ItemProducer" /></td>' +
        '<td><input type="text" name="ItemsList[' + counter + '].ItemQty" /></td>' +
        '<td><input type="text" name="ItemsList[' + counter + '].Additional" /></td>' +
        '<td><input type="text" name="ItemsList[' + counter + '].Comments" /></td>' + 
        '<td><input type="file" name="ItemsList[' + counter + '].Image" /></td>' +
        '</tr>');

    counter++;
});

我的控制器接收 ViewModel：

[HttpPost]
public ActionResult Create(CallViewModel callViewModel)

Image 为[] byte 属性的ItemsList 是CallViewModel 类中的类。后来对象被保存在数据库中（DB First 方法）。据我了解，图像可以作为 HttpPostedFileBase 对象（或 IEnumerable 用于上传的多个文件）上传。但是如何处理在这样一个列表中上传的文件上传？我无法显示所有代码，因为它是多步骤多选项卡表单，表格只是其中一个选项卡的一部分。如果需要演示代码的任何部分，我可以更新当前问题。

非常感谢。

UPD 这是 CallViewModel 类的相关部分：

        public class CallViewModel
            {
    ... //properties used in other tabs

         public List<ItemClass> ItemsList { get { return _items; } }

         private List<ItemClass> _items = new List<ItemClass>();
public class ItemClass
        {  //Item

            public Guid ItemID { get; set; }

            [Required, Display(Name = "Наименование")]
            public string ItemName { get; set; }

            [Required, Display(Name = "Производитель")]
            public string ItemProducer { get; set; }

            [Required, Display(Name = "Количество")]
            public int ItemQty { get; set; }

            [Display(Name = "Комментарии")]
            public string Comments { get; set; }

            [Required, Display(Name = "Изображение")]
            public HttpPostedFileBase Image { get; set; }

            [Display(Name = "Дополнительно предоставляемые объекты")]
            public string Additional { get; set; }
            //Program
            //[Required, Display(Name = "Полное название")]
            //public string ProgramNameFull { get; set; }

            [Required, Display(Name = "Краткое название")]
            public string ProgramNameShort { get; set; }

            List<Program> Programs { get; set; }
}
}

【问题讨论】：

您的 Image 属性必须是 HttpPostedFileBase
@Stephen，感谢您的及时回复，并对我的菜鸟问题感到抱歉：应该在 ViewModel 类中将其声明为 HttpPostedFileBase Image 吗？
是 - public HttpPostedFileBase { get; set; }（也建议您阅读 Submit same Partial View called multiple times data to controller? 以获得更好的选择）
你能展示你的模型类CallViewModel代码吗？
@PNDev，太大了，我就贴一小部分和相关代码（斯蒂芬·穆克评论后更新）。

标签： c# asp.net-mvc file-upload

【解决方案1】：



    $('#addRow').on('click', function () {
        var counter = $('.itemRow').length;
        $('#itemstable').append('<tr class="itemRow"> <td><select required name="ItemsList[' + counter + '].ProgramNameShort">@foreach (SelectListItem item in ViewBag.VBprograms) { <option value="@item.Value">@item.Text</option>} </select></td>' +
            '<td><input type="text" name="ItemsList[' + counter + '].ItemName" /></td>' +
            '<td><input type="text" name="ItemsList[' + counter + '].ItemProducer" /></td>' +
            '<td><input type="text" name="ItemsList[' + counter + '].ItemQty" /></td>' +
            '<td><input type="text" name="ItemsList[' + counter + '].Additional" /></td>' +
            '<td><input type="text" name="ItemsList[' + counter + '].Comments" /></td>' + 
            '<td><input type="file" id="FileUpload ' + counter  + '"   /></td>' +
            '</tr>');

        counter++;
    });




--In controller do 
-- lengthofRow means no of row into ItemsList collection
 for(Int i=1; i<lengthofRow ;i++ )
{
  // from below line you can access you file upload by user .
   Request.Files["FileUpload" + i ];
}

【讨论】：

好的，但是创建操作会收到什么？ [HttpPost] public ActionResult Create(CallViewModel callViewModel) -- 括号里应该写什么？
写的和我给你的一样。并在我写的时候使用代码。
抱歉，还是不明白你的具体建议是什么。您能否使用操作代码的相关部分更新您的答案？

【解决方案2】：

    <!--  Please define set property of Item List into Model -->
    <!-- begin snippet:hide: false console: true babel: false   -->
    <!-- language: lang-html -->    


 $('#addRow').on('click', function () {
        var counter = $('.itemRow').length;
        $('#itemstable').append('<tr class="itemRow"> <td><select required name="ItemsList[' + counter + '].ProgramNameShort">@foreach (SelectListItem item in ViewBag.VBprograms) { <option value="@item.Value">@item.Text</option>} </select></td>' +
            '<td><input type="text" name="ItemsList[' + counter + '].ItemName" /></td>' +
            '<td><input type="text" name="ItemsList[' + counter + '].ItemProducer" /></td>' +
            '<td><input type="text" name="ItemsList[' + counter + '].ItemQty" /></td>' +
            '<td><input type="text" name="ItemsList[' + counter + '].Additional" /></td>' +
            '<td><input type="text" name="ItemsList[' + counter + '].Comments" /></td>' + 
            '<td><input type="file" id="FileUpload ' + counter  + '"   /></td>' +
            '</tr>');

        counter++;
    });

    <!-- end snippet -->



    <!-- Please attach debugger and check you will all file into Request.File  -->
    <!--[HttpPost]  -->
    <!--public ActionResult Create(CallViewModel callViewModel)  -->
    <!--{  -->
        <!--   Int32 cnt=0;  -->
        <!--   cnt = CallViewModel.ItemsList.Count(); -->
         <!-- for(Int i=1; i<=cnt ;i++ )-->
        <!--  {  -->
            // from below line you can access you file upload by user .
         <!--    Request.Files["FileUpload" + i ];  -->
        <!--  }  -->
    <!--} -->

【讨论】：