如何将Webgrid中View层上传的文件作为参数提交到Controller

问题核心原因 #

普通jQuery的$.post方法默认使用application/x-www-form-urlencoded格式传输数据，不支持二进制文件上传，需要改用FormData对象封装参数提交。

修复步骤 #

1. 补全附件选择触发逻辑 #

你现有代码中点击附件图标没有关联触发隐藏的文件选择框，先新增如下JS：

// 点击附件图标触发当前行的隐藏文件选择框
$(document).on('click', '.attachFileBtn', function () {
    $(this).closest('td').find('.approvalFile').click();
});

2. 替换提交逻辑，使用FormData传文件 #

将你原有的offboardBtn点击提交逻辑替换为如下代码：

$(document).on("click", '.offboardBtn', function () {
    var url = $(this).data('url');
    var $currentTr = $(this).parents('tr');
    // 读取当前行的表单字段
    var reasonid = $currentTr.find('#ReasonID').val();
    var releasedate = $currentTr.find('.ReleaseDate').val();
    var empID = $(this).data('employeeid');
    var accID = $(this).data('accountid');
    // 读取当前行选中的文件
    var fileInput = $currentTr.find('.approvalFile').get(0);

    // 用FormData封装所有请求参数
    var formData = new FormData();
    formData.append('reasonID', reasonid);
    formData.append('employeeID', empID);
    formData.append('accountID', accID);
    formData.append('releaseDate', releasedate);
    // 追加文件，参数名必须和Controller接收的HttpPostedFileBase参数名完全一致
    if (fileInput.files.length > 0) {
        formData.append('AttachFile', fileInput.files[0]);
    }

    // 用ajax提交，禁止jQuery自动处理数据和设置请求头
    $.ajax({
        url: url,
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function (data) {
            $('#employeeGrid').html(data);
        }
    });
});

3. Controller端补充文件保存逻辑 #

你现有Controller的参数已经定义了HttpPostedFileBase AttachFile，只要参数名和FormData中追加的key一致，就能正常接收到文件，补充保存逻辑即可：

public ActionResult SaveOffboardingDetails(int reasonID, int employeeID, int accountID, DateTime releaseDate, HttpPostedFileBase AttachFile)
{
    try
    {
        // 附件保存逻辑
        if (AttachFile != null && AttachFile.ContentLength > 0)
        {
            // 自定义存储路径，示例存在App_Data下的Uploads文件夹
            var saveFolder = Server.MapPath("~/App_Data/Uploads/");
            if (!Directory.Exists(saveFolder))
            {
                Directory.CreateDirectory(saveFolder);
            }
            // 生成不重复文件名避免覆盖
            var saveFileName = $"{employeeID}_{DateTime.Now:yyyyMMddHHmmss}_{Path.GetFileName(AttachFile.FileName)}";
            var fullSavePath = Path.Combine(saveFolder, saveFileName);
            // 保存文件到服务器
            AttachFile.SaveAs(fullSavePath);

            // 此处可自行扩展：将文件路径、文件名存入对应业务数据库
        }

        // 原有业务逻辑保持不变
        OnboardedEmpVM objonboardedempVM = new OnboardedEmpVM();
        OnboardedEmployee objonboardedemp = new OnboardedEmployee();
        int result = objOffboardingBLL.SaveOffboardingDetails(reasonID, employeeID, accountID, releaseDate);

        if (releaseDate.Date == DateTime.Now.Date && (reasonID == 2 || reasonID == 4))
        {
            int employeeresult = objOffboardingBLL.OffBoardEmployeeDetails(employeeID);
            int infraresult = objOffboardingBLL.DeleteInfraDetails(employeeID);
            int projectresult = objOffboardingBLL.OffboardProjectDetails(employeeID, accountID);
        }

        // 原有返回逻辑保持不变
    }
    catch (Exception ex)
    {
        // 按需添加异常处理
    }
}

额外注意 #

如果你的页面外层有form标签，建议添加enctype="multipart/form-data"属性，避免低版本浏览器兼容问题：

<form method="post" enctype="multipart/form-data">
    <!-- 你的WebGrid代码放在这里 -->
</form>

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