2016-03-07 2 views
0

Я работаю над учебниками ASP.NET MVC 6 и привыкаю к ​​фреймворку. У меня есть требование добавить элемент выбора цвета к одному из моих представлений. Поскольку тип HTML5 «цвет» не поддерживается в IE, я не могу его использовать.Как связать Bootstrap-Colorpicker в ASP Net 5 View

Вместо этого я решил использовать bootstrap-colorpicker плагин здесь: http://mjolnic.com/bootstrap-colorpicker/.

Я установил пакет через NPM, но не могу решить, как ссылаться на него в View. Должен ли пакет устанавливать файлы в папке wwwroot\libs? Или мне нужно скопировать их вручную и ссылку в @section Scripts?

Я также установил его с помощью NuGet PM, и он отображается под References, но я нахожусь в той же лодке, размышляя, как ссылаться на нее в фактическом View.

+0

перетащите файлы 'js' и' css' на ваш просмотр. –

+0

Откуда? Я не вижу файл где-либо в 'wwwroot'. Мои исходные файлы имеют папку «node_modules» (которая содержит colorpicker), но я не вижу, как это делается в Visual Studio. – jidl

+0

Проверьте [это сообщение в блоге] (http://www.mikesdotnetting.com/article/283/asp-net-5-managing-client-side-dependencies-with-npm-bower-and-gulp), надеюсь, это будет поможет вам найти установленный пакет. – Michael

ответ

0

Установка с 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 

BTW: Дополнительная папка «bootstrap-colorpicker» для набора стилей необходимый для оптимизатора. В противном случае вы получите 404 (см. here, here и here).

Смежные вопросы