Tuesday, February 2, 2010

What is difference between master page and web user control?

Master Page: - A master page enables us to share the same content among multiple content pages in a website. We can use master page to create a common page layout. For example if we want all the pages in our web site to share a three – column layout, we can create the layout once in a Master Page and apply the layout to multiple content pages.

We can also use Master Page to display common content in multiple pages. For example, if we want to display a standard header and footer in each page in our website, then we can create the standard header and footer in a Master Page.

If we need to add a new page to our website that looks just like the other pages in our website, then we simply need to apply the same Master Page to the new content page. If we decide to completely modify the design of our website, we do not to change every content page. We can modify just a single Master Page to dramatically change the appearance if all the pages in our application.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MultipleContent.master.cs" Inherits="MultipleContent" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Multiple Content Master Page</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <img src="apress.jpg" alt="aprees" /><br />
        <asp:ContentPlaceHolder id="MainContent" runat="server">
       
        </asp:ContentPlaceHolder>
        <i>
        <b>OTHER LINKS</b>
        <br />
        <asp:ContentPlaceHolder ID="OtherLinksContent" runat="server">
        </asp:ContentPlaceHolder>
        This is a simple footer.
        </i>
    </div>
    </form>
</body>
</html>
There are two special things about the master page. First the file contains < %@ Master %> directive instead of the normal <%@ Page %> directive. Second the Master Page includes ContentPlaceHolder controls.

When the master page is merged with a particular content page, the content from the content page appears in the areas marked by ContentPlaceHolder controls. We can add as many ContentPlaceHolders to Master Page as we need.

Note: - 1) There are some things that we can’t do with master page that we can do in a content page. For example, we can’t cache a master page with the OutputCache directive. We also can’t apply a theme to a Master page.
    2) The Master Page uses cascading style sheets to create the page layout. We could strive to avoid using HTML tables for layout. HTML tables should be used only to display tabular information.
3) The content page does not contain any of the standard opening and closing XHTML tags. All these tags are contained in the Master Page. All the contents contained in the content page must be added with content controls.
4) We must palace all the content contained in a content page within the Content Controls. If we attempt to palace any content outside these controls, you get an exception.
5) The content control includes a ContentPlaceHolderID property. This property points to the ID of a ContentPlaceHolder control contained in the Master Page.
6) Within a Content control we can place anything that we could normally add to an ASP.NET page, including XHTML tags and ASP.NET controls.
<%@ Page Language="C#" MasterPageFile="~/MultipleContent.master" AutoEventWireup="true" CodeFile="MultipleContentPage.aspx.cs" Inherits="MultipleContentPage" Title="Content Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
This is the generic content for this page. Here you might provide some site
specific text......
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="OtherLinksContent" runat="server">
Here's a <a href="http://www.prosetch.com">link</a><br />
</asp:Content>

The master page is associated with the content page through the MasterPageFile attribute included in the <%@ Page %> directive. This attribute contains the virtual path to a Master Page.

When building a large website, we might need to create multiple levels of Master Pages. For example, we might want to create a single site - wide Master Page that applies to all the content pages in your website. In addition, we might need to create multiple section – wide master page that apply to only the pages containded in a particular section.We can nest master page as many levels as we need.

Web User Control: - A Web User Control enables us to build a new control from existing controls. By taking advantage of User controls, we can easily extends the ASP.NET Framwork with our own custom controls.

Imaging, for example, that we need to display the same address form in multiple pages in a web application. The address form consists of several TextBox and validation controls for entering address information. If we want to avoid declaring all the TextBox and Validation control in multipls pages, we can wrap these controls inside a Web User Control.

Anytime we discover that we need to display the same user interface elements in multiple pages, we could consider wrapping the elements inside a User Controls, we make our website easier to maintain and extend.

Note: - 1) User controls are closely related to ASP.NET pages. Both the UserControl class and the page class derive from TemplateControl class. Because they derive from the same base class, they share many of the same methods, properties, and events.
      2) The important difference between an ASP.NET page and User control is that User Control is something that we can declare in an ASP.NET page. When we build a User Control, we are building a custom control.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="LinkMenu.ascx.cs" Inherits="LinkMenu" %>

<div>
    Products:<br />
    <asp:HyperLink ID="lnkBooks" runat="server"
        NavigateUrl="MenuHost.aspx?product=Book">Books</asp:HyperLink>
    <br />
    <asp:HyperLink ID="lnkToys" runat="server"
        NavigateUrl="MenuHost.aspx?product=Toys">Toys</asp:HyperLink>
    <br />
    <asp:HyperLink ID="lnkSports" runat="server"
        NavigateUrl="MenuHost.aspx?product=Sports">Sports</asp:HyperLink>
    <br />
    <asp:HyperLink ID="lnkFurniture" runat="server"
        NavigateUrl="MenuHost.aspx?product=Furniture">Furniture</asp:HyperLink>
</div>

Web User Controls file ends with .ascx extention. We can’t request this file directly form a web browser.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MenuHost.aspx.cs" Inherits="MenuHost" %>
<%@ Register TagPrefix="apress" TagName="LinkMenu" Src="~/LinkMenu.ascx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Menu Host</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
        <table>
            <tr>
                <td>
                    <apress:LinkMenu ID="Menu1" runat="server" /></td>
                <td>
                    <asp:Label ID="lblSelection" runat="server"></asp:Label></td>
               
            </tr>
        </table>
   
    </div>
    </form>
</body>
</html>

The page in which we are using Web User Controls includes a <%@ Register %> directive that contains the following three attributes:
1)    TagPrefix – Indicates the namespace that we want to associate with the User control for the current page. We can use any string that we want.
2)    TagName – Indicates the name that we want to associate with the User Control for the current page. We can use any string that we want.
3)    Src – Indicates the virtual pathe to the User control (the path to the .ascx file).
Note: - Any properties that we add to a User control appears in both intellisense and the Property window.

2 comments:

  1. Hi,The process of Web Design Cochin often involves creation of a mockup, which provides an idea of the layout of the Web page. Once the mockup is finalized the graphics are created and the coding of the Web page can be done using a mark up language such as hypertext markup language, or HTML.
    Thanks......

    ReplyDelete