3 - Creating a Consistent Look

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.

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:

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

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>

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.
In the Shared folder, create a file named _Header.cshtml.
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.

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>

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.
Run the Index.cshtml page in a browser. (Make sure the page is selected in the Files workspace before you run it.)
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>
```

software collections

Thursday, 1 September 2011

3 - Creating a Consistent Look

Creating Reusable Blocks of Content

No comments:

Post a Comment