Как я могу добавлять / удалять файлы динамически в представлении 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 имеет значение null. Он не захватывает информацию о файле из представления.

Я могу захватывать файлы из Request.Files, но это не предоставляет другие подробности файла, такие как AssetId, значение IsPreview.

Подскажите, пожалуйста, как я смогу захватить список в контроллере Я был бы очень признателен, если бы кто-нибудь мог предложить лучший способ достижения этой функциональности в интерфейсе пользователя.