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 extended functionality available. One of them is AdminLTE, a dashboard & control panel theme also built on top of the Bootstrap. This article will show you how to replace the default Bootstrap framework with the AdminLTE template in an ASP.NET MVC project for the .NET framework.

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

• Start the Visual Studio and select "Create new project". If you are already inside Visual Studio, go to File > New > Project.
• "Create a new project" window will show up with list of available templates. In the search field, type mvc and select "ASP.NET Web Application (.NET Framework)" and click Next.
  
  Note: If you don’t see the "ASP.NET Web Application (.NET Framework)" template and only see "ASP.NET Core Web App" listed, you might need to install additional components for the .NET Framework templates.
• Give the project a name and click Create.
• A "Create a new ASP.NET Web Application" window will show up.
  • On the right side, under "Advanced", there will be a checkbox selected for the "Configure for HTTPS". The Visual Studio will create a self-signed SSL certificate, so we can develop applications over HTTPS, but if you run the project on Firefox, you might get the "Secure Connection Failed" error message. Check this solution to fix the issue.
    
    Note: The SSL is not needed for this article, so you can deselect this option.
  • On the left side, we can choose between different ASP.NET templates. Select MVC project template 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 years now, so we are going to get the necessary files from the AdminLTE Github page and copy those files into our project.

Bur first, we need to update the jQuery & Bootstrap JavaScript libraries currently used in the ASP.NET MVC Project.

1.) Updating jQuery and Bootstrap in ASP.NET MVC Project

The AdminLTE dashboard depends on two main frameworks, Bootstrap, and jQuery. The AdminLTE v3.2.0 uses the jQuery v3.6.0, while the Visual Studio uses older jQuery v3.4.1 in the ASP.NET MVC project. With Bootstrap, it's a similar story. The AdminLTE v3.2.0 uses the Bootstrap v4.6.1, while the ASP.NET MVC project uses older Bootstrap v3.4.1.

We can check which versions of the libraries the ASP.NET MVC project uses, update to newer versions or install additional libraries using the Manage NuGet Packages tool.

The Manage NuGet Packages tool

To update both the jQuery and the Bootstrap Framework of the current ASP.NET MVC project, we do the following:

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

   

2. A NuGet Package Manager window will open. Select Installed tab which will list currently installed libraries. Select the "Bootstrap by The Bootstrap Authors, Twitter inc." package:

   

   Click image to enlarge
3. On the right side, for Version:, open the dropdown menu and choose the Bootstrap version 4.6.1 as this is the version that the AdminLTE v3.2.0 is using:

   

4. 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.
   Note: This might take a few minutes and after it is finished, the NuGet Package Manager tool will reload with Bootstrap showing "Installed: 4.6.1".
5. Now we just need to update the jQuery. Still under "Installed" tab, find the jQuery package and select it.
6. Select the Version: dropdown menu and choose the jQuery version 3.6.0:

   

7. Click on Update. A Preview Changes window will again open. Click OK and wait for the installation to finish. The Version: for jQuery should now show 3.6.0.

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

2.) Getting AdminLTE files from GitHub

Go to AdminLTE GitHub release page, find the AdminLTE v3.2.0 version, download the source code and 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 current layout of the ASP.NET MVC project.

In the previous step, we copied the content of the dist folder using Windows Explorer into a Visual Studio. Inside Windows Explorer we need to go up one level from dist folder, so we are at the root "AdminLTE-3.2.0" folder of the extracted files. Now find the starter.html file and open it in Visual Studio or some other text editor.

For the ASP.NET MVC project, the main layout file is the _Layout.cshtml file, 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 website.

Remove everything from _Layout.cshtml and replace it with the content of Starter.html. But, there are few lines of Razor code and a few additional lines inside _Layout.cshtml that we still need, so in the next section, we are going to add them back into our new layout.

5.) Adding missing Razor code into the new layout

We need 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 were 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 are 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().

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 will render the content of @section scripts { } if the View contains this named section. That can become handy if we have a plugin that is only used in a specific View, so it would make sense to only include plugin-required scripts only in that 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 the 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/.

If you run the project now, you might notice that the icons on the top right corner are missing. The AdminLTE uses FontAwesome plugin to show them and we are going to add this plugin in the next section, but first, let's learn a bit more about the plugins in general.

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 intended. We will 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 we got from GitHub 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 and 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.

Finding out how to install any plugin

The best way to find out what scripts and styles to include for a particular plugin, how to use it, and how to install it is to visit the plugin's website. You could look inside the main .js or .css file of the plugin in plugins folder to locate the official link of the plugin.

There is also plugin dependencies of the AdminLTE page for more information about the plugins used by AdminLTE.

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 as intended when you run the project in 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 page, we can see it uses summernote-bs4.js for script file and summernote-bs4.css for styles. We already have these two files, since we added the 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 code on line 3 below):

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

Next, inside the already existing bundle for the styles, we add the line for the path to the summernote-bs4.css file (highlighted code on line 5 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.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, let's add a simple contact form. Below <h3>@ViewBag.Message</h3> insert 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>
}

The code above will initialize the summernote plugin using some of the available options.

You might be wondering why the code is wrapped inside the @section scripts {} block. 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 is rendered and it contains the @section scripts {}, the content inside it 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 > fullcalendar folder in Solution Explorer, we can see that there is one main.js script file and one main.css file.

Open App_Start > BundleConfig.cs and add the fullcalendar style file (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.css",
            "~/adminlte/plugins/fontawesome-free/css/all.min.css",
            "~/adminlte/plugins/summernote/summernote-bs4.css",
            "~/Content/site.css"
            ));

Now, we will do the same for the script file. We add the line highlighted yellow:

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

The script and style files will now both 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. For the most basic example, check their Initialize with Script Tags 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, {
            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 that the code of the script above will only be included when the 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.