ASP.NET MVC - Installing AdminLTE dashboard to replace Bootstrap template

visual studio asp.net mvc project using adminlte template-thumb

When creating a new ASP.NET MVC project in Visual Studio, the project will use a Bootstrap front-end framework by default. But there are more sophisticated templates with the extended functionality available. I wanted to use one of those instead of the one provided by Visual Studio. I discovered AdminLTE, a dashboard & control panel theme built on top of the Bootstrap 3.0. This article will show you how I replaced the default Bootstrap framework with the AdminLTE template in an ASP.NET MVC project.

Let’s first create an ASP.NET MVC Project using Visual Studio:

  • Go to File > New > Project
  • Under Visual C# Templates, select ASP.NET Web Application (.NET Framework)
  • Give it a name and click OK.
  • Next, we need to select which type of ASP.NET 4.5.2 Templates to use. Select MVC and Click OK.

The default ASP.NET MVC project looks like this:

Visual Studio Default MVC project website

Click to Enlarge

Now that the project has been created, let’s add an AdminLTE template inside this project. The end result will look something like this:

Visual Studio MVC Project Website with AdminLTE template home page

Click to Enlarge

1.) Install AdminLTE from NuGet

First, we will install AdminLTE template using NuGet packet manager.

The steps are as follows:

  • In "Solution Explorer", right-click on the project and select “Manage NuGet Packages”:Visual Studio MVC application - add NuGet package
  • A NuGet Packet Manager window will open. Select Browse on the top left corner and type adminlte in the search field:

    Visual Studio MVC application - NuGet installation of AdminLTE package

    Click to Enlarge

  • Select the AdminLTE by almsaeedstudio. It should be the first item in the list and click on Install button located on the right side.
  • The Preview window might appear showing you which packages will be installed and which updated. The AdminLTE package will replace the existing "bootstrap 3.0.0" and "jQuery 1.10.2" with the newer versions. Additionally, it will install font-awesome package. Click OK to continue.

After installation, the package will create admin-lte folder inside the project containing the AdminLTE CSS styles, different skins and JavaScript files, but nothing else. There won’t be any changes to the layout, also the plugins will be missing. So in the next step, we will download the AdminLTE template to get those missing parts.

2.) Download AdminLTE template

We will use the AdminLTE starter page to replace the content of the _Layout.cshtml file, which is used as a Layout for the project. This starter page is a good starting point from which we can add additional functionality as needed.

Go to https://adminlte.io/ and download the AdminLTE Control Panel Template.

Extract the files somewhere in your computer. Find the starter page starter.html and open it in Visual Studio or your favorite text editor.

3.) Replace the content of _Layout.cshtml

The _Layout.cshtml file is a Layout View located at Views > Shared > _Layout.cshtml. It is similar to the ASP.NET master page. With the layout view, we make sure, that we will have a consistent look across our web site. Check this article, if you want to learn more about layout in ASP.NET MVC.

Remove everything from _Layout.cshtml and replace it with the content of Starter.html. But inside _Layout.cshtml, there were a few lines of Razor code we still need and few additional lines of code, we want to add in our new layout. Let's do that now.

In the <head> tag

  • Find:

    Remove it and replace it with:

    The first line references the Bootstrap style. We will also make sure in step 4, that it references the AdminLTE styles and skins. We will examine how @Styles.Render and @Scripts.Render work a little bit later. For now, let's continue with replacing the necessary lines.
  • Find:

    Also find:

    Since the AdminLTE styles will be referenced using @Styles.Render("~/Content/css"), we don't need the above two lines, so remove them.

Inside the <body> tag

  • We also need to add menu navigation links from the default ASP.NET MVC project. Find:

    And replace it with:

    Note: In the above example, the Home link will always be the active link due to hard-coded <li class="active">. Check this StackOverflow page for various solutions to this problem.
  • Find:

    Inside this <section> tag, add this:

    The @RenderBody() renders the content of the page, that is not in the named section. Named sections are those parts of the page wrapped with @Section { ... }, so everything else not wrapped with the named section will be rendered by @RenderBody(). Check this MSDN page and in particular Figure 1 of the Razor Layout Pages Structure to get a better idea on how the layout is structured using Razor.

Before the ending </body> tag

  • Find:

    Replace those lines with:

Lines 1,2 and 4 are from the default ASP.NET MVC template. Lines 1 and 2 reference the jQuery and Bootstrap JavaScript files inside the MVC project. Line 3 (highlighted) shows the line that has been additionally added to reference the admin-lte.js script and any other script files for plugins that the template will use. We will define path to those specific files in step 4.

In line 4, the @RenderSection renders the section of the page named scripts if it exists. This can become handy, if we have a plugin that is only used in specific page. For example, if we want to have a slider plugin on a home page, it is not very efficient to have slider script on every page. In this case, we would add a named section scripts in index.cshtmlpage that references this script:

About Styles.Render and Scripts.Render methods

