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.

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.

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.

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.

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>

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.
Click Hide List. The list disappears and the button changes to Show List.
Click the Show List button, and the list is displayed again.

software collections

Monday, 5 September 2011

Passing Data to Layout Pages

No comments:

Post a Comment