MVC partial view to Bootstrap modal injection - solution perplexing 解决方案

Question

我在 CodeProject 上遵循了一个很棒的小解决方案，用于将部分视图注入 bootstrap 模态，而无需显式 ajax 调用...

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

简而言之，作者是这样做的（更新：我已经添加了模态对话框，作者没有这样做但是是必需的）：

_Layout

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

... 这样做会使 link 与 class="modal-link" 自动将其结果注入模态。

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

我是不是遗漏了什么？

更新以下 Stom 的回答之一是正确的（我已将其标记）。但是，正如我在上面的更新中所示，我实际上已经在 _Layout 中拥有 <div class="modal-dialog" role="document">，在 _Partial 中拥有 <div class="modal-header">、正文和页脚。最终，在这个问题持续了好几天之后，我今天醒来，它刚刚开始工作，没有任何变化！严重地？令人沮丧。之前的问题是数据切换导致它实际注入#modal-container，而不是.modal-content。但是现在它开始像 Stom 所说的文档所说那样运行，即即使您将数据切换设置为#modal-container，Bootstrap 也应该将其注入.modal-content。为什么以前没有发生但现在发生了，我还没有最迷雾。我没有在一夜之间升级版本或其他任何东西。幽灵问题---

Answer 1

下面的设置应该可以将部分视图内容注入模态主体，并且不会与您的默认 bootstrap 模态样式混淆。

操作方法

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>

Answer 2

The content should be injected into the , shouldn't it?

在 version 3.1 之前，它应该被注入模式的根元素，即你的 modal-container 但是在 version 3.1 它已经改变了。现在 bootstrap docs 表示它将被注入 modal-content.

modal-content with my modal-body, etc. that are the contents of my partial view, so the display is messed up , Why?

因为您的部分视图应包含 modal-body 而不是 modal-content。还在模型根元素中添加 modal-dialog 解决了符号问题。

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

操作方法

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 中删除。

参考：

2.

MVC partial view to Bootstrap modal injection - solution perplexing 解决方案

MVC partial view to Bootstrap modal injection - solution perplexing

asp.net-mvc

partial-views

bootstrap-modal