Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Part 146 - Why use master pages in asp.net

Suggested Videos
Part 143 - Difference between http get and http post methods
Part 144 - How to check if the request method is a GET or a POST in MVC
Part 145 - Implementing autocomplete textbox in asp.net web forms



It is common for a web site to have a consistent look and behaviour across all the pages in the web application. For example, we want all the pages in our application to have the layout as shown below.
layout of a web site without using master pages



To have a layout (similar to the one above) across all our pages, without the use of master pages. There are 2 options
Option 1: Copy and paste the following HTML across all pages in the application
<table style="font-family:Arial">
    <tr>
        <td colspan="2" style="width:800px; height:80px; background-color:#BDBDBD; 
            text-align:center">
            <h1>
                WebSite Header
            </h1>
        </td>
    </tr>
    <tr>
        <td style="height:500px; background-color:#D8D8D8; width:150px">
            <h3>Menu</h3>
        </td>
        <td style="height:500px; background-color:#E6E6E6; width:650px">
            <h2>This section changes on a page by page basis</h2>        
        </td>
    </tr>
    <tr>
        <td colspan="2" style="background-color:#BDBDBD; text-align:center">
            <b>Website Footer</b>
        </td>
    </tr>
</table>

The following are the problems with this approach
1. We have lot of duplicated HTML on every page
2. If we have to change something in the common layout, we will have to make the change in all the pages, which is time consuming and error prone.

Option 2: Implement the layout using the following user controls.
1. Header user control
2. Menu user control
3. Footer user control

The following are the problems with using user controls
1. We will end up with complicated HTML and CSS if we have to design the layout similar to the one in the above image
2. All the user controls have to be manually added on each and every page of the site

So, the best approach to have a consistent look and feel across all pages in a web application is to use master pages. We will discuss master pages in our next video.

4 comments:

  1. Great job Venka...Will you do this for MVC as well?

    ReplyDelete
    Replies
    1. In MVC master pages are called as layout files. I think I have covered this already in MVC. Please check and let me know, if I have missed. Good Luck.

      Delete
  2. Hi sir Thanks a lot for ur videos and could you pls post some videos on designing web forms as you wastly experinenced,your tips for designing web forms(for eaxmple "align=center") as a asp.net programmer will be helpful and also writting css and applying them to our web forms are greately helpful to design better ui...

    ReplyDelete
  3. Dear Venkat,

    Thanks for providing videos related to c# ,asp.net ,Ado.net etc...
    just because of you I understood lots of basic things. Still some parts are need to understand and I know I will manage it by your published videos...
    Thank you so much.....

    ReplyDelete

It would be great if you can help share these free resources