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.
/dist/css/adminlte.css
file. We are going to download the AdminLTE files in step 2.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:
- 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 stylesimg
- containing imagesjs
- 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 createdadminlte
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:
- Open Views > Shared > _Layout.cshtml file.
- In the VS menu, go to Edit > Find and Replace > Quick Replace (Ctrl+H)
- Look for
dist/img/
- Replace it with
~/adminlte/img/
. The ~ (tilde) character at the beginning specifies a path to the current root of the web application. - 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.
Joe
August 29, 2017Thanks for the detailed walk through , it really helped.
I have an issue that the Left nav section is not adapting to the different resolution.
The click of the Menu button to make it slide left( navigation drawer kind of effect) is not working nor the button is visible. Any thoughts?
admin
August 29, 2017Hi,
I'm glad you found the article helpful. Regarding the "navigation drawer" not working, check if the "
/admin-lte/js/app.js
" file is included. This is where the sidebar toggle menu button functionality is located.Daniel
September 14, 2017Hello Joe,
The fonts I solved by referencing them on the
_Layout
. I simply removed this lineand added
"~/Content/css/font-awesome.css"
to the"~/Content/css"
StyleBundle.About the navbar toggle, it's probably because the newer version of AdminLTE doesn't use
/admin-lte/js/app.js
anymore, but/admin-lte/js/adminlte.js
that is at/dist/js/
. Just copy and replace it with the app.js.@liseref
February 11, 2018Hello Daniel, I have same problem and I try to apply your solution. But I confused could you explain more please which code we will change? I mean dist/js whre should we put? Scipt bundle or shared template?
Bart
April 13, 2019The dist/js folder is inside the source code not the admin-lte folder.
I know this is more then 1 year old but maybe it can help someone.
Ernesto Suscriptor
May 22, 2018Hello and thanks by the great tutorial. By the way ¿anybody found a solution to navigation drawer sidebar? I click the options like Dashboard, Charts, UI Elements, etc. and the app shows the links but when I do click on a link (for example Charts->ChartJS) the app close the drawer (Charts e.g.).¿Anybody knows how to hold the drawer open?
Ehsan
January 17, 2018Hi,
At first, i want to appreciate your article which made my life easier. Following your steps, i could see the admin panel. But the problem is, no icon and image is shown in the panel.
I also changed code based on Daniel advice, but unfortunately isn't fixed.
I downloaded latest version of AdminLTE (2.4.2)
Thanks in advanced.
admin
January 17, 2018Good catch. The latest AdminLTE v2.4.2 doesn't use CDN for the CSS icons.
inside <head> tag, use this code for the links to font-awesome.css & ionicons.css:
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
lev ntr
March 13, 2018Hi,My text boxes are very long.....they span the entire screen,how to solve it?
Jerion
January 22, 2018Hi Pal?
I have one big line on the top of page. why? do you know something about it? just with toggle menu.
your example help me.
thanks a lot.
jesus
March 2, 2018hi, sorry by my englih, it's no good, the problem is in content/Site.css the body has a padding-top:50px; and padding-bottom:20px; you should set on 0px; and for the toggle button you should set ~/admin-lte/js/adminlte.js", on the budlen, in the tutorial say ~/admin-lte/js/app.js",
Slawomir
January 26, 2018Thanks a bunch. Great article
putra
February 7, 2018thanks i found these nice article. i have one big row on top of the header, is there any solution to fix it? Thanks in advanced.
admin
February 7, 2018Hi,
Have you removed the old CSS styles in site.css? Those are the styles of the default ASP.NET MVC application that the Visual Studio creates.
Mateen Ansari
February 7, 2018Hi,
Loved your Article.. Got Stuck at one place - The Navigation Drawer is not working nor the drop downs in the left side panel menu sections.. Please Help.
Martin A.
March 2, 2018I create project .net core with react and redux with Visual Studio 2017. I follow the steps but the problem is in the file bundleconfig.cs (No exist). Help, update your article with this version.
Khairul
March 4, 2018I guess you maybe start the project with empty template. You still can add those file. Refer this
https://stackoverflow.com/questions/21668280/how-do-i-add-bundleconfig-cs-to-my-project
Hopefully, this help you
Ghaby
March 5, 2018Martin, for .NET Core see this project https://github.com/moemura/AdminLTE.Core
kurnis
April 11, 2018Hi!
Congratulation for the article. It's incredible.
I'm trying to add a "Data Table With Full Features" dataTable and I'm following the step 5 to add this component. I add the bundles (css, js and jquery), and the function, but it seems that it only takes the style, but the filter for the number of entries, the search box and the botton navigation by the pages, don't appear. How can I solve it? Thanks
kurnis
April 27, 2018I solved it. I had the same problem with the data table and the calendar. Both didn't appear, and it was because my parameters were incorrects. In the table, the number of fields in the header were different than the number of columns in the table. In the calendar, the array with the events had the name of the fields differents. Thanks in any case.
One question for the Calendar: Is it possible to begin the week on monday?
Thanks
admin
April 29, 2018Hi,
Try adding this option:
firstDay : 1
Documentation about it can be found here.
Benjamin
June 7, 2018I love this articles, but the only challenge that I have now is on Global.asax.cs that is where I got stuck. Any time I load the application it will refer to Global.asax.cs that error is there, please what can I do?
sdb
October 9, 2018Hello, if using visual studio 2017 15.8.xx there is libman, just type and use cjdns as source the intellisense will pop up on its own
Misha Khan
October 20, 2018Hello, First of all thanks for sharing this article, but it will be great if you help in adding some more other useful plugins for asp.net mvc AdminLTE template.
Shanadas C
February 11, 2019Hello, thanks a ton for this article! You have explained it pretty well.
Braian Pavanelli
February 25, 2019Nice Article thanks! I'm just having a problem with some Type Scripts of 'fullcalendar'
Error Build:Cannot find name 'JQueryPromise'. 'XXX' C:\XXX\admin-lte\plugins\fullcalendar\dist\fullcalendar.d.ts 1615
Could you help with this issue? Or any tip?
Thanks
admin
February 25, 2019Hello,
This article is quite old now, I intend to do a complete rewrite in the near future. I have now quickly added the guide on how to add fullcalendar plugin at the end of this article. I hope, you will find it helpful.
Gatien
February 26, 2019Hi, thanks a lot for the article. I can't find the starter.html in the zip file, i think they've renamed/removed it but I might be wrong. Can anyone help please?
Here's the link i used to download the sample archive.
https://github.com/almasaeed2010/AdminLTE/archive/v2.4.9.zip
Thanks
admin
February 26, 2019Thank you for your comment. You are right, the last version AdminLTE v2.4.9 doesn't seem to have everything. Just download the previous version AdminLTE v2.4.5 at https://github.com/almasaeed2010/AdminLTE/archive/v2.4.5.zip
Also note, this article was written almost 2 years ago for AdminLTE v.2.4.0, so there might still be some differences.
Aslal Shaja
March 22, 2019Hi, thanks a lot for the article its very useful for me. I applied into my asp.Net MVC Page Its working But, Menu didn't work such as
1) sliding right to left when I click Sidebar Toggle.
2) menu icons are not showing (but top icons are working envelope ,bell, task)
3) Sub menus (treeview-menu) don't working
please help me
admin
March 25, 2019Hi,
This looks to me that the custom JavaScript code is not running. I looked at the latest version of AdminLTE v 2.4.10 and they seem to rename that file from app.js to adminlte.js.
In the beginning of the section "4.) Add AdminLTE scripts and styles to bundles" just replace:
bundles.Add(new ScriptBundle("~/admin-lte/js").Include(
"~/admin-lte/js/app.js"));
with
bundles.Add(new ScriptBundle("~/admin-lte/js").Include(
"~/admin-lte/js/adminlte.js"));
Let me know if this fixes your issue.
Rickson
April 17, 2019Hi Admin, This worked for me thanks alot
aspnetcoreuser1
April 13, 2019Hi.. May I know how can I apply this in Asp.Net Core 2.1?
consumeTech
April 30, 2019Hi, thanks very much for this article, I have been struggling get this straight forward information about how to use AdminLTE. Thank you very much once, As been reviewing questions and answers I am also about to start following these steps. could you please help if i struggle along the way thank you in advance
admin
May 1, 2019If you have any issues, let me know. Just be aware that this article was written almost 2 years ago for AdminLTE v.2.4.0, so for the current version it is a bit different in some places. I intend to update the article in the near future.
Octavio
November 29, 2019Hi, I'am followed all the steps, but my webpage is not working. Right now last version Release is AdminLTE-3.0.1 and many fields are differents.
Thank you so much!
Buckethead
December 5, 2019I got the same issue similar to Octavio that header and left navbar isn't render properly. Any advise to solve it?
Thulani Moleme
May 1, 2019Hi, thanks a lot for this article, I am using AdminLTE-2.4.10. but I'm having problems I can't find this in the , something close to it is this . Should I remove that one?
admin
May 2, 2019Hi,
Part of your comment seemed to contain HTML code that has been filtered out. You need to encode any HTML code that you add in your comment using online HTML encoding tools like this one https://opinionatedgeek.com/Codecs/HtmlEncoder
Frank
June 19, 2019Hola, gracias por el artículo. Una consulta puedo utilizarlo junto con AngularJs en MVC4?
Dil Lil
September 10, 2019Hello,
I am creating a website using ASP.NET Forms and i added AdminLTE to my project through NuGet packages but the header and other stuff do not show up. I only need them.
So i pasted the code to master page and edited it the right way. And the components appear correctly.
But the entire website looked zoomed out. In other words all the text, pic, boxes etc looks small and i cnt even read some of them.
Any idea why..?
Thank You.
Dil lil
Rakesh
November 28, 2019I followed all the steps. But i am getting an error saying
Error Build:Module '"../../../../../../../../Users/XYZ/source/repos/Web-demo3/admin-lte/plugins/filterizr/FilterizrOptions/defaultOptions"' has no exported member 'RawOptionsCallbacks'. Web-demo3
Can you please help me?
admin
November 28, 2019Hi,
I'm not familiar with the filterizr plugin, but according to this AdminLTE GitHub Issue, you should load the dist .js files and not the .ts files.
Buckethead
December 4, 2019Hi,
Thanks for the article written for us.
I doubt if there is 2.4 version on VS as I have problem with the styling on Navigation bar after follow the steps from this article, which replacing the template.
admin
December 5, 2019Hi,
The AdminLTE 2.4.0 version is still available in GitHub HERE.
I'm currently writing one article and after that I intend to update this one with the latest AdminLTE version, as the 2.4.0 from 2017 is a bit old now.
Narwhal
May 26, 2020Did you end up writing an updated article on this? I couldn't find one and wanted you to know that I would be very interested in it.
admin
May 27, 2020Hi,
Thank you for your interest. I'm going to update this article next.
Update
The article has now been updated for the AdminLTE v3 version.
Jamie Swindall
July 6, 2020Has anyone had any luck with the Treeview plugin?
admin
July 6, 2020You could try jsTree, which is a free jQuery based library.
Pawan
August 8, 2020Hii,
i am using this article. it is very easy to understand .i am done all option and result show as per requirement.
but i have one problem. my index page not show in proper way .sidebar menu cover my index page .i want to adjust my index page?
-> my code ->
<!-- Content Header (Page header) -->
@RenderBody()
<!-- /.content -->
admin
August 21, 2020Hi,
It's hard to know what the issue is without more information. I would suggest to open "Developer Tools" in Chrome browser and look for any JavaScript errors. If there are, check if all Javascript scripts loaded properly.
me you
December 8, 2020Note that you forgot to mention that we need to add the plugins folder with the others, I couldn't display the icons without the plugins, you mentioned at the beginning that we only need to import 3 folders from the dist file, but thats not the case, in addition you actually need to add the plugin folder too. so anyone whos wondering why the icons are not working just add the plugin folder with the other ones.
thanks
great article by the way.
Wendollin
December 23, 2020Excellent article, so clear and detailed!! Thanks for explain all the details walk through, it really helped me!
emre
January 18, 2021Excellent article. Thanks