Now a few words about @Styles.Render and @Scripts.Render. They are used to render bundles of scripts and styles defined in App_Start > BundleConfig.cs file. Bundling has been added in ASP.NET 4.5. With this feature, we can bundle multiple script / style files into a single file and also minify them. All this improves the load time of the website. To learn more, check this MSDN page.

Now, let's define which files to include in those bundles.

4.) Add AdminLTE scripts and styles to bundles

In Solution Explorer, go to App_Start > BundleConfig.cs. Inside it, we find bundles already added by Visual Studio for jQuery, Modernizer and Bootstrap.

First, let’s add a new bundle that will contain AdminLTE script and any other scripts needed for our template. Inside the RegisterBundles() method, add the following code:

For the AdminLTE styles, let's add them in an already existing bundle.
Find:

Inside that bundle, add the styles for AdminLTE.css and skin-blue.css, so that the end result is:

We didn’t reference the minimized versions of (app.min.js, AdminLTE.min.css, skin-blue.min.css) since the bundling will already create the optimization for us.

Note: There are other skins available besides the skin-blue.css. For full list, open Solution Explorer and expand the admin-lte/css/skins folder. When changing the skin, we also need to change the class name inside <body> tag.

Adding plugin's scripts and styles to bundles

Next, let’s also reference scripts and styles for the plugins. What files we include depends on the plugins we will be using. We discuss the plugins in more detail in the next step. For now, just add a single script for fastclick.js library. It is recommended by AdminLTE to enhance the user experience using mobile browsers.
Find:

We simply add the path to the fastclick.js file, like so:

The plugins folder has not been added yet, we will do that in the next section.

About site.css

Before we focus on the plugins, lets quickly focus on site.css. It is located at Content > site.css. It has CSS rules for the default ASP.NET MVC template that will not be used anymore or has rules that breaks the AdminLTE styling, so it's better to remove everything. We can use site.css to add our own custom styles.

The adminLTE control panel takes use of many plugins to extend its functionality, from charts, colorpicker, datepicker, datatables and so on. Let’s add the plugins next.

5.) Adding more functionality by using plugins in the AdminLTE template

Currently, when we install the AdminLTE NuGet package, the plugins are not added in the MVC project, so we need to add them in our ASP.NET MVC project manually.

In the Windows Explorer, open the folder where you extracted AdminLTE.zip file. Next, drag-and-drop the plugins folder from Windows Explorer to the Visual Studio Solution Explorer project inside the admin-lte folder. The Visual Studio will copy them in the project:

Visual Studio MVC AdminLTE drag-and-drop plugins

All that is left is to add the plugin files in the bundles.Add().Include method, depending on the plugins you want to use. See the sidebar of the AdminLTE example page showing all the available plugins in action. Select the plugin you are interested in the sidebar, then, open the webpage source code and look for CSS and JavaScript files that the plugin is using. Looking into the web page source code is also a good way to learn, how to use the plugin.

Let’s go through a concrete example and add bootstrap3-wysihtml5 plugin in our project.

Adding bootstrap-wysihtml5 Plugin in the ASP.NET MVC Project

The bootstrap-wysihtml5 can be found in the Editors AdminLTE example page in the sidebar under the Forms section. In the browser, right-click anywhere on the page and choose "View Page Source".

The steps are:

  1. In the source code, locate the scripts and styles for the plugin. In our example, we would find them:
    • Inside the <head> tag:
    • Before the ending </body> tag:
  2. So, let’s add those two files in the bundles. inside App_Start folder > BundleConfig.cs, find the bundles.Add() line that adds the AdminLTE scripts. We add the path of the script for the WYSIHTML5 plugin (highlighted line below):

    Next, inside the already existing bundle for the styles, we add the line for the path to the WYSIHTML5 plugin style (highlighted line below):
  3. But we are not done yet. If you check at the bottom of the Editors AdminLTE example page source code, there is an additional JavaScript code for that plugin:

    So we need to add it just before the ending </body> tag inside _Layout.cshtml:

Now let’s create a basic form to see the plugin in action.

Creating a form that uses bootstrap WYSIHTML5 text editor plugin

In the Solution Explorer, open Views > Home > Contact.cshtml. Inside it, add the following code:

The highlighted lines show the Razor code for the form, while the other lines are Bootstrap related tags and styles using the General Form Elements AdminLTE example page as a guide.

The contact page should now look something like this:

Visual Studio MVC project website with AdminLTE template - contact-page

Click to Enlarge

We do the same for the any other plugin we want to add.

Conclusion

By creating an ASP.NET MVC project in Visual Studio, we get Bootstrap 3 as a Front-End Framework, but to have more components available, we replaced the default framework with the AdminLTE control panel / dashboard template. It is built on top of Bootstrap3, containing many plugins that extend functionality. Finally, we created a simple form on the contact page that uses one of the plugins.

Share this page

3 Comments

Add a Comment

Back to Top