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

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 also built on top of the Bootstrap. 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:

• Inside Visual Studio, go to File > New > Project
• "Create a new project" window will show up. In the search field, type mvc and select "ASP.NET Web Application (.NET Framework)" and click Next.
• Give the project a name and click Create.
• A "Create a new ASP.NET Web Application" window will show up. Select MVC and click Create.

The default ASP.NET MVC project looks like this:

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

There is an AdminLTE NuGet package available, but it hasn't been updated for a few years, so it's pointless to use it now. Instead, we are going to get the necessary files from the AdminLTE Github page and copy those files into our project.

1.) Updating Bootstrap Framework in ASP.NET MVC Project

The AdminLTE dashboard depends on two main frameworks, Bootstrap, and jQuery. With jQuery, the AdminLTE v3.0.5 uses the jQuery v3.4.1, which is the same version Visual Studio uses in ASP.NET MVC project.

With Bootstrap though, it is a different story. Currently, when creating an ASP.NET Web application, the Visual Studio adds Bootstrap 3.4.1 version, while the AdminLTE is 3.0.5 uses Bootstrap version 4.4.1.

So, we need to update the Bootstrap Framework, that has been installed by the Visual Studio. To update to a newer version of Bootstrap, we will use the NuGet Package Manager to install a Bootstrap NuGet package.

The steps are as follows:

• In "Solution Explorer", right-click on the project and select “Manage NuGet Packages”:

  

• A NuGet Package Manager window will open. Select Browse on the top left corner and type "bootstrap" in the search field:

  

  Click image to enlarge
• Select the "Bootstrap by The Bootstrap Authors, Twitter inc." package. It should be the first item on the list.
• On the right side, for Version:, open the dropdown menu and choose the Bootstrap version 4.4.1 as this is the version that the AdminLTE v3.0.5 is using:

  

• Click on the Update button. A Preview Changes window might open, showing you the changes the Visual Studio will do to the solution. Click the OK button to continue.

After installation, we can verify that the newer version of Bootstrap has indeed been installed by going to Solution Explorer and open Content > bootstrap.css file. In the comments at the beginning of the file, it should say "Bootstrap v4.4.1".

Now, let's focus on adding AdminLTE files into our ASP.NET MVC project.

2.) Getting AdminLTE files from GitHub

Go to AdminLTE GitHub release page, find the AdminLTE v3.0.5 version and download the source code. The newer versions should also work as long as it's AdminLTE version 3.

Extract the files somewhere in your computer.

3.) Copying extracted files into Visual Studio project

We will now copy the necessary files into our ASP.NET project in Visual Studio.

• Go to the folder containing extracted files we got from GitHub and go to the dist folder. It should contain three folders:
  • css - containing styles
  • img - containing images
  • js - containing JavaScript files

  In a minute, we are going to copy them into a Visual Studio, but before we do that, we will make a new folder into our project.

• In VS, go to Solution Explorer, right-click on your project and select Add > New Folder. Name that folder adminlte.

  

• Now, open the Windows Explorer and go inside the dist folder and Copy all three folders into the newly created adminlte folder inside Solution Explorer in Visual Studio.

  You can do this in different ways. You could right-click on three folders in Windows Explorer and select "Copy" then right-click the adminlte folder in VS solution Explorer and select Paste. You could also just use drag and drop instead of Copy/Paste.

  Whatever technique you used, the ASP.NET project in solution explorer should now look like this:

  

Now that we copied the necessary files, let's focus on the Layout of the AdminLTE dashboard.

4.) Changing ASP.NET Layout to the one used by AdminLTE

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

In the previous step, we copied the content of the dist folder using Windows Explorer into a Visual Studio. Return to Windows Explorer and go out of dist, so we are in the root folder of extracted files. Now find the starter page starter.html and open it in Visual Studio or some other text editor.

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.

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 and a few additional lines of code that we still need, so in the next section, we are going to add them into our new layout.

5.) Adding missing Razor code into the new layout

We are going to add the razor code inside the <head> tag and the <body> tag.

In the <head> tag

