ASP.Net MVC 6 #5

Table of contents

Last updated 2 February 2016.

Using client-side libraries

Bower is a "package manager for the web". You can think of it as the equivalent of NuGet Package Manager, only for the client-side. It will automatically resolve dependencies, so if you install package X, which depends on package Y, it will also install the latter as well. Bower is the recommended tool for managing client-side libraries in ASP.Net, and full support is built-in. Let's enable Bower, and at the same time have it install the Bootstrap library into the project.

Enabling Bower is as simple as adding a json configuration file to the project. So, right-click the project icon in Solution Expolorer and go Add > New Item.... In the pop-up dialog, select "Bower configuration file":

Add a line in the dependencies section to bring in Bootstrap:

Bower.json

1:
2:
3:
4:
5:
6:
7:

    {
        "name": "ASP.NET",
        "private": true,
        "dependencies": {
            "bootstrap": "3.3.6"
        }
    }

As soon as you save the file, the machinery starts working, and you get Bootstrap and jQuery installed. This is reported in the Visual Studio output pane:

    PATH=.\node_modules\.bin;C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External;%PATH%;C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\git
    "C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\Bower.cmd" install --force-latest
    bower bootstrap#3.3.6       not-cached git://github.com/twbs/bootstrap.git#3.3.6
    bower bootstrap#3.3.6          resolve git://github.com/twbs/bootstrap.git#3.3.6
    bower bootstrap#3.3.6         download https://github.com/twbs/bootstrap/archive/v3.3.6.tar.gz
    bower bootstrap#3.3.6          extract archive.tar.gz
    bower bootstrap#3.3.6         resolved git://github.com/twbs/bootstrap.git#3.3.6
    bower jquery#1.9.1 - 2      not-cached git://github.com/jquery/jquery-dist.git#1.9.1 - 2
    bower jquery#1.9.1 - 2         resolve git://github.com/jquery/jquery-dist.git#1.9.1 - 2
    bower jquery#1.9.1 - 2        download https://github.com/jquery/jquery-dist/archive/2.2.0.tar.gz
    bower jquery#1.9.1 - 2         extract archive.tar.gz
    bower jquery#1.9.1 - 2        resolved git://github.com/jquery/jquery-dist.git#2.2.0
    bower bootstrap#3.3.6          install bootstrap#3.3.6
    bower jquery#1.9.1 - 2         install jquery#2.2.0
    bootstrap#3.3.6 wwwroot\lib\bootstrap
    └── jquery#2.2.0
    jquery#2.2.0 wwwroot\lib\jquery

Now, a slew of directories and files have been added to the wwwroot node of the project. The project should now include bootstrap and jQuery directories in two locations: Dependencies/Bower and wwwroot/lib In addition, there is a new Manage Bower Packages menu item in the project pop-up menu. That manager lets you uninstall and update packages installed with Bower and there is also a Browser pane where you can search for other fancy libraries to bring in to the project. There is even intellisense available when editing the bower.json file by hand, giving a helping hand with finding relevant packages for the project.

Next, let's see if we can actually use that bootstrap library. Open the Views/Home/Index.cshtml file and add references for bootstrap.css and bootstrap.js files:

Views/Home/Index.cshtml

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:

    @*    View for the Home/Index action   *@
    @using MVCTutorial.Models
    @model Contact[]

    <!doctype html>
    <html>
    <head>
        <title>@ViewBag.Title</title>
        <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    </head>
    <body>
        <h1>Hello from HomeController.Index !</h1>
        <h2>Contacts:</h2>
        <ul>
            @foreach (Contact contact in Model) {
                <li>@contact.Name: @contact.Email</li>
            }
        </ul>
        @Html.ActionLink("Create Contact", "Index", "Contact")
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    </body>
    </html>

There is one more thing to do before this will work. Until now, we haven't had a need to request static files from this web application. If you were to request a static file, such as one of the bootstrap files, you'd get a HTTP 404 error, claiming the resource doesn't exist. It does exist, but ASP.Net is configured by default to disallow the request of static files. Luckily, that is easily changed by adding this one-liner in the Configure method of the Startup class:

Startup.cs (partial)

            ......            
            app.UseIISPlatformHandler();

            app.UseStaticFiles();

            app.UseMvc(routes =>
            ......

When you add that line you'll see a red wawy underlining, signaling something is wrong:

UseStaticFiles extension method not found

The UseStaticFiles method is defined in a package which hasn't been added. Click on the bar reading "Add package Microsoft.AspNet.StaticFiles...." and Nuget gets and installs that package. At last, the application can be run to check if there is any notable difference:

Now, the text has an updated, nicer look thanks to the bootstrap library.

< Previous chapter Next : The architecture of an ASP.Net MVC application >

2016 by Niels Hede Pedersen