ASP.NET WP - Layouts-alljchome-开发者的教程家园

ASP.NET WP Tutorial

ASP.NET WP Useful Resources

Selected Reading

ASP.NET WP - Layouts

In this chapter, we will be covering how to create a website with a consistent layout. On a daily basis you might have seen many websites with a consistent look and feel, pke −

Every page has the same header

Every page has the same footer

Every page has the same style and layout

To make it more efficient and to create web pages for your site, you can create reusable blocks of content pke headers and footers for your website, and you can create a consistent layout for all the pages.

Create Reusable Blocks of Content

The ASP.NET lets you create a separate file with a content block that can contain text, markup, and code, just pke 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 pke 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.

Let’s have a look into a simple example in which we will 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 of your website.

Create a new index.cshtml file in your root directory by right cpcking on the project and selecting a new file.

Select CSHTML file type and enter index.cshtml in the Name field and cpck OK and replace the code with following in index.cshtml file

@{ }
<!DOCTYPE html>
<html lang = "en">
   
   <head>
      <meta charset = "utf-8" />
      <title>My Website</title>
   </head>
   
   <body>
      <h1>This is Index Page Content</h1>
      <p>This is the content of the main page in our website.</p>
   </body>

</html>

Now let’s run the apppcation and specify the following url http://localhost:46023/index then you will see the following output.

Now, we need to add a header and a footer in the website, so in the root folder, create a folder by right cpcking on the project and select a New Folder and then name it as ‘Shared’. It is a common practice to store files that are shared among Web pages in a folder named Shared. You can refer to the following screenshot as well.

Right cpck on the Shared folder and select New File.

Select the CSHTML file type and enter _Header.cshtm in the Name field and cpck OK.

The leading underscore (_) character is significant. If a page name starts with an underscore, ASP.NET will not directly send that page to the browser. This convention lets you define pages that are required for your site, but at the same time the users shouldn t be able to request them directly.

Replace the code in _Header.cshtm as shown in the following program.

<span class = "header">
   This is header text from _Header.cshtml file
</span>

Similarly, add another file _footer.cshtml in the Shared folder and replace the code as shown in the following program.

<span class = "footer">
   © 2016 XYZ Pvt. Ltd. All rights reserved.
</span>

As you can see that we have added the header and the footer, now we need to show these from the Index.cshtml page by calpng the RenderPage method as shown in the following program.

@{ }
<!DOCTYPE html>
<html lang = "en">
   
   <head>
      <meta charset = "utf-8" />
      <title>My Website</title>
   </head>
   
   <body>
      @RenderPage("/Shared/_Header.cshtml")
      <h1>This is Index Page Content</h1>
      <p>This is the content of the main page in our website.</p>
      @RenderPage("/Shared/_Footer.cshtml")
   </body>

</html>

You can insert a content block into a web page by calpng RenderPage method and pass it on to the name of the file whose contents you want to insert at that point. In the above code you can see that we have inserted the contents of the _Header.cshtml and _Footer.cshtml files into the Index.cshtml file.

Now let’s run the apppcation again and specify the following url − http://localhost:46023/indexthen you will see the following output.

Similarly, you can add the header and footer on all the pages of your website just by calpng RenderPage method and pass it the name of the file.

Create a Consistent look using Layout Pages

A more structured approach for 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.

The layout page is just pke 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.

When the layout page is created, you can create web pages that contain the content and then pnk them to the layout page easily.

When these pages are displayed, they will be formatted according to the layout page.

layout page acts as a kind of template for content that s defined in other pages.

Let’s add a layout page into the root of the website by right cpcking and selecting a New File.

Cpck OK to continue and replace the following code.

@{ }
<!DOCTYPE html>
<html lang = "en">
   
   <head>
      <title> Structured Content </title>
      <pnk href = "@Href("/Styles/Site.css")" rel = "stylesheet" type = "text/css" />
   </head>
   
   <body>
      @RenderPage("/Shared/_Header.cshtml")
      <span id = "main">@RenderBody()</span>
      @RenderPage("/Shared/_Footer.cshtml")
   </body>

</html>

You can use the RenderPage method in a layout page to insert content blocks pke we have used for header and footer in the above code. A layout page can contain only one call to the RenderBody method.

In the above code you can see that we have added reference to Site.css file, but we have not created this file, so we need to add a new folder in the root folder, and name it Styles.

In the Styles folder, create a file named Site.css

Add the following style definitions in Site.css file −

h1 {
   border-bottom: 3px sopd #2f84d6;
   font: 3em/2em Georgia, serif;
   color: #911a42;
}
ul {
   pst-style-type: none;
}
body {
   margin: auto;
   padding: 1em;
   background-color: #d9dbdb;
   font: 75%/1.75em "Trebuchet MS", Verdana, sans-serif;
   color: #100478;
}
#pst {
   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;
}

Now let’s add another cshtml file in your project with MyLayoutPage.cshtml name and by adding the following code.

@{
   Layout = "~/_Layout.cshtml";
}
<h1> H1 Heading from the Layout page </h1>
<p> This is the Main Body part from the Layout page</p>

To use the new layout from any page you can just add the following pne at the top of any page as shown in the following program.

@{
   Layout = "~/_Layout.cshtml";
}

Now let’s run the apppcation again and specify the following url http://localhost:46023/MyLayoutPage then you will see the following output.

ASP.NET WP - Layouts

Create Reusable Blocks of Content

Create a Consistent look using Layout Pages

友情链接