WebMatrix Advanced Tutorial (4): How to use layout

Microsoft released an advanced tutorial on the Web development tool WebMatrix to help developers understand this, which is known as the most powerful Web development tool in Microsoft history. In this issue, we will continue to introduce you to the following tutorials.

Introduction: Microsoft WebMatrix is ​​a free tool that can be used to create, customize, and publish websites on the Internet.
WebMatrix enables you to create websites easily. You can start with an open source application (such as WordPress, Joomla, DotNetNuke or Orchard) and WebMatrix handles the task of downloading, installing and configuring the application for you. Or you can write the code yourself using the many built-in templates that will help you get started quickly. Whatever you choose, WebMatrix provides everything your website needs to run, including web servers, databases, and frameworks. By using the same stack on your development desktop that you would use on your web host, the process of bringing your website online is easy and smooth.
You can download it from http://web.ms/webmatrix.
Now you can learn to use WebMatrix, CSS, HTML, HTML5, ASP.NET, SQL, databases, and how to write simple web applications in just a few hours. The content is as follows:

So far, you have learned how to use WebMatrix to create a very simple web page, how this web page runs in many different browsers, and how to use CSS styles to make a basic web page more beautiful. .

In this chapter, you will take a step further and start using server programming. You may be used to client-side programming, such as building applications that run on the phone, the desktop, or even JavaScript applications that run within the browser. An important difference with server programming is that much application code does not run on the client device. Instead, an end-user action initiates a request for a web page to the server, and if the web page is an "active" web page, the server runs code and uses that code to generate HTML tags and values ​​that are sent to the browser. The browser then renders this HTML and the user sees the results displayed.

As your skills develop, you'll find it sometimes useful to mash together code, some running in the browser (often using rich Internet application (RIA) technologies like JavaScript or Silverlight ) and the remaining code runs on the server.

WebMatrix introduces Razor syntax for web page programming. It provides a very powerful but very simple function, that is, the layout engine. In this article we'll look at using the layout feature to put all the common HTML (like

and footer content) in one place and automatically generate it for your web pages, so that when building a page (like a movie list), The page's file will only have the main content of the page, and you can add and have full control over the remaining content.
Creating CSHTML web pages using Razor

So far, you have created HTML web pages using the .HTM or .HTML extension. These are static web pages, so when the browser calls their address, the server sends them and their content to the browser. The server will not process this page in any way.
You may have heard of "dynamic" web pages, which are web pages built by a server based on HTML and code that runs on the server to determine how the web page should be constructed, and the content of the build will be HTML. Dynamic web pages enable really powerful use cases, and the remainder of this series will use them. Among other things, they will allow you to store movies into a database and let the server use the data in the database to generate the content for your web page, without you having to write the movie title directly on the HTML page or changing the page when you want to change the listing.
In this section, you will create your first dynamic web page.

In WebMatrix, dynamic web pages have the .CSHTML or .VBHTML extension. They are actually HTML files containing inline code written in C# (CS) or Visual Basic (VB), as you can tell from the extension. I'll be using CSHTML files, which allow me to write inline code on the web page using the C# language. The method for doing this, and the syntax that supports doing it inside HTML, has the nickname "Razor".
We create a dynamic web page.

Using WebMatrix, in the Files workspace, create a new CSHTML web page called movies.cshtml:

WebMatrix will create a web page that looks Looks like a basic HTML web page. Replace the content of this page with the following:

<div id="movieslist">  
  <ol>  
   <li><a href="#">Its a wonderful life</a></li>  
   <li><a href="#">Lord of the Rings</a></li>  
   <li><a href="#">The Fourth World</a></li>  
   <li><a href="#">The Lion King</a></li>  
  </ol>  
 </div>

Does this code look weird? There is no tag in the code, no

or tags, but it still works! Or at least basically effective. Run it and you will see the following interface:

页眉和页脚
 
上面的网页非常类似于我们之前创建的网页，但是让我们将网页页眉定义为HTML中包含电影列表的

之前的所有内容，将页脚定义为 HTML中包含电影列表的

之后的所有内容。不要将此与您到目前为止一直使用的 default.html 网页的

和

标记混淆了。
创建一个名为“PageHeader.cshtml”的新网页，将 default.html 中 moviesList

上方的所有内容复制到它之中。它应该类似于：

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8" />  
  <title>My Favorite Movies</title>  
  <link rel="stylesheet" type="text/css" href="movies.css" />  
</head>  
<body>  
  <header>  
    <h1>A list of my Favorite Movies</h1>  
  </header>

类似地，创建一个名为“PageFooter.cshtml”的新网页，将 default.html中moviesList

下方的所有内容复制到它之中。它应该类似于：

 <footer>  
  This site was built using Microsoft WebMatrix.   
    <a href="Download>http://web.ms/webmatrix">Download it now.</a>  
  </footer>  
</html>

使用Razor动态添加页眉和页脚
 
