Bootstrap Modal，在按钮单击时调用 Action Result 方法答案

【问题标题】：Bootstrap Modal, calling Action Result method on button clickBootstrap Modal，在按钮单击时调用 Action Result 方法
【发布时间】：2023-03-25 09:55:01
【问题描述】：

我需要帮助。

在我看来，我有一个文件选择器，它将在我的数据库的某个表中加载文件，单击按钮时它会调用引导模式来询问用户是否正在上传更多文件。

我的观点：

 @using (Html.BeginForm("UploadFile", "Upload", FormMethod.Post, new { enctype = "multipart/form-data" }))
            {

            <div>
                @*@Html.TextBox("file", "", new { type = "file" }) <br />*@
                <input type="file" name="file" accept=".csv" />
                @*<input type="submit" value="Upload New Accounts File" class="btn btn-primary btn-lg" onclick="Confirm()" />*@
                <input type="submit" value="Upload New Accounts File" class="btn btn-primary btn-lg"  data-toggle="modal" data-target="#confirmDialog" />
                @ViewBag.Message
            </div>
        }

我的模态：

<!-- Modal -->
<div class="modal fade" id="confirmDialog" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ModalLabel">Confirmation Required</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Do you have more files to upload?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Yes</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
            </div>
        </div>
    </div>
</div>

我的控制器：

public ActionResult UploadFile()
        {
            return View();
        }
        [HttpPost]
        public ActionResult UploadFile(HttpPostedFileBase file, string confirm_value)
        {
//TODO
//TODO
}

我的问题如下：

在设置模态之前，当我单击此按钮“上传新帐户文件”时，文件被加载到数据库中，但现在它调用了模态。当用户在模式上单击“是”时，我想将文件加载到数据库中，但我不知道如何。

请帮忙。

【问题讨论】：

你的模态框在 from 里面吗？
模态框不在表单内。

标签： javascript jquery asp.net-mvc twitter-bootstrap modal-dialog

【解决方案1】：

您可以使用Ajax 进行如下操作：

模态（添加 onclick 到按钮）

<div class="modal-footer">
    <button type="button" onclick="upload()" class="btn btn-primary" data-dismiss="modal">Yes</button>
     ...
</div>

function upload() {
    var fdata = new FormData();

    $('input[name="file"]').each(function(a, b) {
        var fileInput = $('input[name="file"]')[a];
        if (fileInput.files.length > 0) {
            var file = fileInput.files[0];
            fdata.append("fileUpload", file);
        }
    });


    $.ajax({
        type: 'post',
        url: '/UploadFile/Upload',
        data: fdata,
        processData: false,
        contentType: false,
        success: function(e) {
            // Do success process
        }
    });
}

动作

[HttpPost]
public ActionResult UploadFile(HttpPostedFileBase file) {
    //TODO
    //TODO
}

【讨论】：