Bootstrap模态框点击调用Action Result及文件上传问询功能求助

我来帮你搞定这个需求！你要实现的是上传CSV文件到数据库后，弹出Bootstrap模态框询问是否继续上传更多文件，对吧？咱们一步步来：

1. 完善视图的HTML结构（表单+模态框） #

先把你现有的表单补全，加上提交按钮，再添加上Bootstrap的模态框代码：

@using (Html.BeginForm("UploadFile", "Upload", FormMethod.Post, new { enctype = "multipart/form-data", id = "fileUploadForm" }))
{
    <div>
        <input type="file" name="file" accept=".csv" required />
        <br /><br />
        <input type="submit" value="上传CSV到数据库" class="btn btn-primary" />
    </div>
}

<!-- Bootstrap 模态框 -->
<div class="modal fade" id="confirmUploadModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmModalLabel">继续上传？</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                文件已成功上传，是否要继续上传更多文件？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="resetFormBtn">继续上传</button>
            </div>
        </div>
    </div>
</div>

注意：给表单加上id="fileUploadForm"方便JS操作，给文件输入框加required确保用户选择了文件再提交。

2. 添加JavaScript逻辑（处理表单提交和模态框交互） #

用jQuery监听表单提交事件，阻止默认提交行为，通过AJAX异步上传文件，成功后触发模态框，再处理模态框的按钮交互：

$(document).ready(function() {
    // 监听表单提交
    $('#fileUploadForm').submit(function(e) {
        e.preventDefault(); // 阻止默认表单刷新提交

        var formData = new FormData(this); // 构建包含文件的表单数据

        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: formData,
            processData: false, // 禁止jQuery处理表单数据（否则文件会被转成字符串）
            contentType: false, // 让浏览器自动设置正确的Content-Type
            success: function(response) {
                // 上传成功后显示模态框
                $('#confirmUploadModal').modal('show');
            },
            error: function(xhr, status, error) {
                alert('文件上传失败：' + error);
            }
        });
    });

    // 点击「继续上传」按钮，重置表单并关闭模态框
    $('#resetFormBtn').click(function() {
        $('#fileUploadForm')[0].reset(); // 重置表单，清空已选文件
        $('#confirmUploadModal').modal('hide'); // 关闭模态框
    });
});

关键要点：用FormData处理文件上传时，必须设置processData: false和contentType: false，否则AJAX无法正确传递文件数据。

3. 完善后端UploadFile Action方法（ASP.NET MVC） #

确保你的Upload控制器里的UploadFile方法能正确接收文件、处理导入逻辑，然后返回成功响应：

[HttpPost]
public ActionResult UploadFile(HttpPostedFileBase file)
{
    if (file != null && file.ContentLength > 0)
    {
        // 这里写你的CSV文件解析和导入数据库逻辑
        // 示例：读取CSV内容、验证格式、插入到指定数据库表

        // 处理成功后返回JSON响应给前端
        return Json(new { success = true });
    }
    return Json(new { success = false, message = "请选择要上传的CSV文件" });
}

如果你的项目是ASP.NET Core，只需把HttpPostedFileBase换成IFormFile，核心逻辑保持一致即可。

这样整个流程就通顺了：用户选择CSV文件→点击提交→AJAX异步上传到后端处理→成功后弹出模态框→用户可选择继续上传（表单重置）或取消。

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