部分视图中引导模式的 DOM 放置答案

【问题标题】：DOM placement of Bootstrap modals in Partial Views部分视图中引导模式的 DOM 放置
【发布时间】：2016-04-03 16:41:55
【问题描述】：

我有一个触发模式的按钮元素。这段代码是可重用的，并且需要出现在许多不同的视图中。

<button class="btn btn-default" type="button" data-toggle="modal" data-target="#modalAcctToggle">
    Toggle Accounts
</button>

<div id="modalAcctToggle" tabindex="-1" class="modal fade">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">Available Accounts</h4>
            </div>
            <div class="modal-body">
                [contents not relevant]
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

非常简单明了。将所有内容放在局部视图中，并根据需要使用 @Html.Partial("_accountToggler") 进行渲染

但是，Bootstrap 文档鼓励将模态框放在页面之外：

http://getbootstrap.com/javascript/#modals

模态标记放置 始终尝试将模态的 HTML 代码放置在文档的顶级位置以避免其他组件影响模态框的外观和/或功能。

我的直接想法是为此使用 Razor 部分。

<button data-target="#modalAcctToggle" etc... />
@section modals {
    <div id="modalAcctToggle" etc... />
}

将所有模态框包装在一个部分中，然后在 Layout 中使用 @RenderSection("modals")，模态框将在 DOM 中的安全位置发出。

很遗憾，Razor 部分在局部视图中不起作用！这显然是设计使然，但它旨在限制在部分中使用脚本。

我从试图解决部分中缺少部分的人们那里发现了许多其他问题，但他们专注于处理脚本。在那里找到的解决方案基本上包括滚动您自己的等效于 Razor 部分，或者专门用于处理脚本（如捆绑）。当我的使用不是所述限制的目标时，必须努力重新发明 Razor 部分以绕过故意限制，这似乎很可笑。

我怎样才能最好地处理将模态 HTML 放到不同的位置？

更新：正如 cmets 关于答案所讨论的，这个问题基于两个基本的误解。

1) Bootstrap modal 可以毫无问题地位于 HTML 的其余部分中。你只需要小心防止它继承任何不应该继承的 CSS。

2) 部分不是累积的。因此，即使我可以在局部视图中使用部分，它也不会按照我想要的方式工作。使用同一部分的多个部分会相互覆盖。这可能是根据设计，部分不能以局部形式工作的真正原因。

【问题讨论】：

标签： asp.net-mvc twitter-bootstrap-3 asp.net-mvc-partialview

【解决方案1】：

TL;DR; 这里的关键点是在 layout 视图中定义部分；它们大致相当于您在 WebForms 项目中找到的 ContentPlaceholder 控件。然后在通常对应于您的各种操作的“完整”视图中使用它们。如果你还没有读过，我想说Scott Gu's intro to sections 有一个很好的解释。

如果我们假设你有这个局部视图，我会称之为_Modal.cshtml：

<button class="btn btn-default" type="button" data-toggle="modal" data-target="#modalAcctToggle">
    Toggle Accounts
</button>

<div id="modalAcctToggle" tabindex="-1" class="modal fade">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">Available Accounts</h4>
            </div>
            <div class="modal-body">
                [contents not relevant]
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

你的布局类似于

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    @RenderSection("modals", required: false)

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")

    @RenderSection("scripts", required: false)
</body>
</html>

你可以在Index.cshtml

中做这样的事情

@section modals
{
    @Html.Partial("_Modal")
}

它会在正确的位置发出正确的标记。然后，您需要将任何交互逻辑直接放在父视图中，或者使用scripts 部分（在父视图中）。

【讨论】：

这具有将整个局部视图放入该部分的效果。我的目标是让按钮在我放置@Html.Partial() 的位置呈现，而模态 div 使用部分呈现在布局中的其他位置。
好的，我知道我误解了部分，现在我明白为什么它们不允许来自部分。我的严重误解是认为部分是累积的。直到我读了你的帖子我才明白，因为我看到它们很少使用。正如您所演示的那样，我可能仍然可以使用部分和部分来实现我所需要的，但我需要将每个模态分解成它自己的部分才能做到这一点。就像：@Html.Partial("_accountToggler") @section modals { @Html.Partial("_accountTogglerModal") }
您可以将模态标记放在部分中，然后在父视图中使用触发按钮（我想您在上一条评论中已经知道了）。如果你真的担心你的 CSS 会影响你的模态，你总是可以使用像 Bootbox.js 这样的东西，它会为它的各种 Bootstrap 模态动态生成标记。
其实我原本以为布局的重要性是为了剧本的考虑。从那以后我发现（正如你所说）它实际上只是一个 CSS 东西——不希望你的模态继承它不应该继承的东西。这实际上消除了我做任何事情的需要。 CSS 继承很容易观察和解决，所以我的模态框可以留在原处！