Share via

ASP.NET - A Jumpstart towards Dynamic Websites

**        Pre-requisites**

  •   Visual Studio 2010 (or higher)
  •   Knowledge of HTML

 

You must have wondered about Websites one time or another in your cyber journey, right? Well, Websites come with two distinctive natures, i.e. Static websites and Dynamic websites. Static websites where data is simply available to the users within a fixed number of pages and there is no such database connected to the system which would give a dynamic edge to the website.

 

Dynamic Websites, the second flavor, have expanded the palate of static websites in a way that now the system comes connected with a database which has the ability to dynamically transform the map of an existing website. The uniform theme is not an issue now. Users can introduce foreign themes. The content flow can be dynamically steered instead of mounting (“Publishing” technically) the whole website again and again which was the case with Static websites. PHP and ASP.NET –Server application Languages– are most commonly used by qualified developers to create Dynamic websites. Content Management Systems, E-commerce and online examination websites are mostly build using this technology where the content is frequently altered.  The image below identifies some of the differences between Dynamic and Static Websites:

 

Static Websites

Dynamic Websites

1

Quick to develop.

Time-consuming development.

2

Not easily updated.

Easily update-able.

3

Web Development skills.

Web Development skills not necessarily required in every case.

4

Fixed number of pages.

Number of pages can increase/decrease even after Publishing.

5

Commonly developed in HTML.

ASP.NET, Ruby on Rails, PHP and Python are frequently used.

6

Same view for each visitor.

View may change for every user.

7

No Database connectivity.

Database connectivity.

**
**

**
**

Static to Dynamic Conversion

We’ll be using ASP.Net (C# specifically) as our server application language and Visual Studio 2013 Ultimate Edition as our IDE (Integrated Development Environment) to cook our codes.

 

Template

Before jumping straight onto your IDEs, let’s first download a static pre-defined HTML template from the below mentioned link:

 

Link:

http://www.templatemonster.com/free-html5-templates.php

 

 

 

 

 

 

 

 

 

Download the template named “Design Company” without its PSD sources. Extract the compressed file and copy all the content from the “site” folder to your clipboard using Crtl+c.

 

ASP.NET Web Application

Now go to your Visual Studio and create a new project of “ASP.Net Empty Web Application” from C-sharp’s (C#) web templates. Paste all the content from your clipboard into your project in the Solution Explorer.

Add two new items “Web Forms Master Page” and “Web Form with Master Page” in your project. “Web Forms Master Page” can be briefly stated as the common (shared) theme source for all the pages that they will share while representing their content. “Web Form with Master Page” work in correspondence to the simple Master Page (the theme page) and act as the content holder for the pages. Both these entities collaborate to display a web page.

 

Now back to Visual Studio. Notice that you have an HTML file named “index” in your project which came from the template folder you downloaded a while ago. Open that file and follow the steps listed below:

  • Copy the content that the <head> tag is holding within its boundaries.
  • Paste that content as it is in the <head> tag of “Web Forms Master Page” that you added to your project earlier, after removing the content that existed before.
  • Remember, do not remove the <ContentPlaceHolder> tag from that Master Page (Web Forms Master Page) while pasting the new content.
  • Now go back to that “index” file and copy the content from the <body> tag and follow the same drill that you performed with the <head> tag, but this time it would be with the <body> tag, of course.
  • Once you have laid out the <body> tag in the Master Page, make an effort and locate a comment “gallery” representing a lengthy section under it. Shrink that section (the one under “gallery”) and cut it to your clipboard from the <body> part of this Master Page.
  • Now move to the other item that you added in the start i.e. “Web Form with Master Page”. Locate the second content placeholder, probably with the ID “Content2”, and paste the content from your clipboard that you just cut from the simple Master Page’s <body> tag.
  • Build your project and it will open in your selected web browser.

 

Voila!! This is the Dynamic version of the Static website template that you downloaded from the link. ASP.NET divided that HTML file into two segments: A Master Page with a commonly available theme throughout the project and a several number of Web Forms with Master Pages that contain the content and place it dynamically at runtime into the location specified by the Master Page. We introduced a single “Web Form with Master Page” for the time being, but you have the liberty to add as many as you want depending upon your need.

 

Difference

You must have observed that there is no such visible difference between the Static and Dynamic versions of this template. That is because we only have altered the nature of the Static version, not its content. There is some technical difference thought which is listed in the table:

 

 

Static version

Dynamic version

1

Same code (HTML) for Layout on each page creating redundancy.

A single code (HTML) file for multiple pages who share a common layout.

2

Layout and Content fetched together.

Layout loads before Content. Then content is fetched during run-time.

3

Slow rendering due to lengthy and redundant code.

Quick rendering comparatively due to lesser code.

 

 

 

 

 

 

 

 

 

Remarks

We have seen how simply a Static Website can be converted to a Dynamic nature. Dynamic Websites is a vast area which stretches a lot of limits that we had in case of Static Websites. The article served as a jumpstart for folks who are interested in building strong and well-structured Websites. So, this was a trigger for you guys. Dig this subject even deeper, there is a lot to explore yet.