{"id":1,"date":"2015-07-14T22:21:28","date_gmt":"2015-07-14T22:21:28","guid":{"rendered":"http:\/\/pfool.com\/blog\/?p=1"},"modified":"2016-08-24T20:02:51","modified_gmt":"2016-08-24T20:02:51","slug":"ace-template-mvc-5","status":"publish","type":"post","link":"https:\/\/pfool.com\/blog\/2015\/07\/14\/ace-template-mvc-5\/","title":{"rendered":"Integrating a Bootstrap template into an MVC 5 Application"},"content":{"rendered":"

I purchased the Ace Admin template<\/b> from wrapbootstrap.com<\/a> and wanted to use it in an MVC 5 web application developed in Visual Studio. This article explains how I did that. Just for reference, the Ace Admin template is no longer available from wrapbootstrap but the process described here should be similar for any 3rd party Bootstrap template.<\/p>\n

\n

The standard MVC 5 application template that is delivered with Visual Studio 2013 makes use of Bootstrap 3 to provide a responsive web application. The default installation of Bootstrap puts the CSS files in the Content<\/b> folder and the javascript files in the Scripts <\/b>folder.<\/p>\n

\"MVC<\/a>
Visual Studio MVC 5 file layout<\/figcaption><\/figure>\n

As delivered, the Ace Admin template has a directory named assets <\/b>which contains additional folders which contain the various resource files.<\/p>\n

\"Ace<\/a>
Ace Admin file layout<\/figcaption><\/figure>\n

In order to integrate this into the VS 2013 MVC app, I created folders with those same names in Solution Explorer. I created the js<\/b> directory under the Scripts<\/b> folder in Solution Explorer and created all of the others (avatars<\/b>, css<\/b>, font<\/b>, etc.) under the Content<\/b> folder in Solution Explorer. By doing this, there will be no conflict of files with the same name between what is in the default MVC application and what is provided in the Ace Admin template files (such as bootstrap.css<\/b> and bootstrap.js<\/b>). By separating the files in this manner, it will make it easier to update either the Bootstrap package provided through NuGet within Visual Studio or any updates to the Ace Admin template. When creating Script bundles or Style bundles within the BundleConfig.cs file of the project, I set references to bootstrap.cs and bootstrap.js to point to the files that are in the VS NuGet package rather than the files in the Ace directories. By doing this, the project will use the latest Bootstrap version that has been installed via NuGet from within VS. The documentation for Ace Admin template states that it is compatible with Bootstrap 3.3.x. Version 1.3.3 of the Ace Admin template is delivered with files for Bootstrap 3.3.1. The latest version of Bootstrap available via NuGet is 3.3.4 at this point in time.<\/p>\n

\"Use<\/a>
Use Bootstrap files from NuGet package<\/figcaption><\/figure>\n

This all worked fine in Debug mode because the files were not actually being bundled or minified.
\nHere is the network traffic info (gotten from IE F12 Developer Tools):<\/p>\n

\"Network<\/a>
Network traffic<\/figcaption><\/figure>\n

I then forced bundling to occur by putting the following statement in the BundleConfig.cs (this could be done through the web.config as well):<\/p>\n

BundleTable.EnableOptimizations = true;<\/p>\n

Running the application, it looked awful. It looked like there wasn’t any CSS being applied to the page. Here’s how the network traffic looked:<\/p>\n

\"Initial<\/a><\/p>\n

The CSS files were not getting transferred which is why the web page looked so bad.<\/p>\n

After some research, I discovered that I could not use ~\/Content\/css as a virtual path for the bundle because I had an actual physical path that existed for that same location. So I tried changing the virtual bundle path to ~\/Content\/css2.<\/p>\n

Running the application, everything looked right again on the page so I was obviously getting the CSS files. However, looking at the network traffic showed another problem was occurring.<\/p>\n

\"Files<\/a><\/p>\n

Some of the font related files used in the Ace Admin template were not being found. The reason for this was that there was a relative path being specified in the @font-face definition in the CSS file. Changing the relative path in the CSS from ..\/fonts to ..\/Contents\/fonts would make it work when bundling was turned on. However, when bundling was turned off, once again the files would not be found. The real problem was that the virtual path for the bundle and the path for the CSS file were at different levels of the application directory structure. I was able to solve this issue by creating the virtual path of the bundle to be at the same relative position in the application directory structure as the CSS file.<\/p>\n

\"Resolve<\/a><\/p>\n

This works for both bundled and unbundled delivery of the CSS\/script files.<\/p>\n

For more info on bundling and minification see the following article:
\n
\nhttp:\/\/www.asp.net\/mvc\/overview\/performance\/bundling-and-minification<\/a><\/p>\n

Hopefully, this gives you enough information to be on your way with integrating a Bootstrap theme into your own MVC 5 project in Visual Studio.<\/p>\n","protected":false},"excerpt":{"rendered":"

I purchased the Ace Admin template from wrapbootstrap.com and wanted to use it in an MVC 5 web application developed in Visual Studio. This article …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[3],"class_list":["post-1","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-wrapbootstrap"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pfool.com\/blog\/wp-json\/wp\/v2\/posts\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pfool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pfool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pfool.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pfool.com\/blog\/wp-json\/wp\/v2\/comments?post=1"}],"version-history":[{"count":2,"href":"https:\/\/pfool.com\/blog\/wp-json\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":44,"href":"https:\/\/pfool.com\/blog\/wp-json\/wp\/v2\/posts\/1\/revisions\/44"}],"wp:attachment":[{"href":"https:\/\/pfool.com\/blog\/wp-json\/wp\/v2\/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pfool.com\/blog\/wp-json\/wp\/v2\/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pfool.com\/blog\/wp-json\/wp\/v2\/tags?post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}