Asp.net mvc MVC部分视图到引导模式注入-解决方案复杂

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

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

_布局

更新-这里是_部分

。。。这样做会使class=modal-link的任何链接自动将其结果注入到modal

看起来非常简单和优雅，但只有一个问题：他指定的数据目标是。真正地为什么？内容应该被注入网络，不是吗？但几乎每个人都没有问题，也没有人提到这个难题。对我来说，解决方案完全按照他告诉它的那样，它注入，从而覆盖了我的模态体，等等。这些都是我局部视图的内容，所以显示混乱-窗口的全宽和透明，因为它不进入模态内容

我是不是遗漏了什么

更新

---

下面斯托姆的一个答案是正确的，我已经做了标记。然而，正如我在上面的更新中所显示的，我实际上已经在_布局中有了，在_部分中有了，主体和页脚。最终，在这个问题持续了几天之后，我今天醒来，它才开始工作，没有任何变化！认真地令人沮丧的。以前的问题是，数据切换导致它实际注入模态容器，而不是.modal内容。但是现在它开始像Stom文档所说的那样工作，即即使您将数据切换设置为模式容器，引导程序也应该将其注入到.modal内容中。为什么以前没有发生过，但现在，我一点也不迷茫。我没有在一夜之间升级过任何版本。重影问题--

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

行动方法

索引视图

_示例局部视图

脚本：

内容应该注入到， 不是吗

在版本3.1之前，它应该被注入模态的根元素，即模态容器，但在版本3.1上它已经改变了。现在bootstrap说它将被注入模态内容

模态内容与我的模态体等 我的部分视图的内容，所以显示混乱，为什么

因为局部视图应该包含模态体而不是模态内容。 另外，在模型根元素中添加模态对话框可以解决syling问题

因此，下面的设置应该适合您：

行动方法

索引视图

_示例局部视图

注:

此选项自v3.3.0以来已被弃用，并已在v4中删除

参考：

---

您使用的是最新版本的bootstrap吗？是的-3.3.7…感谢您抽出时间，但我认为您没有抓住本文和我文章的重点。您刚刚使用了一个ajax调用并将其放入modal body div中。哦，我明白了，这是一个很好的共享。我在帖子中回答了另一个问题，因为这可能会帮助别人。但请记住，这比另一个更具控制力，因为如果ajax请求失败，您可以向用户显示错误详细信息，因为您的局部视图应该包含模态体而不是模态内容。另外，在模型根元素中添加模态对话框也解决了syling问题。-实际上，我的局部视图已经包含了模态页眉、模态正文和模态页脚，完全符合您的示例。我已经有了模态对话框div。对不起，我没有展示我只是想展示作者展示的东西。奇怪的是，没有任何改变，我今天醒来，这个问题就不再发生了。它工作得很好！啊！！我正在将您的答案标记为正确，但我认为您应该更新它。您好，我正在尝试实现完全相同的代码，但href没有得到执行。我认为模板中的某些内容会阻止它，有什么想法吗？@JeanJimenez，如果您使用的是URLAction，请尝试使用原始url，或者粘贴代码或提出新问题。

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

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

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>

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

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>

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