注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

Creating a Consistent Look  

2011-07-25 16:59:46|  分类: MVC |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

To make it more efficient to create web pages for your site, you can create reusable blocks of content (like headers and footers) for your website, and you can create a consistent layout for all the pages.Creating a Consistent Look - 海里的贝壳 - apple的博客

What you'll learn:

  • How to create reusable blocks of content like headers and footers.

  • How to create a consistent look for all the pages in your site using a layout page.

  • How to pass data at run time to a layout page.

  • How to create and use a simple helper.

These are the ASP.NET features introduced in the chapter:

  • Content blocks, which are files that contain HTML-formatted content to be inserted in multiple pages.

  • Layout pages, which are pages that contain HTML-formatted content that can be shared by pages on the website.

  • The RenderPage, RenderBody, and RenderSection methods, which tell ASP.NET where to insert page elements.

  • The PageData dictionary that lets you share data between content blocks and layout pages.

Creating Reusable Blocks of Content

Many websites have content that's displayed on every page, like a header and footer, or a box that tells users that they're logged in. ASP.NET lets you create a separate file with a content block that can contain text, markup, and code, just like a regular web page. You can then insert the content block in other pages on the site where you want the information to appear. That way you don't have to copy and paste the same content into every page. Creating common content like this also makes it easier to update your site. If you need to change the content, you can just update a single file, and the changes are then reflected everywhere the content has been inserted.

The following diagram shows how content blocks work. When a browser requests a page from the web server, ASP.NET inserts the content blocks at the point where the RenderPage method is called in the main page. The finished (merged) page is then sent to the browser.

ch03_layouts-1

In this procedure, you'll create a page that references two content blocks (a header and a footer) that are located in separate files. You can use these same content blocks in any page in your site. When you're done, you'll get a page like this:

ch03_layouts-2

  1. In the root folder of your website, create a file named Index.cshtml.

  2. Replace the existing markup with the following:

    <!DOCTYPE html>   <html>     <head>       <title>Main Page</title>     </head>     <body>          <h1>Index Page Content</h1>       <p>This is the content of the main page.</p>        </body>   </html>
  3. In the root folder, create a folder named Shared.

    Note It's common practice to store files that are shared among web pages in a folder named Shared.

  4. In the Shared folder, create a file named _Header.cshtml.

  5. Replace any existing content with the following:

    <div class="header">This is header text.</div>

    Notice that the file name is _Header.cshtml, with an underscore (_) as a prefix. ASP.NET won't send a page to the browser if its name starts with an underscore. This prevents people from requesting (inadvertently or otherwise) these pages. It's a good idea to use an underscore to name pages that have content blocks in them, because you don't really want users to be able to request these pages — they exist strictly to be inserted into other pages.

  6. In the Shared folder, create a file named _Footer.cshtml and replace the content with the following:

      <div class="footer">&copy; 2010 Contoso Pharmaceuticals. All rights reserved.    </div>
  7. In the Index.cshtml page, add the following highlighted code, which makes two calls to the RenderPage method:

    <!DOCTYPE html>   <html>     <head>       <title>Main Page</title>     </head>     <body>          @RenderPage("/Shared/_Header.cshtml")          <h1>Index Page Content</h1>       <p>This is the content of the main page.</p>          @RenderPage("/Shared/_Footer.cshtml")        </body>   </html>

    This shows how to insert a content block into a web page. You call the RenderPage method and pass it the name of the file whose contents you want to insert at that point. Here, you're inserting the contents of the _Header.cshtml and _Footer.cshtml files into the Index.cshtml file.

  8. Run the Index.cshtml page in a browser. (Make sure the page is selected in the Files workspace before you run it.)

  9. In the browser, view the page source. (For example, in Internet Explorer, right-click the page and then click View Source.)

    This lets you see the web page markup that's sent to the browser, which combines the index page markup with the content blocks. The following example shows the page source that's rendered for Index.cshtml. The calls to RenderPage that you inserted into Index.cshtml have been replaced with the actual contents of the header and footer files.

    <!DOCTYPE html>   <html>     <head>       <title>Main Page</title>     </head>     <body>        <div class="header">       This is header text.     </div>          <h1>Index Page Content</h1>       <p>This is the content of the main page.</p>        <div class="footer">       &copy; 2010 Contoso Pharmaceuticals. All rights reserved.     </div>        </body>   </html>

Creating a Consistent Look Using Layout Pages

