将视图作为模态返回

时间:2016-08-30 12:48:05

标签: javascript jquery asp.net-mvc twitter-bootstrap asp.net-mvc-4

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

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

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>

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

我这样做的方法是将响应插入到空的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
    }