• Find:

  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">

  <link rel="stylesheet" href="dist/css/adminlte.min.css">

  The first line references the styles for FontAwesome icon library. We will add this into our project in step 8 and in step 8a. The Second line references the main AdminLTE styles which we already added when we copied the content of the dist folder in step 3.

• Remove those two lines and replace them with:

  @Styles.Render("~/Content/css")
  @Scripts.Render("~/bundles/modernizr")

  So, what are @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.

  We are going to edit the App_Start > BundleConfig.cs file a bit later.

Inside the <body> tag

• We have Navbar links and we will render them using the Razor code:

  Find:

  <a href="index3.html" class="nav-link">Home</a>

  And replace it with:

  @Html.ActionLink("Home", "Index", "Home", null, new { @class="nav-link"} )

  Find:

  <a href="#" class="nav-link">Contact</a>

  And replace it with:

  @Html.ActionLink("Contact", "Contact", "Home", null, new { @class="nav-link"} )

  One feature we are lacking here is to add Bootstrap active class to either <li> or the @Html.ActionLink() when the link is the same as the current page. One way to achieve this is to test which Controller and which View is the current one. Check this StackOverflow page for various solutions to this problem.

• We also have navigation links in the Sidebar menu:

  Find:

  <ul class="nav nav-treeview">

  Inside it, you will see anchor tags with a <i> tag in them.

  For Navbar navigation links, we used @Html.ActionLink() to render a link for us, but now due to <i> tag inside the link, we will instead use @Url.Action() method to render a value for the href attribute while leaving the rest of the <a> tag as it is.

  Inside <ul class="nav nav-treeview"> remove both <li> elements and replace it with:

  <li class="nav-item">
      <a href="@Url.Action("Index", "Home")" class="nav-link active">
          <i class="far fa-circle nav-icon"></i>
          <p>Home</p>
      </a>
  </li>
  <li class="nav-item">
      <a href="@Url.Action("Contact", "Home")" class="nav-link">
          <i class="far fa-circle nav-icon"></i>
          <p>Contact</p>
      </a>
  </li>
  

  The highlighted yellow lines show the changes we made compared to the original HTML code.

  Note: As with the Navbar links, there is an issue with Bootstrap active class. It's hardcoded at the first link (line 2). Check the same StackOverflow page for possible solutions.
• The starter page has a section for content header that contains a title and breadcrumbs. Find:

  <div class="content-header">
     <div class="container-fluid">

  Inside <div class="container-fluid">, delete everything in it and replace it with:

  <div class="row mb-2">
      <div class="col-sm-6">
          <h1 class="m-0 text-dark">@ViewBag.Title</h1>
      </div><!-- /.col -->
      <div class="col-sm-6">
      <ol class="breadcrumb float-sm-right">
      @if (@ViewContext.RouteData.Values["controller"].ToString() != "Home" || 
          @ViewContext.RouteData.Values["action"].ToString() != "Index")
      {
          <li class="breadcrumb-item">
              @Html.ActionLink("Home Page", "Index", "Home")
          </li>
      }
      <li class="breadcrumb-item active">@ViewBag.Title</li>
      </ol>
      </div><!-- /.col -->
  </div><!-- /.row -->
  

  Let's go through the code we just added. All three main Views (Index.cshtml, About.cshtml, Contact.cshtml) generated by the Visual Studio for the ASP.NET MVC project start with the following line:

  @{
      ViewBag.Title = "Name of the page";
  }

  So, we use the ViewBag.Title in line 3, which will display current page title in the content header.

  The Content header of the AdminLTE starter page also contains breadcrumbs, so we implemented a really basic version of it. The code in lines 7 and 8 check if the current page is not a Homepage and if it's not, it renders a link to the Homepage (line 11). The 2nd level of breadcrumb simply renders a title for the current page (line 14).

• Now, let's focus on the content itself.

  Find:

  <div class="content">
      <div class="container-fluid">

  Inside <div class="container-fluid">, delete everything in it and replace it with:

  @RenderBody()

  The main content should now look like this:

  <div class="content">
      <div class="container-fluid">
          @RenderBody()
      </div><!-- /.container-fluid -->
  </div>
  

  The @RenderBody() renders the content of the View, that is not in the named section. Named sections are those parts of the View wrapped with @Section { ... }, so everything else not wrapped in them 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 of how the layout is structured using Razor.

