带有远程模态的 Bootstrap 4

Question

我无法使用新的 Twitter Bootstrap 版本使 Modal 在远程模式下工作：Bootstrap 4 alpha。它与 Bootstrap 3 完美配合。使用 bootstrap 4，我得到了弹出窗口，但模型主体没有被加载。没有远程调用 myRemoteURL.do 来加载模型主体。

代码：

 <button type="button" data-toggle="modal" data-remote="myRemoteURL.do" data-target="#myModel">Open Model</button>

<!-- Model -->
<div class="modal fade" id="myModel" tabindex="-1"
    role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <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>
                <h3 class="modal-title" id="myModalLabel">Model Title</h3>
            </div>
            <div class="modal-body">
                <p>
                    <img alt="loading" src="resources/img/ajax-loader.gif">
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </div>
</div>

原文由 Zeeshan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

发现问题： 他们已经删除了引导程序 4 中的远程选项

remote ：此选项自 v3.3.0 起已弃用，并将在 v4 中删除。我们建议改为使用客户端模板或数据绑定框架，或者自己调用 jQuery.load。

我使用 JQuery 来实现这个移除的功能。

 $('body').on('click', '[data-toggle="modal"]', function(){
        $($(this).data("target")+' .modal-body').load($(this).data("remote"));
    });

原文由 Zeeshan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 Asp.NET MVC 中，这对我有用

html

 <a href="#" onclick="Edit(1)">Edit item</a>
<div class="modal" id="modalPartialView" />

jQuery

 <script type="text/javascript">
        function Edit(id)
        {
            $.ajax({
                url: "@Url.Action("ActionName","ControllerName")",
                type: 'GET',
                cache: false,
                data: {id: id},
            }).done(function(result){
                $('#modalPartialView').html(result)
                $('#modalPartialView').modal('show') //part of bootstrap.min.js
            });
        }
<script>

行动

public PartialViewResult ActionName(int id)
{
   // var model = ...
   return PartialView("_Modal", model);
}

原文由 Muflix 发布，翻译遵循 CC BY-SA 4.0 许可协议