如何在 ASP Net 5 视图中引用 Bootstrap-Colorpicker答案

【问题标题】：How to Reference Bootstrap-Colorpicker in ASP Net 5 View如何在 ASP Net 5 视图中引用 Bootstrap-Colorpicker
【发布时间】：2016-06-20 23:38:41
【问题描述】：

我正在学习 ASP.NET MVC 6 教程并熟悉该框架。我需要在我的一个视图中添加一个颜色选择器。由于 IE 不支持 HTML5 类型“颜色”，我无法使用它。

我想我会在这里使用 bootstrap-colorpicker 插件：http://mjolnic.com/bootstrap-colorpicker/。

我已通过 NPM 安装了该软件包，但不知道如何在 View 中引用它。该软件包是否应该在wwwroot\libs 文件夹中安装文件？还是我需要手动复制这些并在@section Scripts 中引用？

我还使用 NuGet PM 安装了它，它出现在 References 下，但我在同一条船上想知道如何在实际的 View 中引用它。

【问题讨论】：

将js 和css 文件拖到您的视图中。
从哪里来？我在wwwroot 的任何地方都看不到该文件。我的源文件有一个“node_modules”文件夹（其中包含颜色选择器），但我看不到在 Visual Studio 中如何访问它。
检查this blog post，希望它能帮助你找到你安装的包。
添加这些库后，www\lib 中是否创建了任何文件夹。
不，没有 - 但是按照博客@Michael 的建议，我可以查看所有文件并在解决方案资源管理器中查看 node_modules。然后我可以将一个链接拖到视图上，结果是：<script src="~/node_modules/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js"></script>。

标签： jquery asp.net-mvc

【解决方案1】：

使用 NuGet PM 安装会创建以下文件夹结构：

/Content
    /bootstrap-colorpicker
        /css
            /bootstrap-colorpicker.css
        /img
            /*.png
/Scripts
    /bootstrap-colorpicker.js

所以你必须在 BundleConfig 中添加以下几行：

bundles.Add(New ScriptBundle("~/bundles/colorscripts").Include(
    "~/Scripts/bootstrap-colorpicker.js")
bundles.Add(New StyleBundle("~/Content/bootstrap-colorpicker/bootstrap-colorpicker/colorstyle").Include(
    "~/Content/bootstrap-colorpicker/css/bootstrap-colorpicker.css"))

然后在 Razor 视图中引用包：

@section SiteCSS
    @Styles.Render("~/Content/bootstrap-colorpicker/bootstrap-colorpicker/colorstyle")
End Section

@section Scripts
    @Scripts.Render("~/bundles/colorscripts")
End Section

顺便说一句：样式包的附加“bootstrap-colorpicker”文件夹对于优化器是必需的。否则你会得到一个 404（见here、here 和here）。

【讨论】：