Before the ending </body> tag

• Find:

  <!-- jQuery -->
  <script src="plugins/jquery/jquery.min.js"></script>
  <!-- Bootstrap 4 -->
  <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- AdminLTE App -->
  <script src="dist/js/adminlte.min.js"></script>

  Replace those lines with:

  @Scripts.Render("~/bundles/jquery")
  @Scripts.Render("~/bundles/bootstrap")
  @Scripts.Render("~/adminlte/js")
  @RenderSection("scripts", required: false)

So, what have we done here? Lines 1 and 2 references the jQuery and Bootstrap bundles inside the MVC project, while line 3 will reference the AdminLTE related scripts. As mentioned before, the bundles are located in App_Start > BundleConfig.cs and we are going to edit this file in the next step.

In line 4, the @RenderSection renders the section of the page named scripts if it exists in the View. This can become handy if we have a plugin that is only used in a specific View. We will make use of @RenderSection later when we will create a simple Contact form in Contact.cshtml file that uses WYSIWYG Editor and when we will add a Calendar plugin into a Homepage.

Now, let's define which files to include when @Styles.Render() and @Scripts.Render() are called.

6.) 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.

Since we updated Bootstrap to version 4, we will need to also include a Popper library as this is a required library for Bootstrap 4. We can quickly achieve this by including a bundled version of Bootstrap instead of the regular one.

Inside the RegisterBundles() method, find:

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
    "~/Scripts/bootstrap.js"));

Replace it with:

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
    "~/Scripts/bootstrap.bundle.min.js"));

Next, we will add a new bundle that will contain AdminLTE script and any other scripts needed for our template, for example, scripts from plugins. We will discuss more about plugins in step 8.

At the end of the RegisterBundles() method, add the following code:

bundles.Add(new ScriptBundle("~/adminlte/js").Include(
             "~/adminlte/js/adminlte.min.js"));

Here, we added the AdminLTE script, but we still need to add AdminLTE styles. We can add them to an already existing bundle for styles. Find:

bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));

Inside that bundle, add the styles for adminlte.css, so that the end result is:

bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/adminlte/css/adminlte.min.css",
                      "~/Content/site.css"));

About site.css

Let's quickly take our attention to the Site.css, which is a stylesheet from the original ASP.NET MVC application. It is located at Content > Site.css. It has CSS rules for the default ASP.NET MVC template that will not be used anymore, so it's better to remove everything inside this file. We can still use Site.css to add our own custom styles.

7.) Fixing image paths of AdminLTE

We now have fixed the layout and modified the bundles to reference adminlte related scripts and styles. But, there is still one thing to fix with the layout, which is the path of images. The starter page is looking for the images at /dist/img/ path, while in our project, the images are inside the adminlte folder.

To fix the images, we need to:

1. Open Views > Shared > _Layout.cshtml file.
2. In the VS menu, go to Edit > Find and Replace > Quick Replace (Ctrl+H)
3. Look for dist/img/
4. Replace it with ~/adminlte/img/. The ~ (tilde) character at the beginning specifies a path to the current root of the web application.
5. On the right side of the replace field should be two icons. The first one is Replace next (Alt+R), while the second one is Replace all (Alt+A). Use whichever you want to replace all instances of dist/img/ into ~/adminlte/img/.

In the next section, we will focus on plugins.

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

The AdminLTE control panel can make use of many plugins to extend its functionality, from charts, colorpicker, datepicker, datatables, and so on. There is also a FontAwesome library included there which we will need to add in order for AdminLTE to work as it should. We do this in the next step 8a.

The extracted adminlte file that we downloaded from GitHub in step 2 contains a plugins folder. We are going to copy this folder into our project in Visual Studio. We could pick and choose which plugin to add, but for the demonstration purposes, we will copy the whole plugins folder into it. Then, we will reference scripts and styles of only those plugins we want to use in the AdminLTE dashboard by editing the App_Start > BundleConfig.cs file.

