Am also assuming you have a basic understanding of the basic layout of the "MsV Web Developer 2010" to start lets look at the "Master Page" markup.
ASP Master Page
Lets start by going over the "Master Page" of ASP.Net...
- The first to note is the file "Site.master" this is your "Master Page"
- The "Master Page" is used like a template that the whole Web Site will follow, anything thats put in a "Master Page" markup will be included into every web page loaded by the browser.
- If you "Double-Click" on the "Site.master" file something like this will come up...\/\/\/
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
You can have multiple "Master Page" files in a website project, you can think of these as multiple templates for different parts of your site, as long at the page points to the right "Master Page" then you will get that template for the page.
How To:
- Right-Click project root->Add->New Item...
- Select "Master Page"
- Name the File
- Click Add
- And your done making a new "Master Page"
There is a lot of different tags in this file, most are general xhtml tags, but a few are <asp...> tags used by ASP.Net. As I will go over next I will show how to add some dynamics to your website.
ASP Content Place Holder Tag
The <asp:ContentPlaceHolder...> tag is used for dynamic insertion of content form pages that are loaded by your web site. This tag it self is the link from to were your pages will insert the content into the "Master Page" of your website, so just inserting this in the master page will link the page to the template.
Here is the syntax for inserting a new "Asp Content Place Holder" tag...\/\/\/
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder> - The "ID" attribute is set to "HeadContent" this helps it to create a link the pages with the "Master Page".
- The "runat" attribute is used to tell where the information is to be processed. (CA-Note: A "runat" attribute is required for almost all <asp...> tags or you will get a compiler error if not included.)
ASP Content Pages
An ASP content page has a name like "Default.aspx" file name these pages have two main components.
An ASP content page has a name like "Default.aspx" file name these pages have two main components.
- The <%@ Page...> tag is used to setup the connection to the "Site.master" file so it can get its template for the web page.
- It also contatins a <asp:Content...> tag used to insert content of the page into the "Master Page". (CA-Note: Even if you try to include content outside the <asp:Content...> tags the site wont even compile.)
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2 style="color:red;" runat="server">
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
</p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
</asp:Content>
Lets take a closer look at the <asp:Content...> tag like the one below...\/\/\/
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2 style="color:red;" runat="server">
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
</p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
</asp:Content>
- The "ID" attribute is used for setting the unique name for the tag, can be used on the "Master Page" or different things to the content of the tag.
- As before the "runat" attribute is used to set what side the tag is processed on, server or not.
- As you can tell the "ContentPlaceHolderID" attribute is set to "MainContent" this means that for anything included in between the starting and ending tag will be sent to the "Master Page" to be displayed where a <asp:ContentPlaceHolder...> tag that has an "ID" of "MainContent". (CA-Note: If you dont have this inside the tag it will not compile and even if it could it would not make a link to the master page.)
More to come, CA.
No comments:
Post a Comment