Asp.net Sample Master Pages

Posted on by  admin
Asp.net Sample Master Pages 6,5/10 3701 reviews

ASP.NET master pageWhen we want the same layout for different web pages in a application, then we can use the asp.net master page. Instead of creating the same layout in all pages we can simple add an master page in the application and create the layout in the master page. So that the layout will be applied to all the content pages (web pages that uses the master page).Advantages of master page:. Reduces the re-work, i.e. Common layout that we give in master page will applied to all the web pages, no need to write it in individual pages. Easy maintenance, i.e. Any changes need to be done in the layout if we update in the master page automatically applied to all the web pages.

  1. Asp.net Sample Master Pages Online

Common controls placed in master page will be applicable to all the pages. Ex: menu bar, search,.Sample master page. <%@ Master Language='C#' AutoEventWireup='true' CodeFile='MasterPage.master.cs' Inherits='MasterPage'%

Page Level:In page directive of content page we can define the master page.

Master pages in ASP.NET work as a template page. All aspx pages can refer master pages.

With the help of Master pages we can define the look and feel of all the pages in our web site in a single location. If we have done changes in master page, then the changes will reflect in all the web pages that refer to master pages.ASP.NET web page that uses master page for common UI, is called as content page. Content pages merge with the master pages at compile time to produce final output. The final page combines the layout of the master page with the content from the content page.Before Master pages feature in ASP.NET, developers created consistent web pages by using custom controls, CSS and JavaScript. Now developing consistent web pages are very easy with the help of Master pages. You can dynamically change the common UI part on master page from content pages.A master page has the extension.master that can comprise static text, HTML elements, and server controls.

Asp.net Sample Master PagesMaster

A master page is similar to an ASP.NET page but it contains @Master directive at the top and one or more ContentPlaceHolder server controls.Master page inherits from the MasterPage class.ContentPlaceHolder is an important control that is related with master page.ContentPlaceHolder control is available only on master page. You can use more than one ContentPlaceHolder control in master page. ContentPlaceHolder control is used on master page to customize or add some controls on the content page as follows:The page-specific content is then put inside a Content control that points to the relevant ContentPlaceHolder. <%@ Master Language='C#' AutoEventWireup='true' CodeFile='MasterPage.master.cs' Inherits='MasterPage'%Page

You can set this value inside the master page and then make it available to content pages as a property of the master page.We will follow the following steps to reference the properties of master page from content pages.Following is the process to reference master page properties from a content page:1. Create a property in the master page code-behind file.2.

Add the @ MasterType directive to the.aspx content page and set the virtual path.3. Use Master syntax to refer master page property from the content page.Step 1: Create a property in the master page code-behind file. <%@ Page Title=' Language='C#' MasterPageFile='∼/MasterPage.master' AutoEventWireup='true' CodeFile='Default2.aspx.cs' Inherits='Default2'%<%@ MasterType VirtualPath='∼/MasterPage.master'%Step 3:Once you add the @ MasterType declaration, you can reference properties as follows.string Name = Master.UserName;string emailID = Master.UserEmailID;For referencing controls in the Master Page we will write the following code.Content Page Code.For accessing controls, those are located at master page, from content page, use Master.FindControl method.

SkinFile TextBox.skinHere skin file name is TextBox.skin. There is no restriction to provide the name of skin file, but we should provide the name according to control, so it can be easily distinguishes to other skin file. We can create more than one skin file in a skin folder.Now attach this skin file at the page directive as given below.<%@ Page Language='C#' AutoEventWireup='true' CodeFile='Default.aspx.cs' Inherits='Default' Theme='SkinFile'%There are three textbox controls in Default.aspx page. Because we have applied the skin file at page level, therefore when we run our application all textbox will appear as given below.Creating Named SkinsThis skin is called as default skin because it is applied to all control of certain type. For example, the above Skin is applied to every instance of a TextBox control. Note that we have not provided any ID to skin but runat='server' is compulsory.You can also create named skin by providing the SkinID attribute.

The SkinID property represents the name of the Named Skin. If you have created a Named Skin, then you can decide in which particular control, you want to apply the Skin.The Default Skin does not contain a SkinID property. In the given example, the first textbox is not associated with a Named Skin, therefore the Default Skin is applied to the first TextBox on default.aspx page.

Asp.net Sample Master Pages Online

Set the skinID property of second and third textbox programmatically or from property window. Execute the application you will get the following output.Server control has the property EnableTheming. By default its value is true. If you want that theme should not apply with particular control, then set EnableTheming=false.Adding Cascading Style Sheets to ThemesYou can also use Cascading Style Sheets into the Theme folder.

It is used to manage the appearance of HTML and ASP.NET controls contained in a page. Adding a Cascading Style Sheet to Theme is same as we add skin file. Right-click on the theme in Solution Explorer and select Add New Item and then select the Style Sheet item template. Provide the name of Theme according the need. I have provided the name CSSTheme.The following is the simple style in a style sheet.

Comments are closed.