In the Windows Explorer, go to the folder of extracted files and either drag-and-drop or Copy/Paste the plugins folder from Windows Explorer into the Visual Studio project inside the adminlte folder. The Visual Studio will copy them in the project.

When done, the adminlte folder in Solution Explorer should look like this:

Now, we need to reference the plugin scripts/styles in the App_Start > BundleConfig.cs, depending on the plugins we want to include. See the AdminLTE example page showing different plugins in action.

The best way to know what scripts and styles to include for a particular plugin and how to use it is to check plugin dependencies of the AdminLTE page and visit the plugin's website to learn more about the plugin and how to install it into your project. If you don't see the specific plugin in the list even though it's in the plugins folder, either Google it or open the main .js or .css file of the plugin in the plugins folder and look for the official link of the plugin at the comments in the top of the file.

Problem with filterizr plugin

With AdminLTE 3.0.5, the filterizr plugin for some reason still has it's own source code files, which might cause TypeScript errors in Visual Studio if you try to run the project (in my case, I was getting Build:Module error on .ts files). The solution is either to remove the plugin if you think you won't need it or inside Solution Explorer, delete everything in filterizr folder except for the following files:

• filterizr.min.js
• jquery.filterizr.min.js
• vanilla.filterizr.min.js

Now that the plugins files have been copied into our project, we can finally reference FontAwesome styles that is used by the AdminLTE template.

8a.) Adding FontAwesome in the ASP.NET MVC Project

To make FontAwesome icons work in our project, we need to add a all.min.css style located in adminlte > plugins > fontawesome-free > css folder into the bundles. Open App_Start folder > BundleConfig.cs file and insert the following highlighted yellow code (line 3) into the existing StyleBundle:

bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/bootstrap.css",
            "~/adminlte/plugins/fontawesome-free/css/all.min.css",
            "~/adminlte/css/adminlte.min.css",
            "~/Content/site.css"
            ));

And we are done. The Starter page of the AdminLTE template should now be displayed when you run the project in the Visual Studio.

Let’s go through a few more concrete examples of adding a plugin and make use of the Summernote plugin that will change the default behavior of <textarea> inside the form into a more useful WYSIWYG editor.

8b.) Adding Summernote Plugin in the ASP.NET MVC Project

Again, we need to add the required scripts and styles into the bundles located at App_Start folder > BundleConfig.cs.

If we look into Summernote Bootstrap 4 example, we can see that it uses jQuery and Bootstrap scripts and styles which we already have them included in the bundles. In addition, it also uses summernote-bs4.min.js for script file and summernote-bs4.min.css for styles. We already have these two files, since we added plugins folder into our project. All that is still needed is to include those two files into our bundles.

Open App_Start folder > BundleConfig.cs and inside the bundles.Add() method, find the line that adds the AdminLTE scripts. We add the path of the script for the Summernote plugin (highlighted line below):

bundles.Add(new ScriptBundle("~/adminlte/js").Include(
    "~/adminlte/js/adminlte.min.js",
    "~/adminlte/plugins/summernote/summernote-bs4.min.js"
    ));

Next, inside the already existing bundle for the styles, we add the line for the path to the summernote-bs4.min.css file (highlighted line below):

bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/bootstrap.css",
            "~/adminlte/css/adminlte.min.css",
            "~/adminlte/plugins/fontawesome-free/css/all.min.css",
            "~/adminlte/plugins/summernote/summernote-bs4.min.css",
            "~/Content/site.css"
            ));

But we are not done yet. We still need to embed it into our page. We will do this next when we turn our attention to the contact page.

Use WYSIWYG editor of Summernote plugin in the Contact page

In the Solution Explorer, open Views > Home > Contact.cshtml. First, let's remove the following line:

<h2>@ViewBag.Title.</h2>

We don't need it since the title is already displayed by the code in content-header in _Layout.cshtml file.

Next, below <h3>@ViewBag.Message</h3> insert the following code.

Inside it, add the following code:

