Converting HTML Website to ASP.NET

  • Article

What you will learn:

In this article you’ll learn how to convert an HTML website into ASP.NET within few minutes. You’ll also learn how to use themeforest templates without paying a single penny.

Why we are converting HTML to ASP?

After reading the title you might thinking that why there’s a need of converting an HTML website into ASP so the answer is that if you want your static website to become dynamic then this is the way to do that. You can’t connect a Database with your HTML website because it requires server side scripting so to do that we need ASP (Active Server Pages).

Before proceeding further it is important to understand few things which we’ll need every time when we are going tocreate any ASP.NET website and the things are:

Master Page

ASP.NET master pages allow you to create a consistent layout for the pages in your application. A single master page defines the look and feel and standard behavior that you want for all of the pages (or a group of pages) in your application.You can then create individual content pages that contain the content you want to display. When users request the content pages, they merge with the master page to produce output that combines the layout of the master page with the content from the content page.

**Remember: **Master pages are consist of two pieces, the master page itself and one or more content pages.

http://bilalamjad.pw/media/uploads/2014/07/htmlpage-251x300.jpg

Fig 1: A sample web page

In easy words, the things which are static in your entire website and you need them repeatedly in different pages of your website then you’ll declare them in the master page.

For example think of the headers and footers (or sidebars) of any website, they remain the same through out the development so just define them in a master page once and then you can use them in your content pages easily without writing any kind of code again. See the figure 1.
If you are creating any ASP.NET based website then the headers,sidebar and footer shown in the figure 1 will be the part of the Master Page and the content area will be the part of our content page.

Hope you get the idea of master and the content page and now lets see how we can perform HTML to ASP Website conversion.

HTML to ASP.NET Conversion

  1. In your Visual Studio create an empty ASP.NET Web Application Project.

  2. Now open the folder where you have html theme files and select all those files which you need in your website and just drag & drop into your project as shown below:
    http://bilalamjad.pw/media/uploads/2014/07/draganddrop-1024x545.jpg
    It might possible that  when you drop your files in the project they disappear so see the figure below to resolve this problem if your files disappeared.
    http://bilalamjad.pw/media/uploads/2014/07/import-files-1024x546.jpg

  3. Now its time to create a MasterPage and relative Content pages, so right-click on your project name ->Add-> New item -> Web Forms Master Page and click Add button as shown below:
    http://bilalamjad.pw/media/uploads/2014/07/masterpage-1024x501.png

  4. Now open any of the HTML file of the theme you just imported, i’m opening Index.html from my files.

  5. Now copy everything from the start (i.e. from <!DOCTYPE html> tag) to the end of header, in our case the end of header will be at the closing div(/div) of <div id=”header-wrapper”>. As shown below:
    http://bilalamjad.pw/media/uploads/2014/07/htmlcopypaste-1024x548.jpg

  6. Now open your maste page and paste the copied code (code which you copied in step 5) and paste it after the proper selection from the beginning of <!DOCTYPE html> tag  till *<form id=”form1″ runat=”server”> *as shown below:
    http://bilalamjad.pw/media/uploads/2014/07/copypaste-1024x527.jpg
    So we have added a header to our Master page, similarly we have to add the footer.

  7. For adding the footer copy everything  from the start of footer tag <footer> till the end of your index.html file as shown below:
    http://bilalamjad.pw/media/uploads/2014/07/footer-1024x548.jpg

  8. Now go back to your master page and paste the code you copied in step 7 from </form>  tag till the end of file as shown below:
    http://bilalamjad.pw/media/uploads/2014/07/footerpaste-1024x545.jpg

  9. Now lets create a Content Page, for that right-click on your Project Name in the solution explorer and select Add -> New Item->Web Form with Master Page and give it a name “index.aspx” shown below:
    http://bilalamjad.pw/media/uploads/2014/07/addcontentpage-1024x531.jpg
    When you’ll click add button another dialog box will be appeared asking for you to select the master page, then just select the master page to which you want to add the content page, in our case its Site1.Master as shown below:
    http://bilalamjad.pw/media/uploads/2014/07/whichmasterpage-1024x546.jpg

  10. After adding a content page, go back to your index.html file and copy everything except headers and footers because we have added the headers and footers to our master page now we don’t need to create them in any of our content page.See the following figure:
    http://bilalamjad.pw/media/uploads/2014/07/content-1024x549.jpg

  11. Come back to your content page (idex.aspx) and paste the copied code (code copied in step 10) inside

    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

</asp:Content>

    tag as shown below:

    http://bilalamjad.pw/media/uploads/2014/07/pastehere-1024x547.jpg

  12. That’s all you have converted your index.html page to index.aspx.

  13. Now right-click *index.aspx *file in Solution explorer and select view in browser option to view the file if it is working correctly or not.

  14. Now the task for you guys is to convert the remaining pages from html to aspx. HINT: You have to just copy the content code from HTML file and have to paste in the aspx file inside the ContentPlaceHolder tags as we did in index.html to index.aspx conversion. No need to copy/paste the headers and footers and creating a new master page.
    Begin your task from step 9.

  15. After you’re done with step 14 go to MasterPage and in the header section find your navigation menu and change the navigation url from index.html to index.aspx, about.html to about.aspx and so on.

  16. Once You are done with step 15, start your website if an error occur asking for default file then just rename the index.aspx to default.aspx and the website will be executed and will work perfectly (Hope So…).You can download the sample project in which i have converted the theme from html to aspx from the link given below:
    Download the sample project

Hope you guys understand the conversion of HTML website to ASP.NET. If you find any problem feel free to ask as i’m always waiting for your feedbacks.