Introduction
One trait of a well-designed website is a harmonious point-wide runner layout. Take the thewww.asp.net website, for illustration. At the time of this jotting, every runner has the same content at the top and bottom of the runner. As Figure 1 shows, the veritably top of each runner displays an argentine bar with a list of Microsoft Communities. Beneath that's the point totem, the list of languages into which the point has been restated, and the core sections Home, Get Started, Learn, Downloads, and so forth. Likewise, the bottom of the runner includes information about advertising onwww.asp.net, a brand statement, and a link to the sequestration statement.
Another trait of a well-designed point is the ease with which the point's appearance can be changed. Figure 1 shows the thewww.asp.net homepage as of March 2008, but between now and this tutorial's publication, the look and feel may have changed. Maybe the menu particulars along the top will expand to include a new section for the MVC frame. Or perhaps a radically new design with different colors, sources, and layout will be unveiled. Applying similar changes to the entire point should be a fast and simple process that doesn't bear modifying the thousands of web runners that make up the point.
These tutorials are geared to be terse and give step-by-step instructions with a plenitude of screenshots to walk you through the process visually. Each tutorial is available inC# and Visual Introductory performances and includes a download of the complete law used.
This initial tutorial starts with a look at master runner basics. We bandy how master runners work, look at creating a master runner and associated happy runners using Visual Web Inventor and see how changes to a master runner are incontinently reflected in its content runners. Let's get started!
ASP.NET Master Pages Overview
ASP.NET master runners allow you to produce a harmonious layout for the runners in your operation. A single master runner defines the look and feels and standard geste that you want for all of the runners (or a group of runners) in your operation. You can also produce individual content runners that contain the content you want to display. When druggies request the content runners, they combine with the master runner to produce an affair that combines the layout of the master runner with the content from the content runner.
Master Runners
A master runner is an anASP.NET train with the extension. master (for illustration,MySite.master) with a predefined layout that can include static textbook, HTML rudiments, and garçon controls. The master runner is linked by a special@ Master directive that replaces the@ Runner directive that's used for ordinary. aspx runners. The directive looks like the following.
The@ Master directive can contain utmost of the same directives that a@ Control directive can contain. For illustration, the following master-runner directive includes the name of a law-behind train, and assigns a class name to the master runner.
<%@ Master Language="C#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
In addition to the@ Master directive, the master runner also contains all of the top- position HTML rudiments for a runner, similar as HTML, head, and form. For illustration, on a master runner, you might use an HTML table for the layout, an img element for your company totem, the static textbook for the brand noticed, and garçon controls to produce standard navigation for your point. You can use any HTML and anyASP.NET rudiments as part of your master runner.
Content Pages
You define the content for the master runner's placeholder controls by creating individual content runners, which areASP.NET runners (. aspx lines and, voluntarily, law-behind lines) that are bound to a specific master runner. The list is established in the content runner's@ Page directive by including a MasterPageFile trait that points to the master runner to be used. For illustration, a content runner might have the following@ Runner directive, which binds it to theMaster1.master runner.
<%@ Page Language="C#" MasterPageFile="~/MasterPages/Master1.master" Title="Content Page" %>
In the content runner, you produce the content by adding Content controls and mapping them to ContentPlaceHolder controls on the master runner. For illustration, the master runner might have content placeholders called Main and Footer. In the content runner, you can produce two Content controls, one that's counterplotted to the ContentPlaceHolder control Main and the other counterplotted to the ContentPlaceHolder control Footer, as shown in the following figure.
<% @ Page Language="C#" MasterPageFile="~/Master.master" Title="Content Page 1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Main" Runat="Server">
Main content.
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Footer" Runat="Server" >
Footer content.
</asp:content>
In the content runner, you produce the content by adding Content controls and mapping them to ContentPlaceHolder controls on the master runner. For illustration, the master runner might have content placeholders called Main and Footer. In the content runner, you can produce two Content controls, one that's counterplotted to the ContentPlaceHolder control Main and the other counterplotted to the ContentPlaceHolder control Footer, as shown in the following figure.
A master page provides the layout and functionality to other pages. Creating a master page in ASP.NET is very easy. Let's start creating the master page step by step.
Step 1: Open new project in visual studio
New project->Installed->Web->ASP.NET Web Application (shown in the picture),
After clicking the OK button in the Window, select Empty (shown in the picture),
After clicking the OK button, project "mainmasterpage" opens but no file is there (shown in the picture),
Step 2: Add a new file to our project.
Add the master page to our project.
Right click Project->Add->New item (shown in the picture),
After clicking on the new item, Window will open, select Web Form->Web Forms Master Page (shown in the picture),
After clicking the add button, the master page 'site1.master' adds to our project.
Click on site1.master into Solution Explorer (shown in the picture),
Step 3: Design the master page, using HTML.
HTML code of my master page is,
- <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="mainmasterpage.Site1" %>
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title>Demo Project</title>
- <link href="css/my.css" rel="stylesheet" />
- <asp:ContentPlaceHolder ID="head" runat="server">
- </asp:ContentPlaceHolder>
- </head>
- <body>
- <!DOCTYPE html>
- <html>
- <head>
- <title>Demo Project</title>
- <link rel="stylesheet" type="text/css" href="my.css">
- </head>
- <body>
- <header id="header">
- <h1>Demo Project</h1>
- </header>
- <nav id="nav">
- <ul>
- <li><a href="home.aspx">Home</a></li>
- <li><a href="#">About</a></li>
- <li><a href="#">Blogger</a></li>
- <li><a href="#">Youtube</a></li>
- <li><a href="#">Github</a></li>
- </ul>
- </nav>
- <aside id="side">
- <h1>news</h1>
- <a href="#"><p>Blogger</p></a>
- <a href="#"><p>Youtube</p></a>
- <a href="#"><p>Github</p></a>
- </aside>
- <div id="con">
- <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
- </asp:ContentPlaceHolder>
- </div>
- <footer id="footer">
- copyright @c# corner
- </footer>
- </body>
- </html>
- <form id="form1" runat="server">
- </form>
- </body>
- </html>
Right-click on the project-> Add->New item (shown in the picture),
Select Style Sheet and edit the name or rename .css file click add button
- #header{
- color: #247BA0;
- text-align: center;
- font-size: 20px;
- }
- #nav{
- background-color:#ff9800;
- padding: 5px;
- }
- ul{
- list-style-type: none;
- }
- li a {
- color: #F1FAEE;
- font-size: 30px;
- column-width: 5%;
- }
- li
- {
- display: inline;
- padding-left: 2px;
- column-width: 20px;
- }
- a{
- text-decoration: none;
- margin-left:20px
- }
- li a:hover{
- background-color: #F3FFBD;
- color: #FF1654;
- padding:1%;
- }
- #side{
- text-align: center;
- float: left;
- width: 15%;
- padding-bottom: 79%;
- background-color: #F1FAEE;
- }
- #article{
- background-color: #EEF5DB;
- padding: 10px;
- padding-bottom: 75%;
- }
- #footer{
- background-color: #ffeb3b;
- text-align:center;
- padding-bottom: 1%;
- font-size: 20px;
- }
- #con{
- border:double;
- border-color:burlywood;
- }
Step 4: Add a web form to our project.
Select Web form with the master page.
After clicking on that, add the button Window, open the selected mainmasterpage->site1.master and click OK.
Now, design our homepage.
Here, we write home page only,
Home.aspx
- <%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="home.aspx.cs" Inherits="mainmasterpage.home" %>
- <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
- </asp:Content>
- <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
- <h1>Home page</h1>
- </asp:Content>
The master page looks as shown in the picture:
0 Comments