How to Reference Bootstrap-Colorpicker in ASP Net 5 View

Question

I'm working through the ASP.NET MVC 6 tutorials and getting used to the framework. I have a requirement to add a color picker to one of my views. Since the HTML5 type 'color' isn't supported on IE I can't use that.

Instead I thought I'd use the bootstrap-colorpicker plugin here: http://mjolnic.com/bootstrap-colorpicker/.

I've installed the package via NPM but can't work out how to reference it in the View. Should the package be installing files in the wwwroot\libs folder? Or do I need to copy these in manually and reference in the @section Scripts?

I've also installed it using NuGet PM and it appears under References but I'm in the same boat wondering how to reference it in the actual View.

Where from? I can't see the file anywhere in the `wwwroot`. My source files have a 'node_modules' folder (which contains the colorpicker) but I can't see how this is accessed in Visual Studio. — jidl, Mar 07 '16 at 12:28
Check [this blog post](http://www.mikesdotnetting.com/article/283/asp-net-5-managing-client-side-dependencies-with-npm-bower-and-gulp), hopefully it will help you to find your installed package. — Michael, Mar 07 '16 at 12:33
is there any folder created inside `www\lib` after you have added those libraries. — Amit Kumar, Mar 07 '16 at 12:36
No there isn't - But following the blog @Michael suggested I can view all files and see the node_modules in the solution explorer. I can then drag a link onto the View resulting in: ``. — jidl, Mar 07 '16 at 12:42

score 0 · Answer 1 · edited May 23 '17 at 12:23

The installation with NuGet PM creates following folder structure:

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

So you have to add following lines to 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"))

Then reference the bundles in the Razor view:

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

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

BTW: The additional "bootstrap-colorpicker" folder for the style bundle is necessary for the optimizer. Otherwise you get a 404 (see here, here and here).

How to Reference Bootstrap-Colorpicker in ASP Net 5 View

1 Answers1