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

Posted 2023-05-08

【中文标题】Bootstrap Modal，在按钮单击时调用 Action Result 方法

【英文标题】：Bootstrap Modal, calling Action Result method on button click

【发布时间】：2018-10-09 12:32:25

【问题描述】：

我需要帮助。

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

我的观点：

 @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 里面吗？

模态框不在表单内。

【参考方案1】：

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

模态（添加 onclick 到按钮）

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

动作

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