<div class="col-lg-8 py-4">
    <div class="info-box">
        @using (Html.BeginForm())
        {
            <div class="form-group">
                @Html.Label("Name")
                @Html.TextBox("CustomerName", null, new { @class = "form-control", @style="width:200px" })
            </div>
            <div class="form-group">
                @Html.Label("Comment")
                @Html.TextArea("CustomerComment", new { @class = "textarea", @id = "summernote" })
            </div>
            <div class="box-footer">
                <button class="btn btn-primary" type="submit">Submit</button>
            </div>
        }
    </div>
</div>

We make sure that the textarea field uses id="summernote" (line 11). We will use this id to embed Summernote into it.

At the end of the Contact.cshtml, insert the following:

@section scripts {
    <script>
        $(document).ready(function () {
            $('#summernote').summernote({
                placeholder: 'Your comment',
                tabsize: 2,
                height: 100
            });
        });
    </script>
}

So what is happening here? If you remember, in step 5, we were modifying Layout and just before </body>, we added this line: @RenderSection("scripts", required: false).

When a View containing the @section scripts {} is rendered, the content inside {} will be inserted just before </body> tag.

The contact page should now look something like this:

Visitor Braian Pavanelli asked about the fullcalendar plugin. Let's add this plugin next.

8c.) Adding fullcalendar plugin to AdminLTE template

The first step is to visit the fullcalendar official website and look for example on how to install the plugin. If we look into the plugins folder in Solution Explorer, we can see that there are multiple fullcalendar folders. The fullcalendar is the core version, while others are additional features that we can include to the fullcalendar functionality.

One of the features is the fullcalendar-bootstrap which gives support to Bootstrap styles. If we check the documentation for Bootstrap Theming, we can see which scripts and styles we need to load. Those are the core, bootstrap, and daygrid which we will do next.

Open App_Start > BundleConfig.cs and add the following lines (highlighted yellow) into the RegisterBundles() method

bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/bootstrap.css",
            "~/adminlte/css/adminlte.min.css",
            "~/adminlte/plugins/fullcalendar/main.min.css",
            "~/adminlte/plugins/fullcalendar-daygrid/main.min.css",
            "~/adminlte/plugins/fullcalendar-bootstrap/main.min.css",
            "~/Content/site.css"
            ));

In above code, we added fullcalendar required styles to already existing bundles.Add(new StyleBundle("~/Content/css") containing other css files.

Now, we will do the same for scripts. We add the lines highlighted yellow:

bundles.Add(new ScriptBundle("~/adminlte/js").Include(
    "~/adminlte/js/adminlte.js",
    "~/adminlte/plugins/fullcalendar/main.js",
    "~/adminlte/plugins/fullcalendar-daygrid/main.js",
    "~/adminlte/plugins/fullcalendar-bootstrap/main.js"
    ));

The scripts and styles will now be loaded. All that is left is to embed the calendar into a page.

Adding a calendar into index.cshtml

Open the Views > Home > Index.cshtml file. Inside the 2nd <div class="col-md-4"> add the following code:

<div id='calendar'></div>

This will be a div containing the calendar. We just need to add a script that embeds the calendar. To check what script to add, look into the documentation on their website or even check the page source code of the example they use, like their Bootstrap 4 Theme demo page.

At the end of the Index.cshtml, add the following:

@section scripts {
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['dayGrid', 'bootstrap'],
            themeSystem: 'bootstrap'
        });
        calendar.render();
      });
    </script>
}

Similar to the Summernote plugin earlier, we make use of @section scripts {}. This code will be injected where we have the @RenderSection("scripts", required: false) in the _Layout.cshtml. By using @section scripts {} in the Index.cshtml, we make sure this only happens when Index.cshtml View is displayed.

The end result should look like this:

Conclusion

By creating an ASP.NET MVC project in Visual Studio, we get a web application using Bootstrap Front-End Framework. In this article, we replaced it with the AdminLTE control panel/dashboard template. It is built on top of Bootstrap and it contains many other libraries or plugins that extend its functionality. Finally, we created a simple form on the contact page that uses a WYSIWYG editor and also added a calendar on the homepage.