So far you've seen that it's easy to include the same content on multiple pages. A more structured approach to creating a consistent look for a site is to use layout pages. A layout page defines the structure of a web page, but doesn't contain any actual content. After you've created a layout page, you can create web pages that contain the content and then link them to the layout page. When these pages are displayed, they'll be formatted according to the layout page. (In this sense, a layout page acts as a kind of template for content that's defined in other pages.)

The layout page is just like any HTML page, except that it contains a call to the RenderBody method. The position of the RenderBody method in the layout page determines where the information from the content page will be included.

The following diagram shows how content pages and layout pages are combined at run time to produce the finished web page. The browser requests a content page. The content page has code in it that specifies the layout page to use for the page's structure. In the layout page, the content is inserted at the point where the RenderBody method is called. Content blocks can also be inserted into the layout page by calling the RenderPage method, the way you did in the previous section. When the web page is complete, it's sent to the browser.

ch03_layouts-3

The following procedure shows how to create a layout page and link content pages to it.

  1. In the Shared folder of your website, create a file named _Layout1.cshtml.

  2. Replace any existing content with the following:

    <!DOCTYPE html>     <head>       <title> Structured Content </title>       <link href="@Href("/Styles/Site.css")" rel="stylesheet" type="text/css" />     </head>     <body>       @RenderPage("/Shared/_Header2.cshtml")       <div id="main">         @RenderBody()       </div>       <div id="footer">         &copy; 2010 Contoso Pharmaceuticals. All rights reserved.       </div>     </body>   </html>

    You use the RenderPage method in a layout page to insert content blocks. A layout page can contain only one call to the RenderBody method.

    Note Web servers don't all handle hyperlink references (the href attribute of links) in the same way. Therefore, ASP.NET provides the @Href helper, which accepts a path and provides the path to the web server in the form that the web server expects.

  3. In the Shared folder, create a file named _Header2.cshtml and replace any existing content with the following:

    <div id="header">Chapter 3: Creating a Consistent Look</div>
  4. In the root folder, create a new folder and name it Styles.

  5. In the Styles folder, create a file named Site.css and add the following style definitions:

    h1 {       border-bottom: 3px solid #cc9900;       font: 2.75em/1.75em Georgia, serif;       color: #996600;   }      ul {       list-style-type: none;   }      body {       margin: 0;       padding: 1em;       background-color: #ffffff;       font: 75%/1.75em "Trebuchet MS", Verdana, sans-serif;       color: #006600;   }      #list {       margin: 1em 0 7em -3em;       padding: 1em 0 0 0;       background-color: #ffffff;       color: #996600;       width: 25%;       float: left;   }      #header, #footer {       margin: 0;       padding: 0;       color: #996600;   }

    These style definitions are here only to show how style sheets can be used with layout pages. If you want, you can define your own styles for these elements.

  6. In the root folder, create a file named Content1.cshtml and replace any existing content with the following:

    @{       Layout = "/Shared/_Layout1.cshtml";   }      <h1> Structured Content </h1>   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris   nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in   reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla   pariatur. Excepteur sint occaecat cupidatat non proident, sunt in   culpa qui officia deserunt mollit anim id est laborum.</p>

    This is a page that will use a layout page. The code block at the top of the page indicates which layout page to use to format this content.

  7. Run Content1.cshtml in a browser. The rendered page uses the format and style sheet defined in _Layout1.cshtml and the text (content) defined in Content1.cshtml.

    ch03_layouts-4

    You can repeat step 6 to create additional content pages that can then share the same layout page.

    Note You can set up your site so that you can automatically use the same layout page for all the content pages in a folder. For details, see Chapter 18 - Customizing Site-Wide Behavior.

Designing Layout Pages That Have Multiple Content Sections

A content page can have multiple sections, which is useful if you want to use layouts that have multiple areas with replaceable content. In the content page, you give each section a unique name. (The default section is left unnamed.) In the layout page, you add a RenderBody method to specify where the unnamed (default) section should appear. You then add separate RenderSection methods in order to render named sections individually.

The following diagram shows how ASP.NET handles content that's divided into multiple sections. Each named section is contained in a section block in the content page. (They're named Header and List in the example.) The framework inserts content section into the layout page at the point where the RenderSection method is called. The unnamed (default) section is inserted at the point where the RenderBody method is called, as you saw earlier.

ch03_layouts-5