现在您创建了这两个网页，接下来使用“Razor”编写第一部分服务器代码。WebMatrix 通过使用“@”字符，突出了HTML和“Razor”代码之间的区别。将此字符放在指示服务器如何操作的任何代码行之前。
例如，以下命令：
@RenderPage("pagename")将导致服务器从“pagename”加载HTML并将它放在当前文件中的此位置。所以对于我们的示例，如果将movies.cshtml更改为：

@RenderPage("PageHeader.cshtml")  
  <div id="movieslist">  
  <ol>  
    <li><a href="#">Its a wonderful life</a></li>  
    <li><a href="#">Lord of the Rings</a></li>  
    <li><a href="#">The Fourth World</a></li>  
    <li><a href="#">The Lion King</a></li>  
  </ol>  
  </div>  
@RenderPage("PageFooter.cshtml")

当运行网页时，它将类似于以下界面：

它与静态 HTML 文件的外观完全一样。您不应该感到奇怪，因为它现在具有相同的页眉和页脚（包括要求网页加载 CSS 的代码）以及相同的正文文本。但是可以看到，现在对页面的处理轻松多了，因为所有页眉和页脚代码都不需要处理，您创建的任何新网页都将具有相同的页眉、页脚和样式表。
 
创建布局网页
 
使用此方法，您创建了网页，然后在页面运行时使用Razor代码将页眉和页脚代码包含在网页上。这是一种自底向上的方法。
另一种可能更有效的方法是创建一个布局，将该布局用作每个网页的模板，然后将您想要的特定内容包含在该模板中。这更像是一种自顶向下的方法。
我们看一下它的工作原理：创建一个新CSHTML网页，您将它命名为 _siteLayout.cshtml。
将创建的网页的内容替换为以下内容。您可能发现这些代码很熟悉，因为它们是您之前创建的静态 default.html 网页中的所有内容

 <!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8" />  
  <title>My Favorite Movies</title>  
  <link rel="stylesheet" type="text/css" href="movies.css" />  
</head>  
<body>  
  <header>  
    <h1>A list of my Favorite Movies</h1>  
  </header>  
  
  
    
  
      
It's a wonderful life
  
      
Lord of the Rings
  
      
The Fourth World
  
      
The Lion King
  
    
  
  
  
  
This site was built using Microsoft WebMatrix.   
Download it now.  
  

现在将名为“movieslist”的 

 替换为以下代码：

@RenderBody()

请记住，前面我们说过“@”符号告诉WebMatrix此时在服务器上运行代码。RenderBody 命令只是告诉 WebMatrix 在此位置呈现网页的内容。

下面是 _sitelayout.cshtml 网页现在应该包含的内容：

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8" />  
    <title>My Favorite Movies</title>  
    <link rel="stylesheet" type="text/css" href="movies.css" />  
  </head>  
<body>  
  <header>  
    <h1>A list of my Favorite Movies</h1>  
  </header>  
  @RenderBody()  
  <footer>  
    This site was built using Microsoft WebMatrix.   
    <a href="http://web.ms/webmatrix">Download it now.</a>  
  </footer>  
</html>

所以，对于您刚才创建的网页movies.cshtml，该网页的内容为 

 和 

1.  列表。因此我们的理念是，当您浏览到 CSHTML 网页时，WebMatrix 将使用布局网页确定如何绘制网页，因此它获取标题、CSS 和来自布局网页的所有内容。

   在尝试此代码之前，不要忘记从movies.cshtml 删除@RenderPage 命令。

   然后新建 _PageStart.cshtml

   把其中的内容替换为:

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

   _PageStart.cshtml告诉启动的 cshtml 页与布局文件关联
   

   
   

   现在启动movies.cshtml,便可看到效果

   
   

   备注:movies.css

   
   

   [css] view plain copy

   body {  
   font-family: Tahoma, Verdana, Geneva, sans-serif;  
   width: 85%;  
   margin: 20px auto;  
   }  
      
   header {  
   padding: 10px;  
   border-bottom: 1px solid #e5e5e5;  
   }  
      
   header h1 {  
   font-size: xx-large;  
   font-weight: normal;  
   padding: 0px;  
   margin: 0px;  
   }  
      
   #movieslist{  
   margin: 20px 0;  
   }  
      
   #movieslist ul {  
   list-style: none;  
   margin: 0;  
   padding: 0;  
   }  
      
   #movieslist li a {  
   font-size: large;  
   color: #000000;  
   display: block;  
   padding: 5px;  
   }  
      
   #movieslist li a:hover {  
   border-left: 10px solid #94c9d4;  
   padding-left: 10px;  
   background-color: #e7f5f8;  
   text-decoration: none;  
   }  
   footer {  
   font-size: smaller;  
   color: #ccc;  
   text-align: center;  
   padding: 20px 10px 10px 10px;  
   border-top: 1px solid #e5e5e5;  
   }

    以上就是WebMatrix进阶教程(4)：如何使用布局的内容，更多相关内容请关注PHP中文网（www.php.cn）！