Using Master Pages ASP NET Master Page l
- Slides: 21
Using Master Pages ASP. NET
Master Page l Enables sharing of the same content among multiple pages ¡Create a common page layout and apply to the entire website. l. If you want all pages to have a three column layout create one master page and use for all pages l. Display standard header and footer l. Can be customized for each content page
Creating l Create a page that ends with a. master extension ¡You can use multiple master pages in the same application ¡Master pages look very much like a normal. aspx page l. You can add HTML, server-side scripts and asp. net controls ¡Create using the New Item/Master Page item
Using the Visual Designer
<%@ Master Language="C#" %> <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 1//EN" "http: //www. w 3. org/TR/xhtml 11/DTD/xhtml 11. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml" > <head id="Head 1" runat="server"> <title>Simple Master</title> <style type="text/css"> </head> html <body> { <form id="form 1" runat="server"> background-color: silver; <div class="content"> font: 14 px Arial, Sans-Serif; <div class="left. Column"> }. content { margin: auto; width: 700 px; background-color: white; border: Solid 1 px black; }. left. Column { float: left; padding: 15 px; width: 250 px; border-right: Solid 1 px black; height: 700 px; }. right. Column { float: left; padding: 15 px; width: 300 px; height: 700 px; }. clear { clear: both; } </style> Note the @Master page directive… <asp: contentplaceholder id="Content. Place. Holder 1" runat="server"/> </div> <div class="right. Column"> <asp: contentplaceholder id="Content. Place. Holder 2" runat="server"/> </div> <br class="clear" /> </div> </form> </body> </html> Note the Content. Place. Holder controls…
Master Page Layout l Note the content controls ¡You merge pages that have Content controls with master pages ¡In the master page, each content placeholder is in a <DIV> that is styled by CSS
Content Pages <%@ Page Language="C#" Master. Page. File="~/Simple. Master. master" %> <asp: Content ID="Content 1" Content. Place. Holder. ID="Content. Place. Holder 1" Runat="Server"> Content in the first column Content in the first column </asp: Content> <asp: Content ID="Content 2" Content. Place. Holder. ID="Content. Place. Holder 2" Runat="Server"> Content in the second column Content in the second column </asp: Content> Note the Master. Page. File attribute of the @Page directive…
Associating a content page with a master page Note the dialog for selecting the master page to associate this content page….
Content pages l Content pages do not have the normal HTML code ¡ All controls are placed inside of Content controls l Includes a Content. Placeholder. ID property which matches the property in the master page on the Content. Place. Holder control (see sample code on the previous slides) l You do not have to have a content control for every placeholder on the master page • You can have default content on the master page • It will be replaced if there is a content page with a content control for the placeholder
<title>Default Master</title> </head> <body> <form id="form 1" runat="server"> <div class="content"> <div class="left. Column"> <asp: contentplaceholder id="Content. Place. Holder 1" runat="server"/> </div> <div class="middle. Column"> <asp: Content. Placeholder id="Content. Place. Holder 2" runat="server" /> </div> </body> </html> This <DIV> would be inserted here… <div class="right. Column"> Note the “default” content – image control… <asp: Content. Place. Holder id="content. Ad" Runat="server"> <asp: Image id="img. Ad" Image. Url="~/Banner. Ad. gif" Css. Class="ad" Alternate. Text="Advertisement for RTC ASP Workshops" Runat="server" /> </asp: Content. Place. Holder> </div> <br class="clear" /> </div> </form>
Exposing properties in a Master Page l You can expose properties and methods from a Master Page and modify those from a particular content page…
<%@ Master Language="C#" %> <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 1//EN" "http: //www. w 3. org/TR/xhtml 11/DTD/xhtml 11. dtd"> <script runat="server"> public string Body. Title { get { return ltl. Body. Title. Text; } Note the property ltl. Body. Title and set { ltl. Body. Title. Text = value; } the asp: Literal Control to which it } </script> refers…. <html xmlns="http: //www. w 3. org/1999/xhtml" > <head id="Head 1" runat="server"> <style type="text/css"> html { background-color: silver; } </style> <title>Property Master</title> </head> <body> <form id="form 1" runat="server"> <div class="content"> <h 1><asp: Literal ID="ltl. Body. Title" runat="server" /></h 1> <asp: contentplaceholder id="Content. Place. Holder 1" runat="server" /> </div> </form> </body> </html>
Content page using the property…. <%@ Page Language="C#" Master. Page. File="~/Property. Master. master" %> <%@ Master. Type Virtual. Path="~/Property. Master. master" %> <script runat="server"> void Page_Load() { if (!Page. Is. Post. Back) { Master. Body. Title = "The Body Title"; } } </script> <asp: Content ID="Content 1" Content. Place. Holder. ID="Content. Place. Holder 1" Runat="Server"> Content, Content, Content, Content Content, Content </asp: Content> Note the Master. Type directive. It is necessary to allow the use of the Master object and to point it to the correct master page (which becomes a class/type…) when using the property…
Now you try – practice master page l Create a two column master page with 3 content placeholders ¡Create a separate. CSS page to create the columns and styles… ¡Put default content in one of the content placeholders ¡Place an ASP “literal” control at the top of the page l. This will become the page title and will be exposed as a property….
Practice Master Page
Create a content page l Create a content page and add content to two of the content placeholders ¡Allow the third with your “default” content to default to whatever you created in the master page…
Expose a property in the master page l Expose the text property of the literal control as a read write property ¡Add the appropriate code in both the master page and the content page to fill this and use it as the heading/title of the page when viewed in the browswer…
Now you try – Classroom Demo l Create a master page in the Computer Science application ¡ Use the “Feedback” page as the basis for creating the master. l We want all other pages to use the same format. ¡Create content placeholders l You will use this master page for the login page, Student. Services page, the Transcript page and every other page created from this point forward in the classroom demo application. ¡Now create three properties: l Page title l Left sub-header l Right sub-header
Master Page l See text file for source code:
Now you try – Create the content l Create the following content pages using your master page ¡ Login page l Use the interface source and code behind from your original login page… ¡ Student Services l Will show the links to the various student services pages ¡ Transcript l Will show the currently logged student’s transcript (grades and courses completed and currently enrolled) • This will be done in a later presentation – requires database connectivity…
Content page