How to integrate SmartAdmin into ASP.NET MVC 5 – Part 1

How to integrate SmartAdmin 1.4.x into ASP.NET MVC 5 – Part 1

Vote Up

+7

Vote Down

Closed

Public

Tutorial

Ashbjorn asked July 30, 2014

Hello SmartAdmin fans!
I hope that the following quick how-to will get you started in integrating SmartAdmin inside MVC.  It will be a multi -part guide that will slowly dive deeper into enabling all the wonders that MVC has to offer, and in this Part 1 of the guide we will be setting up our developement environment with the end goal of having a website that looks and behaves exactly as the template does running on the MVC framework!
Table of Contents

• PART 1 : Setting up the environment
• PART 2 : Adding Koala and Web Essentials for on-the-fly LESS and JS integration
• PART 3 : Restructuring the template into partial views
• PART 4 : Adding the Login and Register page to our MVC website
• PART 5 : Adding Forms Authentication to our MVC website

Prerequisites
For the how-to’s I am asuming the availability of the following software, already installed and configured with their default settings:

• Visual Studio 2013 — For creating the project structure and hosting the website locally (http://www.visualstudio.com)
• Web Essentials 2.2 — For helping us in creating a fluent editing environment/experience (available inside VS2013 through Tools -> Extensions and Updates)
• Koala 2.0.3 — For compiling and minifying the LESS and JS files on-the-fly (http://koala-app.com)
• SmartAdmin 1.4.1 — The template of choice! (other and earlier versions might work but files and locations can differ)
• Basic knowledge — This goes for HTML5, CSS, jQuery and C#
• Your music of choice — I always feel that having good music in the background helps me develop (http://www.di.fm)

For Visual Studio 2013 it is highly recommended to install Update 2; Web Essentials 2.2 was optimized for this version and is assumed to have been installed throughout this guide.
Step 1 : Setting up the environment
Note: If you follow these steps you should end up with the exact same end-result as I have been able to, I understand that it can be hard without any screenshots or a reference project, but I will make these available in due time, please be patient!

1. Open the Visual Studio 2013 edition of your choice
   • The edition should not matter, but I am using Premium so certain commands could be slightly different
   • I will be going through my own tutorial in Express edition to make sure it’s usable for hobby developers
2. Goto: File -> New -> Project
   • Choose: Visual C# -> Web -> ASP.NET Web Application
3. Choose the location to store your project or use the suggested default location,give it a better name and press OK
   • Suggestion: website or webapp
4. In the following window select the “Empty” template option
   • We do this to prevent VS from adding the default Nuget packages and site structure, which would require a lot more work to get SmartAdmin ready
   • This is also to ensure that the SmartAdmin nuglets are not overwrriten with newer and possibly incompatible versions (ie, jQuery and Bootstrap)
5. Ensure that the core references for “MVC” are selected
   • We do actually want to create an MVC site, but we have no interest in the default project template
   • This is because we have a much better one available (Woohoo!)
6. In the Authentication section select: No Authentication
   • Integration with (forms) authentication will be explained in a later step
7. Press OK and sit back while Visual Studio prepares your project for use
   • This will create and empty MVC 5.1 website (when Update 2 is installed)
   • If you want, you can use the Nuget Package Manager to update to MVC 5.2

Now we have to perform some custom actions to make the default MVC environment more SmartAdmin friendly,  we do this by adding some of the template resource folders to the project:

1. Press WIN+E and browse to the folder where you have unpacked your SmartAdmin template
2. Go inside the folder: \DEVELOPER\HTML_version\
3. Press WIN+E again and browse to the location where your project was created/saved
4. Your Visual Studio project/folder structure should look like this:
   • /packages/ (Added by Visual Studio when creating the MVC project)
   • /website/ (This is the name we gave to our project)
   • SmartAdmin.sln (the name of the Visual Studio solution, which I renamed after creation)
5. Go inside the folder: website
6. Copy the following folders from your HTML_version template folder into your project folder
   • css
   • fonts
   • img
   • js
   • sound
7. Now go back to your Visual Studio and, with the project selected in the Solution Explorer, click on the: “Show All Files” button in the upper right corner
   • This will list all (hidden) files/directories on disk but that are not currently part of your project
8. CTRL + left-click each folder mentioned in step 6 and then right-click and choose: Include in project
   • This will ensure that when you build and deploy your website all neccesary (resource) files are included and available

Now that we have our assets in place we need to start making some MVC changes to the website project that we created so that the template pages can be loaded and preferably looks exactly like when you double-clicked index.html!

1. Go back to the Solution Explorer inside Visual Studio and select the “Views” folder
2. Right-click and choose: Add -> MVC 5 Layout Page (Razor)
3. Name the file: “_ViewStart” and press OK
4. Select all its content by pressing: CTRL+A and replace it with the following lines:
   • @{
   •     Layout = “~/Views/Shared/_Layout.cshtml”;
   • }
   • Note: Normally this is done for you when you choose to create a default MVC site but it requires a lot of work to clean-up before you can use it with SmartAdmin
   • This references a specific path and file, so we have to create them
5. Right click the “Views” folder and using right-click, add another folder called: “Shared“
6. Right click your new folder and select: Add -> MVC 5 Layout Page (Razor)
7. Name the file: “_Layout” and press OK
8. Select all its content by pressing: CTRL+A and delete it!

I hope you are still with me, it may seem like an aweful lot of preparation, but this is a one time deal, promise! So now this is were the real integration work begins, since we have already done the grunt work by preparing our environment we can start to create our “routing” folder setup so we can see the template in action! For the sake of this how-to we are going to use the “blank_.html” template as our basis, you can use any page you want, but you will have to do some more work to arrive at the same steps, it should however be much easier to adapt the approach demonstrated in this guide to add additional content using the other template pages after you have followed all the steps outlined in this guide. Use the following steps to setup our initial “landing” page for MVC using the SmartAdmin blank_.html template file:

1. Press WIN+E and browse to the folder where you have unpacked your SmartAdmin template
2. Go inside the folder: .\DEVELOPER\HTML_version\
3. Find the file: “blank_.html” and open it in any editor (notepad will do just fine)
4. Select all its content by pressing: CTRL+A, and copy it to the clipboard by pressing: CTRL+C
5. Now go back to Visual Studio and CTRL+V inside the earlier created  “_Layout.cshtml” file
   • Optionally you can press CTRL+K+D to format the file to your preferred formatting settings (spaces, line breaks and tabs etc)
6. Using the handy provided table of contents inside the HTML-source we can locate the “MAIN CONTENT” section
   • Using CTRL+F will speed things up here
7. Find the section named “widget grid” (should be line 679)
8. Fold the section by pressing the “[-]” button inside the editor on the left side of the <section> tag
9. Now select all lines that are related and/or contain the word widget and press delete
   • For the purpose of this how-to we will not need the widgets
   • This spot is perfect for our MVC integration! (Sorry Jarvis!)
10. In the big empty void left behind by our wild and impulsive action, paste the following codelet:
    • @RenderBody()
    • MVC needs this to serve as a “locator” to know where the contents for each page are injected into

So close you can almost taste it, AAAAAAAAH! Just a little more patience folks, Soon(tm)! Since by default MVC assumes you have a “/home/index” page/route available we have to full-fil this requirement in order to see anything at all in our browser. Of course you can change this around to any name you like, just be sure to change it throughout the MVC structure (Controller, View, Route). Without this default page, even if it’s completely empty, your site will not work and not show anything, so let’s add one shall we?

1. Go back to Solution Explorer inside Visual Studio and select the “Views” folder
2.  Right click and select: Add -> Folder
   • Create a folder named: “Home“
3. Right click the “Home” folder and select: Add -> MVC 5 View Page (Razor)
   • Name the file: “Index” and press OK
4. Select all its content by pressing: CTRL+A and delete it (we seem to be doing this a lot!)
5. In the Solution Explorer now select the “Controllers” folder
6. Right click the on the “Controllers” folder and select: Add -> Controller
7. In the new window that shows, select: MVC 5 Controller – Empty and click “Add”
   • Change “DefaultController” to “HomeController” and click “Add”
   • A default action “Index” is created for us automaticaly which will match our created Index.cshtml view earlier, great!
8. Press CTRL+F5
   • This should launch the website using a local built-in webserver

You’ve done it!
SmartAdmin integrated into MVC in a very basic way, but none the less a victory!  Now you might notice the spinner and loader bar taking a very very VERY long time to complete, but this partially because of the Web Essentials panel being “injected” into our site source code and an odd limitation of IIS Express it seems, but I cannot completely confirm this. However as this panel enables on-the-fly loading of resource files (CSS and JS), we will leave it enabled for now.
In Part 2 of this article series we will be using the Koala tool to help us manage the LESS and JS files and create compiled and minified CSS and JS files for use within our MVC project, as well as enable/use Web Essentials to allow our site to be magically refreshed everytime we edit an unminified LESS or JS file from our assets folder!
Hope this helps!