ASP.NET Core - HTML 代码块重用答案

【问题标题】：ASP.NET Core - HTML code block reuseASP.NET Core - HTML 代码块重用
【发布时间】：2017-08-01 18:13:14
【问题描述】：

我正在使用 Bootstrap 4 开发一个 ASP.NET Core 项目，并且我有一些想要在多个视图中显示的 Bootstrap 模态。

这些 Modals 有一些用于内部元素的 Javascript 函数，例如按钮和输入。

在多个视图中加载这些 Modal（及其 Javascript）的正确方法是什么？

我想我会使用 PartialViews，但我不知道将 Javascript 代码放在哪里（我知道将它放在 PartialViews 中是一种不好的做法）。

【问题讨论】：

标签： javascript html asp.net asp.net-core bootstrap-modal

【解决方案1】：

创建一个单独的 JS 文件，并在使用该局部视图的每个页面底部引用它，这样脚本就不会阻塞页面渲染。

或者，您可以创建一个包含模态 HTML 和 JS 的布局文件，并让您的视图继承自此。尽管由于组合优于继承的原则，我建议不要使用这种方法。

【讨论】：

【解决方案2】：

Tag helpers 可能会更好地用于此，这里是一个引导模式标签帮助器的示例ModalTagHelper

如果你把它放在你的 _ViewImports 文件中：

@using AssemblyNameWithTagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper "*, AssemblyNameWithTagHelpers"

你可以像这样使用标签助手：

<modal id="simpleModalFromAnchor" title="Modal Title">
    <modal-body>
        <h4>Something happened</h4>
        <p>Something happened</p>
    </modal-body>
</modal>

使用 javascript，将其放在单独的 js 文件中，并从您使用模态的每个页面中引用它，更好的是，将其与其他常用组件捆绑在一起，并将其包含在 _Layout 文件的底部

【讨论】：