Metronic MVC Integration

Metronic MVC Integration Main

In this blog post we are going to explain how to integrate Metronic admin theme into a newly created ASP.NET MVC web project.

First we need to create an empty ASP.NET MVC project. In order to do that, open Visual Studio and navigate to File > New > Project . In the opened dialog select ASP.NET Web Application and click OK. After that another dialog will be showed up. Select Empty project template and MVC checkbox in this dialog.

Empty MVC Project

After creating the empty project, lets create a Controller named HomeController. In order to do that, right click to Controllers folder and navigate to “Add > Controller” and enter the name “HomeController” in the opened dialog.

This action will create an empty MVC Controller for us.

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
}

Next, lets create our view for HomeController’s Index action. Right click the “View()” text in Index action and click to “Add View” menu item from opened context menu.
Then, select “MVC* View” (* is the version of MVC you are using) and click Add button. It will open a dialog like this one. In this dialog view name must be Index and “Use a layout page” checkbox must be checked. Click Add to create our view.

Add MVC View

Visual studio will create Index.cshtml and two other files because we selected to use a layout page and Empty MVC template does not have a Layout by default.

Index View Created

We will put metronic content into _Layout.cshtml file under the “Views\Shared” folder.

Lets add metronic content to our _Layout.cshtml. To do that, navigate to metronic theme folder and find the file “layout_blank_page.html” under the metronic version folder you liked to use. I’m using Admin4 with material design for this blog post, so I used the content of “..\theme\admin_4_material_design\layout_blank_page.html“.
Copy it’s content, remove content of _Layout.cshtml filed and paste it into _Layout.cshtml file.

After that, find the div with class=”page-content” in your _Layout.cshtml and replate it’s content with @RenderBody()

Your page-content div should look like this.

<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
    <div class="page-content">
       @RenderBody()
    </div>
    <!-- END CONTENT BODY -->
</div>

If we run the project now, we will see an ugly page because we haven’t added the metronic files yet. So in order to do that, lets first create a folder name “metronic” in our solution.
Then copy all the folders from “..\theme\assets\” in metronic theme to the newly created metronic folder of our solution and include them to our solution.

After that, we need to fix the css and javascript references in our _Layout.cshtml file. For example, font-awesome css file is included like this.

<link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

So, we change it like this,

<link href="~/metronic/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

You have to do it for all the css and javascript files in _Layout.cshtml file. And we basically integrated metronic to our Empty ASP.NET MVC solution.

After this point, you can delete the parts in the _Layout.cshtml files you dont want to. You can also bundle and minify css and javascript files and use them in your _Layout.cshtml file.

Of course, for a real life application you will need to connect your application to a database. You will need User Management, Role Management, Validation, Logging, Exception handling, Caching and much more :).

Luckily, there is a product named ASP.NET Zero which is integrated with Metronic by default and provides so many features out of the box..

ASP.NET Zero is a starting point for new web applications with a modern UI and solid architecture. It saves your time by providing pre-built and working pages and a strong infrastructure. For more detials please visit Asp.Net Zero website.