📄 arti.htm
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body dir="ltr">
<p class="MsoNormal" style="margin: 0in 0in 0pt">
<strong>Master Pages</strong></p>
<p>
<strong>Creating Master Page</strong></p>
<ol start="1" style="margin-top: 0in" type="1">
<li class="MsoNormal" style="margin: 0in 0in 0pt; mso-list: l0 level1 lfo1; tab-stops: list .5in">
Open <strong>Visual Studio 2005</strong>.</li>
<li class="MsoNormal" style="margin: 0in 0in 0pt; mso-list: l0 level1 lfo1; tab-stops: list .5in">
Create new <strong>ASP.NET Web site</strong> , enter name as <strong>MasterPagesApp</strong>.</li>
<li>Select <strong>Location</strong> as <strong>File System </strong>, and enter the
path as <strong>D:\WhidbeyWebSites\MasterPagesApp</strong>. ( or any other
path ).</li>
<li>Select the <strong>Language</strong> you are more comfortable with, for this we
will use <strong>C#</strong>.</li>
<li>After creating the new Web Site you will find a page created for you named <strong>
Default.aspx</strong></li>
<li>Delete this page and right click the application from solution explorer select <strong>
Add New Item</strong> select <strong>Master Page </strong>from installed visual
studio templates and name it <strong>MainLayout </strong>, and check the <strong>Place
code in separate file</strong> checkbox; this will create you a code-behind
in the language you select , we work here using <strong>C#<br />
<img src="" /></strong></li>
<li>The <strong>MainLayOut.master </strong>will be open in <strong>Source </strong>view
you will find this master page directive at the beginning :<br />
<br />
<span style="background-color: #ffff66"><%</span><span style="color: blue">@</span>
<span style="color: maroon">Master</span> <span style="color: red">AutoEventWireup</span><span
style="color: blue">="true"</span> <span style="color: red">CodeFile</span><span
style="color: blue">="MainLayOut.master.cs"</span> <span style="color: red">Inherits</span><span
style="color: blue">="MainLayOut"</span> <span style="color: red">Language</span><span
style="color: blue">="C#"</span> <span style="background-color: #ffff66">%></span>
<br />
<br />
As you see the attributes of the <strong>Master</strong> directive is common to
the ones of the <strong>Page</strong> directive, and they are self-descriptive;
<strong>CodeFile </strong>is the path of the code behind file it can be VB or C#
noting that in one Web Site you can mix between both languages , <strong>Inherits</strong>
decides the class within the code file to be used , <strong>Language</strong> is
the language of the code behind file, <strong>AutoEventWireup </strong>is so important
; for any page there is an automatic way to bind the events to methods in the same
aspx file or in code behind , if this attribute is true ( default value is true
so if it's not mentioned it will be true ) page events are automatically bound to
methods that are using naming convention as <strong>Page_event </strong>, for example
<strong>Page_Load</strong>, <strong>Page_Init</strong>, and <strong>Page_PreInit </strong>
(this is event is fired before creating the controls of the page), this has one
disadvantage that the standarad events of the page should adhere to this naming
convention, but if you set it to false it it will give you more flexibility to use
any names for the event handlers , here we should remember the importance of <strong>
Handles </strong>keyword in VB.NET.<br />
<br />
You should always examine the following section:<br />
<br />
<span style="color: blue"><</span><span style="color: maroon">asp:contentplaceholder</span>
<span style="color: red">id</span><span style="color: blue">="ContentPlaceHolder1"</span>
<span style="color: red">r</span><span style="color: red"><span style="color: red">u</span>nat</span><span
style="color: blue">=</span><span style="color: blue">"server"></span> <span style="color: blue">
</</span><span style="color: maroon">asp:contentplaceholder</span><span style="color: blue">></span>
<br />
<br />
This server control is the most important for the master pages as this is the zone
in which the content pages will be rendered.</li>
<li>Switch to the <strong>Design </strong>of the master page you will get the <strong>
ContentPlaceHolder1</strong> shown, now you can design the master page just as any
aspx page, so for this practice we'll do a simple master page.</li>
<li>From <strong>Layout </strong>menu select <strong>Insert Table</strong>, Select <strong>
Template </strong>option, then select <strong>Header , footer and side</strong>,
then drag the <strong>ContentPlaceHolder1 </strong>control into the <strong>right middle
cell</strong> of the table you have just added.</li>
<li>Add one label into the left middle cell,and the logo of CodeProject to the upper
cell of the table, you should have the same as in the following figure
<br />
<img src="" /><br />
Note : you should make all the paths in the master page relative to one folder because
the image path will be relative to the rendered content page not for the master
page, it's advisable to create one <strong>images </strong>folder to hold all your
images, for example the logo of CodeProject image path is : <strong>./images/codeprojectlogo.JPG</strong>,
when the content page renders teh path will be evaluated to <strong>http://localhost:4843/MasterPagesApp/images/codeprojectlogo.JPG</strong>.</li>
<li>Double click anywhere at the master page this will open the code behind and will
add the <strong>Page_Load </strong>event handler you can write the following code
:
<br />
<br />
Label1.Text = "The Time of Server is: " + DateTime.Now.TimeOfDay;<br />
<br />
this will show the time of the server at the label </li>
</ol>
<p>
<strong>Creating Content Page</strong></p>
<p>
You should know that the content page is just one aspx page but you bind this page
to one master page while you are creating it , Right click your web application
from solution explorer and select <strong>Add New Item </strong>, select <strong>Web
Form </strong>from the installed templates and check <strong>Select Maser Page</strong>,
enter the name of the new page as <strong>myContentPage.aspx </strong>as in the
following figure<br />
<img src="" /><br />
<br />
Because you have checked the <strong>Select Master Page </strong>box you will get
the following dialog to select one master page , this will bind the new aspx page
to the selected master page as shown in the following figure<br />
<img src="" /><br />
<br />
The page you have just added will open in source view and you will find one add
the <strong>MasterPageFile </strong>attribute set to the value of the master page
file you have selected before this should be assigned the value <strong>~/MainLayOut.master</strong>,
you will also find one <strong>Content </strong>server control added by default
and the attribute <strong>ContentPlaceHolderID </strong>assigned to <strong>ContentPlaceHolder1
</strong>this is the default value which refers to the ContentPlaceHolder control
at the master page and if you have renamed this control at the master page you should
change it now to the correct Id, this sets the zone in which this content page will
be shown as we said before.</p>
<p>
Switch to the design view of <strong>myContentPage.aspx </strong>you will get the
following figure which shows all the master page contents added by all the contents
of the master page is dim because they are not editable , only the <strong>Content1
</strong>will be enabled if you click the white area, and you can now add any controls
just as you do for any aspx page.</p>
<p>
Double click the white area of <strong>Content1 </strong>you will get the event
handler of <strong>Page_Load </strong>, add the following line :
<br />
Label1.Text = this.MasterPageFile;<br />
this will show the path of the Master Page file into the label , Actually you can
get a reference to the Master Page from a content page by using the <strong>Master </strong>
property which refers to the page's master page , furthermore you can refer to any
control on the master page by using <strong>this.Master.FindControl(string id) </strong>
, this method takes the Id of the control on the master page and returns <strong>Control
</strong>object , so you should cast to the data type of the control.</p>
<p>
<strong></strong> </p>
<p>
<strong>Saving Master Page path in web.config</strong></p>
<p>
There is one technique that you can make all the pages comprising your web application
as <strong>content pages </strong>and you can bind all the pages to one master page,
this master page that will be a template to your entire application it's advisable
to save the path of this master page into <strong>web.config</strong>, you can do
that using the following :
<br />
<configuration><br />
<<font color="#ffffff" style="background-color: #0a246a">pages</font>
masterPageFile="~/sitetemplate.<font color="#ffffff" style="background-color: #0a246a">master</font>"
/><br />
</configuration><br />
if you specify a <strong>MasterPageFile </strong>for your page it will override
your web.config value but the importance of the value of web.config that it gurantees
that all the pages added to your application are bound to this master page file,
so if you have more than one master page you can just change the web.config value
, and this will update the whole application pages with no need to recompile; Indeed
this technique was a trend at ASP.NET 1.x , as some developers were making all the
pages as user controls and pass the id of the user control at the required page
URL<br />
</p>
<p>
</p>
<p>
<strong>Conclusion<br />
</strong>Master Pages are a great addition to ASP.NET 2.0, it's a good way to templatize
your application , as we've seen you can change the master page from web.config
, and you can access the master page from child content pages by using this.Master
, Thanks to Master Pages !</p>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -