Question

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

我的按钮

＆＃13;

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

＆＃13;

空模式

＆＃13;

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

＆＃13;

我的剧本

＆＃13;

@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")
}

＆＃13;

更新

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

Answer 1

试试这个我已经更改了Modal show命令并删除了数据网址

＆＃13;

@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")
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我设法通过让函数返回false来解决这个问题。我不确定为什么这样有效，如果有人能够启发我，那就太棒了。

Asp.net mvc将部分页面加载到bootstrap模式中

2 个答案: