javascript - Bootstrap Modal，在单击按钮时调用 Action Result 方法

Question

我需要帮助。

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

我的看法:

 @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>

我的 Controller :

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

我的问题如下:

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

请帮忙。

Answer 1

您可以使用 Ajax如下所示:

模态(添加点击按钮)

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

JS

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
        }
    });
}

Action

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