c# - 如何在 MVC 视图中动态添加/删除文件

Question

我正在创建一个视图以添加许多文件并保存在数据库中。我的模型如下。

public class WebEmail
{
    public string EmailID { get; set; }
    public string Name { get; set; }

    //[Required]
    public HttpPostedFileBase PdfFile { get; set; }
    public byte[] pdfSource { get; set; }
    public string FileName { get; set; }

    public List<WebAsset> LstWebAssets { get; set; }
}

public class WebAsset
{
    public string AssetId { get; set; }
    public bool IsPreview { get; set; }
    public HttpPostedFileBase PdfFile { get; set; }
    public byte[] pdfSource { get; set; }
    public string FileName { get; set; }
}

我无法将子内容发布到控制器。

这是控制器动作：

public ActionResult Create(WebEmail Email)
    {
        var files = Request.Files;
        if (ModelState.IsValid)
        {                
            return RedirectToAction("Index");
        }
        else
        {
            return View(Email);
        }
    }

我正在使用 javascript 添加/删除视图中的文件。以下是我如何实现它来捕获文件：

<div class="form-group">
    @Html.Label("Upload Files", htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        <div id="uploads" class="row" style="margin:auto;">
            @foreach (var item in Model.LstWebAssets)
            {
                <div class="radio col-sm-2" id="uploadtemplate">
                    @Html.RadioButtonFor(x => item.IsPreview,true, htmlAttributes: new { @class = "radio" })
                    <input type="radio" name="IsPreview" checked>
                    <input type="file" id="inputPdf" name="PdfFile" accept="application/pdf" />
                </div>
            }                

            <div class="col-sm-2">
                <input type="button" value="+" onclick="DynamicFileInput(this.parentNode)" />
            </div>
        </div>
    </div>
</div>

Javascript代码：

function DynamicFileInput(addbtn) {
var division = document.createElement('DIV');
division.innerHTML = AddDynamicInput();    
document.getElementById("uploads").insertBefore(division, addbtn);

}

function AddDynamicInput() {
return `<div class="radio col-sm-2" id="uploadtemplate">
            <input type="radio" name="IsPreview">
            <input type="file" id="inputPdf" name="PdfFile" accept="application/pdf" />
            <input class="btn btn-primary" type="button" id="btnDelete" value="-" onclick="DeleteInput(this)" />
        </div>`;

}

function DeleteInput(thisButton) {
//$('#uploads').remove(thisButton.parent.parent);
document.getElementById("uploads").removeChild(thisButton.parentNode.parentNode);

}

此代码允许我在视图中添加或删除文件，但是当我尝试发布到控制器时，model.LstWebAssets 为空。它不会从视图中捕获文件信息。

我可以从 Request.Files 中捕获文件，但这不提供其他文件详细信息，如 AssetId、IsPreview 值。

请建议我如何能够在控制器中捕获列表。如果有人能提出更好的方法来在 UI 中实现此功能，我将不胜感激。

标签： c#html.netmodel-view-controllerbootstrap-4