How to Convert an HTML page into an ASP.NET MVC

Fundamentally an ASP.NET page is just the same as an HTML page. An HTML page has the extension .html where as an ASP.NET page has the extension .aspx. If you want to be a good web designer and are interested in a simple step-by-step explanation of how to convert an HTML page into an ASP.NET MVC Page, then keep reading.

Getting Started with step by step instructions!

1. Open the Visual Studio  (Recommended Version: Visual Studio Community 2015) and start with making a New Project and give it a name. 

If you're new at visual studio then no need to be worry, it is as easy as making a tea.

You just need to hold your horses. ;)

2. Choose ASP.NET Web Application from the New Project window. Change the the project name of your desire. Set the location of your project if needed and then click OK without making any other change.

3. Now choose the Empty ASP.NET template from the New ASP.NET MVC Project window. Below that you will see Add folders and core references for options. There you have to check the MVC as you are going to convert your html template into ASP.NET MVC. If you're done with this press OK to proceed.

4. Right click on your project name in solution explorer Add > New folder and name it as Scripts. Basically in ASP.NET script folder contains JavaScripts or VBScript files for the whole website. 

Similarly make another folder named Content in which you will add CSS files. You need to make two more folders for images and fonts. Now its time to populate these folders. It is very simple! Go to your HTML Template folder and copy the images and paste them into the images folder of your project. You have to do the same for other folders.

5. Add HomeController:
From here the technical part starts. You have to pay more attention on it. Right click on the Controllers folder and add a controller. i.e: Add> Controller. 

6. Select  MVC 5 Controller - Empty and Press OK.

7. There you have to set the controller name. By default it will give it a name as DefaultController. Lets rename it. We would prefer to name it as HomeController.

Note that every controller must contain the extension of Controller at its end. 

8. The controller file in our application HomeController.cs, defines the two controls Index and About. 
Open the HomeController.cs file. Add views by right clicking on ActionResults  and add a view. i.e: ActionResult>RightClick> Add views.

The Views folder stores the files (HTML files) related to the display of the application (the user interfaces). These files may have the extensions html, asp, aspx, cshtml, and vbhtml, depending on the language content.

9. Leave the name as it is. Select the Empty(Without model) template for the time begin. I will teach you more about other templates on next blogs. lets focus on it for the time being. Check the Use a layout page option and hit Enter!

This will create two folders one is  Home and second one is Shared folder inside the Views folder. The Home folder stores application pages like the index page (home page) and the about page.The Shared folder is used to store views shared between controllers (master pages and layout pages). 

10. In Index.cshtml, you will add all the dynamic content of the index.html page of your template. This is RenderBody part.

11. In _layout.cshtml file, you have to add all the static part of your website. e.g header and footer.
Copy and paste all the links inside the head tag. 

12. And inside the body tag, put the header and the footer. In the middle of the header and the footer you have to add the following code which points towards the RenderBody part of each page.

<div>
 @RenderBody()
</div>

13. There is another most important thing! You need to replace the following text.

• /images/ to ~/images/
• /css/ to ~/content/
• /js/ to ~/js/
• /fonts/ to ~/fonts/

Press CNTRL+ALT+H to open the Find and Replace window and then you can made the change.

You have to do the same with all page one by one. Always Look in: Current Document  to save yourself from bigger errors. :D

14. Now it's time for magic! :D Press CTRL+F5  and BOOOOOOMMM!!!!