Asp.net mvc 问题将部分页面加载到引导模式中

Posted 2023-05-08

【中文标题】Asp.net mvc 问题将部分页面加载到引导模式中

【英文标题】：Asp.net mvc issues loading a partial page into a bootstrap modal

【发布时间】：2018-06-24 01:59:45

【问题描述】：

我正在努力解决这个问题。我正在尝试将部分视图加载到模态的 div 中，但我似乎无法让它工作。每次我单击按钮时，屏幕都会消失，好像它会显示一个模态但随后又恢复正常。任何帮助将不胜感激。

我的按钮

<button class="btn btn-default" id="addDocument">Add</button>

空模态

<div id='myModal' class='modal fade' data-url='@Url.Action("CreateTemplateDocument")'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
    </div>
</div>

还有我的脚本

@section Scripts 
    <script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () 
            $('#addDocument').click(function () 
                var url = $('#myModal').data('url');

                $.get(url, function (data) 
                    $('#myModalContent').html(data);

                    $('#myModal').modal('show');
                );
            );
        );
    </script>

    @Scripts.Render("~/bundles/jqueryval")

更新：

因此，从进一步测试来看，运行脚本后页面似乎正在重新加载。我的印象是 ajax 阻止了但我猜这是错误的。

【参考方案1】：

试试这个我已经更改了模态显示命令并删除数据 url

@section Scripts 
    <script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () 
            $('#addDocument').click(function () 
                var url = $('#myModal').data('url');

                $.get(url, function (data) 
                    $('#myModalContent').html(data);

                    $('#myModal').modal(
            keyboard: false,
            remote: '/home/partial'    // YOUR PARTIAL VIEW URL
                   ).show();
                );
            );
        );
    </script>

    @Scripts.Render("~/bundles/jqueryval")

<div id='myModal' class='modal fade' >
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
    </div>
</div>

<div id='myModal' class='modal fade' data-url='@Url.Action("CreateTemplateDocument")'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
    </div>
</div>

【讨论】：

不幸的是它和我的结果一样。

【参考方案2】：

我设法通过让函数返回 false 来解决这个问题。我不知道为什么这会奏效，所以如果有人能启发我，那就太棒了。