This procedure shows how to create a content page that has multiple content sections and how to render it using a layout page that supports multiple content sections.

  1. In the Shared folder, create a file named _Layout2.cshtml.

  2. Replace any existing content with the following:

    <!DOCTYPE html>   <html>       <head>         <title>Multisection Content</title>         <link href="@Href("/Styles/Site.css")" rel="stylesheet" type="text/css" />       </head>       <body>         <div id="header">           @RenderSection("header")         </div>         <div id="list">           @RenderSection("list")         </div>         <div id="main">           @RenderBody()         </div>         <div id="footer">           &copy; 2010 Contoso Pharmaceuticals. All rights reserved.         </div>       </body>   </html>

    You use the RenderSection method to render both the header and list sections.

  3. In the root folder, create a file named Content2.cshtml and replace any existing content with the following:

    @{       Layout = "/Shared/_Layout2.cshtml";   }      @section header {       <div id="header">           Chapter 3: Creating a Consistent Look       </div>   }      @section list {       <ul>           <li>Lorem</li>           <li>Ipsum</li>           <li>Dolor</li>           <li>Consecte</li>           <li>Eiusmod</li>           <li>Tempor</li>           <li>Incididu</li>       </ul>   }      <h1>Multisection Content</h1>   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris   nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in   reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla   pariatur. Excepteur sint occaecat cupidatat non proident, sunt in   culpa qui officia deserunt mollit anim id est laborum.</p>

    This content page contains a code block at the top of the page. Each named section is contained in a section block. The rest of the page contains the default (unnamed) content section.

  4. Run the page in a browser.

    ch03_layouts-6

Making Content Sections Optional

Normally, the sections that you create in a content page have to match sections that are defined in the layout page. You can get errors if any of the following occur:

  • The content page contains a section that has no corresponding section in the layout page.
  • The layout page contains a section for which there's no content.
  • The layout page includes method calls that try to render the same section more than once.

However, you can override this behavior for a named section by declaring the section to be optional in the layout page. This lets you define multiple content pages that can share a layout page but that might or might not have content for a specific section.

  1. Open Content2.cshtml and remove the following section:

    @section header {     <div id="header">       Chapter 3: Creating a Consistent Look     </div>   }
  2. Save the page and then run it in a browser. An error message is displayed, because the content page doesn't provide content for a section defined in the layout page, namely the header section.

    ch03_layouts-7

  3. In the Shared folder, open the _Layout2.cshtml page and replace this line:

    @RenderSection("header")

    with the following code:

    @RenderSection("header", required: false)

    As an alternative, you could replace the previous line of code with the following code block, which produces the same results:

    @if (IsSectionDefined("header")) {       @RenderSection("header")   }
  4. Run the Content2.cshtml page in a browser again. (If you still have this page open in the browser, you can just refresh it.) This time the page is displayed with no error, even though it has no header.

Passing Data to Layout Pages

You might have data defined in the content page that you need to refer to in a layout page. If so, you need to pass the data from the content page to the layout page. For example, you might want to display the login status of a user, or you might want to show or hide content areas based on user input.

To pass data from a content page to a layout page, you can put values into the PageData property of the content page. The PageData property is a collection of name/value pairs that hold the data that you want to pass between pages. In the layout page, you can then read values out of the PageData property.

Here's another diagram. This one shows how ASP.NET can use the PageData property to pass values from a content page to the layout page. When ASP.NET begins building the web page, it creates the PageData collection. In the content page, you write code to put data in the PageData collection. Values in the PageData collection can also be accessed by other sections in the content page or by additional content blocks.

ch03_layouts-8

The following procedure shows how to pass data from a content page to a layout page. When the page runs, it displays a button that lets the user hide or show a list that's defined in the layout page. When users click the button, it sets a true/false (Boolean) value in the PageData property. The layout page reads that value, and if it's false, hides the list. The value is also used in the content page to determine whether to display the Hide List button or the Show List button.

