返回作为模态的视图

Return View as a Modal

本文关键字：视图 模态 返回      更新时间：2023-09-26

我试图返回一个模态从我的控制器后动作的前一个模态。我遇到的问题是，部分视图没有呈现为模态。我能找到的所有文档都是指从按钮打开一个模态，但是我的模态是有条件的，所以我希望控制器来处理是否加载模态/加载哪个模态

局部视图的一部分，我返回包含模态的视图 

return PartialView("_AccountUpdateSuccess");

我认为

<div class="modal fade" tabindex="-1" role="dialog" id="updateSuccess">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Success!</h4>
            </div>
            <div class="modal-body">
                <p class="text-success">@ViewBag.Account has been updated successfully!</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript">
    $(document)
        .ready(function() {
            $("#updateSuccess").modal('show');
        });
</script>

您必须将javascript添加到父视图中，作为ajax函数的回调，而不是在部分视图中。原因是ajax调用添加的脚本标记不会自动运行。

我这样做的方法是将响应插入到一个空的div中，例如，在共享布局的底部。我在返回PartialView时使用此方法，没有任何问题。

然后我用这个脚本加载一个模态:

$.ajax({
    type: "POST",
    url: "/Controller/ActionWhichReturnsAPartialView",
    success: function (data) {
        $(".modal-backdrop").remove(); // I have to do this hack just in case of a modal calling another modal and to avoid some display issues with the overlayed background
        $("#temp").html(data); // #temp is the empty div
        $("#myModal").modal("show"); // myModal is the root div id of the html result
    }
相关文章：