ASP.NET Core MVC中动态文件输入的员工数据与文档保存方案

针对你的需求，这里提供3种可落地的实现方案，结合现有代码给出具体修改步骤：

方案一：将文档输入整合到主表单（推荐） #

核心思路是把模态框中的文件输入字段直接归属到主员工表单中，提交主表单时一并上传所有数据和文件。

1. 修改ViewModel #

在EmployeeVM中添加文档集合属性，用于接收上传的文件：

public class EmployeeVM : BaseViewModel<EmployeeDto>
{
    // 原有属性保持不变...

    // 添加文档上传字段，Key对应文档类型ID，Value是上传的文件
    public Dictionary<int, IFormFile> Documents { get; set; } = new Dictionary<int, IFormFile>();
}

2. 调整主表单 #

给主表单添加enctype="multipart/form-data"（必须，否则无法上传文件），并添加一个隐藏容器用于存放文档输入字段：

<form class="row g-3" method="post" asp-action="Create" enctype="multipart/form-data">
    <!-- 原有员工字段保持不变 -->
    
    <!-- 添加隐藏容器，用于加载文档输入 -->
    <div id="documentContainer" style="display:none;">
        <!-- 文档输入字段将动态加载到这里 -->
    </div>

    <div class="col-12">
        <span class="btn btn-primary" id="btnUploadDoc">Upload Documents</span>
        <button type="submit" class="btn btn-primary">Create</button>
    </div>
</form>

3. 修改模态框视图 #

去掉模态框中的独立表单，只保留文档输入的表格结构，并且给文件输入框设置对应name属性，让它能被主表单识别：

@model IEnumerable<MasterDocumentTypeDto>
@{
    int rowId = 0;
}
<table class="table">
    <thead>
        <tr>
            <th scope="col">Sr. No.</th>
            <th scope="col">Document Type</th>
            <th scope="col" class="text-center">Select File</th>
            <th scope="col" class="text-center">File</th>
        </tr>
    </thead>
    <tbody class="table-group-divider">
        @if (Model != null)
        {
            foreach (var item in Model)
            {
                <tr>
                    <input type="hidden" name="Documents[@item.Id].Key" value="@item.Id" />
                    <th scope="row">@(rowId + 1)</th>
                    <td>@item.DocName</td>
                    <td class="text-center">
                        <div class="form-input">
                            <input type="file" class="form-control" name="Documents[@item.Id].Value" />
                        </div>
                    </td>
                    <td></td>
                </tr>
                rowId++;
            }
        }
        else
        {
            <tr>
                <th scope="row" colspan="5" class="text-center">No Records Found!</th>
            </tr>
        }
    </tbody>
</table>

<div class="row">
    <div class="col-md-6 text-end">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    </div>
</div>

4. 调整JS代码 #

打开模态框时，将文档视图加载到主表单的容器中：

$('#btnUploadDoc').on('click',function(){
    $.post('/getDocumentView').done(result => {
        // 将文档输入加载到主表单的容器中
        $('#documentContainer').html(result);
        // 显示模态框
        mdlA.id = "documentModal";
        mdlA.title = `Upload Employee Documents`;
        mdlA.content = $('#documentContainer').html();
        mdlA.show(mdlA.size.large);
    });
});

5. 修改后端Action #

在Create Action中接收EmployeeVM，即可同时获取员工数据和文档：

[HttpPost]
public IActionResult Create(EmployeeVM model)
{
    if (ModelState.IsValid)
    {
        // 保存员工数据
        var employeeId = _employeeService.Create(model);
        
        // 处理文档上传
        foreach (var doc in model.Documents)
        {
            int docTypeId = doc.Key;
            IFormFile file = doc.Value;
            // 保存文件到服务器，关联到employeeId和docTypeId
        }
        
        return RedirectToAction("Index");
    }
    // 处理验证失败逻辑
    return View(model);
}

方案二：先保存员工，再异步上传文档 #

如果不想修改主表单结构，可以先提交员工数据获取ID，再用该ID上传文档。

1. 修改主表单提交逻辑 #

通过AJAX提交员工表单，获取返回的员工ID：

$('form').on('submit', function(e){
    e.preventDefault();
    var formData = new FormData(this);
    
    $.ajax({
        url: $(this).attr('action'),
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response){
            var employeeId = response.employeeId;
            // 打开文档模态框，并传递employeeId
            openDocumentModal(employeeId);
        }
    });
});

function openDocumentModal(employeeId){
    $.post('/getDocumentView', { employeeId: employeeId }).done(result => {
        mdlA.id = "getDocumentView";
        mdlA.title = `Upload Employee Documents`;
        mdlA.content = result;
        mdlA.show(mdlA.size.large);
        // 将employeeId存入模态框的隐藏字段
        $('#documentModal').find('form').append(`<input type="hidden" name="EmployeeId" value="${employeeId}" />`);
    });
}

2. 修改文档模态框表单 #

让表单指向文档上传的Action：

<form asp-action="UploadEmployeeDocuments" method="post" enctype="multipart/form-data">
    <!-- 原有表格结构不变，给文件输入框设置name="Documents" -->
    <input type="file" class="form-control" name="Documents" />
    <!-- 隐藏字段存储员工ID -->
    <input type="hidden" name="EmployeeId" />
    
    <div class="row">
        <div class="col-md-6 text-end">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Upload Documents</button>
        </div>
    </div>
</form>

3. 后端添加文档上传Action #

[HttpPost]
public IActionResult UploadEmployeeDocuments(int employeeId, List<IFormFile> Documents)
{
    foreach (var file in Documents)
    {
        // 根据文件名或额外字段匹配文档类型ID，保存文件并关联员工ID
    }
    return RedirectToAction("Index");
}

方案三：手动构造FormData提交所有数据 #

通过jQuery收集主表单的所有字段和模态框的文件，手动构造FormData后AJAX提交。

1. 修改模态框 #

给文件输入框添加统一类名，保留文档类型ID的隐藏字段：

<!-- 模态框中的文件输入 -->
<input type="hidden" class="doc-type-id" value="@item.Id" />
<input type="file" class="form-control doc-file" />

2. 编写提交逻辑 #

$('#btnSubmit').on('click', function(){
    var formData = new FormData($('form')[0]);
    
    // 收集模态框中的文件
    $('.doc-file').each(function(){
        var docTypeId = $(this).siblings('.doc-type-id').val();
        if(this.files.length > 0){
            formData.append(`Documents[${docTypeId}]`, this.files[0]);
        }
    });
    
    $.ajax({
        url: '/Employee/Create',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(){
            window.location.href = '/Employee/Index';
        }
    });
});

3. 后端接收逻辑同方案一 #

直接在Create Action中接收EmployeeVM即可。

内容的提问来源于stack exchange，提问作者Mayank