ch03_layouts-9

  1. In the root folder, create a file named Content3.cshtml and replace any existing content with the following:

    @{       Layout = "/Shared/_Layout3.cshtml";          PageData["Title"] = "Passing Data";       PageData["ShowList"] = true;          if (IsPost) {           if (Request["list"] == "off") {               PageData["ShowList"] = false;           }       }   }      @section header {       <div id="header">           Chapter 3: Creating a Consistent Look       </div>   }      <h1>@PageData["Title"]</h1>   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris   nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in   reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla   pariatur. Excepteur sint occaecat cupidatat non proident, sunt in   culpa qui officia deserunt mollit anim id est laborum.</p>      @if (PageData["ShowList"] == true) {       <form method="post" action="">         <input type="hidden" name="list" value="off" />         <input type="submit" value="Hide List" />       </form>   }   else {       <form method="post" action="">         <input type="hidden" name="list" value="on" />         <input type="submit" value="Show List" />       </form>   }

    The code stores two pieces of data in the PageData property — the title of the web page and true or false to specify whether to display a list.

    Notice that ASP.NET lets you put HTML markup into the page conditionally using a code block. For example, the if/else block in the body of the page determines which form to display depending on whether PageData["ShowList"] is set to true.

  2. In the Shared folder, create a file named _Layout3.cshtml and replace any existing content with the following:

    <!DOCTYPE html>      <html>       <head>         <title>@PageData["Title"]</title>         <link href="@Href("/Styles/Site.css")" rel="stylesheet" type="text/css" />       </head>       <body>         <div id="header">           @RenderSection("header")         </div>         @if (PageData["ShowList"] == true) {             <div id="list">               @RenderPage("/Shared/_List.cshtml")             </div>         }         <div id="main">           @RenderBody()         </div>         <div id="footer">           &copy; 2010 Contoso Pharmaceuticals. All rights reserved.         </div>       </body>   </html>

    The layout page includes an expression in the <title> element that gets the title value from the PageData property. It also uses the ShowList value of the PageData property to determine whether to display the list content block.

  3. In the Shared folder, create a file named _List.cshtml and replace any existing content with the following:

    <ul>     <li>Lorem</li>     <li>Ipsum</li>     <li>Dolor</li>     <li>Consecte</li>     <li>Eiusmod</li>     <li>Tempor</li>     <li>Incididu</li>   </ul>
  4. Run the Content3.cshtml page in a browser. The page is displayed with the list visible on the left side of the page and a Hide List button at the bottom.

    ch03_layouts-10

  5. Click Hide List. The list disappears and the button changes to Show List.

    ch03_layouts-11

  6. Click the Show List button, and the list is displayed again.

Creating and Using a Basic Helper

Another option for creating a consistent look in your website is to create a custom helper. As you learned in Chapter 1 - Getting Started with ASP.NET Web Pages, a helper is a component that lets you accomplish a task using a single line of code. ASP.NET includes many helpers, and you'll work with many of them in later chapters. A complete list of helpers is listed in the ASP.NET API Quick Reference.

A helper can help you create a consistent look on your website by letting you use a common block of code across multiple pages. Suppose that in your page you often want to create a note item that's set apart from normal paragraphs, which you create using a <div> element that's styled as a box with a border. Rather than add the same markup to every page, you can package it as a helper, and then insert the note with a single line of code anywhere you need it. This makes the code in each of your pages simpler and easier to read. It also makes it easier to maintain your site, because if you need to change how the notes look, you can change the markup in one place.

This procedure shows you how to create a helper that creates the note, as just described. This is a simple example, but the custom helper can include any markup and ASP.NET code that you need.

  1. In the root folder of the website, create a folder named App_Code.
  2. In the App_Code folder create a new .cshtml file and name it MyHelpers.cshtml.
  3. Replace the existing content with the following:
    @helper MakeNote(string content) {       <div class="note" style="border: 1px solid black; width: 90%; padding: 5px; margin-left: 15px;">         <p>             <strong>Note</strong>&nbsp;&nbsp; @content          </p>       </div>   }

    The code uses the @helper syntax to declare a new helper named MakeNote. This particular helper lets you pass a parameter named content that can contain a combination of text and markup. The helper inserts the string into the note body using the @content variable.

    Notice that the file is named MyHelpers.cshtml, but the helper is named MakeNote. You can put multiple custom helpers into a single file.

  4. Save and close the file.

The next procedure shows how to use the helper you created to insert a note item into a web page.

  1. In the root folder, create a new blank file called TestHelper.cshtml.
  2. Add the following code to the file:
    <!DOCTYPE html>     <head>       <title>Test Helpers Page</title>     </head>     <body>       <p>This is some opening paragraph text.</p>          <!-- Insert the call to your note helper here. -->       @MyHelpers.MakeNote("My test note content.")          <p>This is some following text.</p>     </body>   </html>

    To call the helper you created, use @ followed by the file name where the helper is, a dot, and then the helper name. (If you had multiple folders in the App_Code folder, you could use the syntax @FolderName.FileName.HelperName to call your helper within any nested folder level). The text that you add in quotation marks within the parentheses is the text that the helper will display as part of the note in the web page.

  3. Save the page and run it in a browser. The helper generates the note item right where you called the helper: between the two paragraphs.

    ch03_layouts-12

Additional Resources

  评论这张
 
阅读(693)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017