MVC局部视图到Bootstrap模态注入 - 解决方案困惑

Question

我在CodeProject上采用了一个很好的解决方案，用于将部分视图注入到引导模态中，而不需要显式的ajax调用...

https://www.codeproject.com/Tips/826002/Bootstrap-Modal-Dialog-Loading-Content-from-MVC-Pa

简而言之，作者这样做了（更新：我添加了模态对话框，作者不会这样做但需要）：

_布局

<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
       <div class="modal-content"></div>
   </div>
</div>
<script>
    $('body').on('click', '.modal-link', function (e) {
        e.preventDefault();
        $(this).attr('data-target', '#modal-container');
        $(this).attr('data-toggle', 'modal');
    });
</script>

更新 - 这是_Partial

<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>

...并通过这样做使得任何与class =“modal-link”的链接自动将其结果注入模态。

看起来简单而优雅，但只有一个问题：他指定的数据目标是<div id="modal-container">。真？为什么？内容应注入<div class="modal-content">，不应该吗？但几乎每个人都没有问题，没有人提到这个难题。对我来说，解决方案正是他告诉它的，它注入到<div id="modal-container">，从而用我的模态体等覆盖<div class="modal-content">，这是我的局部视图的内容，所以显示器搞砸了 - 全宽度的窗口和透明，因为它不会进入模态内容。

我在这里错过了什么吗？

---

更新以下Stom的答案中的一个是正确的（我已经标记过了）。但是，正如我在上面的更新中所示，我实际上已经在_Layout中使用了<div class="modal-dialog" role="document">，并且在_Partial中使用了<div class="modal-header">，body和footer。最终，在这个问题持续了好几天后，我今天醒了，它刚刚开始工作，没有任何变化！真的吗？令人沮丧。之前的问题是数据切换导致它实际注入#modal-container而不是.modal-content。但现在它开始起作用，Stom说文档说，即使你将数据切换设置为#modal-container，Bootstrap应该将它注入.modal-content。为什么以前没有发生但是现在，我没有最模糊的。我没有在一夜之间升级版本或任何东西。鬼问题---

Answer 1

内容应注入，不应该吗？

在version 3.1之前它应该注入模态的根元素，即你的modal-container但是在version 3.1它已经改变了。而现在引导docs说它将注入modal-content。

模态内容与我的模态体等等是我的局部视图的内容，所以显示器搞砸了，为什么？

因为你的局部视图应该包含modal-body而不是modal-content。在模型根元素中添加modal-dialog也解决了syling问题。

所以下面的设置应该适合你：

行动方法

public ActionResult Index()
{

return View();
}




public ActionResult GetPartialData()
{
    return PartialView("_ExamplePartial");
}

索引视图

<!-- Button trigger modal -->
<a data-toggle="modal" href="@Url.Action("GetPartialData","Home")" data-target="#myModal">Click me</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

        </div>
    </div>
</div>

_ExamplePartial View

<div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<div class="modal-body">

  <h1>Remote Partial Content</h1>

</div>

<div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
</div>

注意：

此选项自v3.3.0起已弃用，并已在v4中删除。

参考：

1. 2.

Answer 2

下面的安装程序应该可以将部分视图内容注入到模态体中，并且它不会破坏您的默认引导模式样式。

行动方法

public ActionResult Index()
{

 return View();
}


public PartialViewResult GetSomeData()
{
   System.Threading.Thread.Sleep(2000); // Just to show delay to Get data

   ViewBag.Message = "Example Data from Server"; //Using ViewBag Just for example, use ViewModel Instead

   return PartialView("~/Views/Shared/_ExamplePartial.cshtml");
}

索引视图

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" id="btnGetData">
    Get Modal With Partial
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="partialViewContent">

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

_ExamplePartial View

<h2>Partial View Contents</h2>


 <h3>@ViewBag.Message</h3>


<p>Some More Static Content</p>

脚本：

 <script>

    $(document).ready(function () {

        $('#btnGetData').click(function () {


            var requestUrl = '@Url.Action("GetSomeData", "Home")';

            $.get(requestUrl)

            .done(function (responsedata) {

                console.log("success");

                $("#partialViewContent").html(responsedata);

                $('#myModal').modal('show')

            })
            .fail(function () {
                alert("error");
            })
            .always(function () {
                console.log("finished");
            });

        })

        });


    </script>