WebMatrix Advanced Tutorials (4): How to use layouts

Microsoft published the Advanced Tutorials for Web development tools WebMatrix to help developers understand the most powerful web development tool in the history of Microsoft. The following tutorials will continue to be introduced in the next issue.

Guide: Microsoft WebMatrix is a free tool that you can use to create, customize, and publish Web sites on the Internet.
WebMatrix makes it easy for you to create sites. You can start with an open source application (such as WordPress, Joomla, DotNetNuke, or Orchard), and WebMatrix will handle the tasks of downloading, installing, and configuring these applications for you. Or you can use many of the built-in templates to write your own code that will help you get started quickly. Whatever your choice, WebMatrix provides everything you need to run your site, including Web servers, databases, and frameworks. By using the same stack that you will use on the web host on your development desktop, the process of getting your site 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, SQL, database, and more, and how to write simple Web applications in just a few hours. The contents are as follows:

So far, you've learned how to use WebMatrix to create a very simple Web page that runs in several different browsers and how to use CSS styles to make Basic Web pages more aesthetically pleasing.

In this chapter, you'll go a step further and start using server programming. You may be accustomed to client-side programming, such as building applications that run on phones, desktops, or even JavaScript applications that run inside a browser. The important difference in server programming is that many application code does not run on client devices. Instead, the end user's action initiates a Web request to the server, and if the page is an "active" webpage, the server runs the code and uses that code to generate the HTML tags and values that will be sent to the browser. Then the browser renders this HTML and the user sees the results displayed.

As your skills continue to improve, you'll find it useful to mix code together sometimes, with some code running on the browser (typically using rich Internet application (RIA) technologies such as JavaScript or Silverlight), and the remaining code running on the server.

WebMatrix introduced the Razor syntax for Web programming, which provides a very powerful feature, but very simple, that is, the layout engine. In this article we will describe using the layout feature to place all common HTML (such as Create a cshtml Web page that uses razor

So far, you have created a use. HTM or. HTML extension for HTML pages. These are static pages, so when the browser calls their addresses, the server sends them and their contents to the browser. The server does not process the webpage in any way.
You may have heard of "dynamic" Web pages that were built by the server based on HTML and the code that runs on the server to determine how the Web page should be built, and the content being built will be HTML. Dynamic Web pages enable truly powerful usage scenarios that will be used by subsequent content in this series. In addition, they will allow you to store your movie in a database, let the server use the data in the database to generate the content of your Web page, you do not have to write the movie title directly on the HTML page, or change the page when you want to change the list.
In this section, you will create the first Dynamic Web page.

In WebMatrix, dynamic Web pages have. CSHTML or. vbhtml extension. They are actually HTML files that contain inline code written using C # (CS) or Visual Basic (VB), as you can see from the extension. I'll use the CSHTML file to write inline code on a Web page using the C # language. The method of doing this, and the syntax that supports doing this inside HTML, has the nickname "Razor".
We create a Dynamic Web page.

Using WebMatrix, in the Files workspace, create a new cshtml Web page named movies.cshtml:

WebMatrix will create a Web page that looks like a basic HTML page. Replace the contents 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 piece of code look strange? There is no <HTML> tag in the code, there is no <HEAD> or <BODY> tag, but it will still take effect! Or at least be basically effective. Run it and you will see the following interface:

Headers and footers

The page above is very similar to the page we created earlier, but let's define the page header as everything before <div> in the HTML that contains the movie list, and define the footer as everything in the HTML that contains the <div> of the movie list. Don't confuse this with the Create a new Web page named "pageheader.cshtml" to copy all of the contents of default.html movieslist <div> above it. It should resemble the following:

<! DOCTYPE html>  
Similarly, create a new web page called "pagefooter.cshtml", and copy all of the contents of Movieslist <div> below default.html into it. It should resemble the following:



<footer> This    site was built using Microsoft WebMatrix.       <a href= "Download>http://web.ms/webmatrix" >download it now.</a>    </footer>  </ Html>
Add headers and footers dynamically using razor

Now that you have created both pages, use "Razor" to write the first part of the server code. WebMatrix highlights the difference between HTML and "Razor" code by using the "@" character. Place this character before any line of code that indicates how the server operates.
For example, the following command:
The @RenderPage ("PAGENAME") causes the server to load the html from "pagename" and place it in this location in the current file. So for our example, if you change movies.cshtml to:

@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")
When you run the Web page, it will resemble the following interface:


 It looks exactly like a static HTML file. You should not be surprised because it now has the same header and footer (including code that requires Web pages to load CSS) as well as the same body text. However, you can see that the page is now handled much more easily because all header and footer code does not need to be processed, and any new pages you create will have the same header, footer, and style sheet. 
 
 Create a layout page 
 
 Use this method, you create a Web page, and then use the razor code to include the header and footer code on the Web page when the page runs. This is a bottom-up approach. 
 Another possible more effective way is to create a layout that serves as a template for each page, and then include the specific content that you want in the template. This is more like a top-down approach. 
 Let's see how it works: Create a new cshtml Web page, and you'll name it _sitelayout.cshtml. The 
 replaces the content of the created Web page with the following content. You may find this code familiar because they are all of the content in a static default.html Web page you created earlier 

<! DOCTYPE html>  
Now replace the <div> named "Movieslist" with the following code:

@RenderBody ()

Remember, we said before that the "@" symbol tells WebMatrix to run the code on the server at this time. The Renderbody command simply tells WebMatrix to render the contents of the page in this location.

Here's what the _sitelayout.cshtml page should now contain:

<! DOCTYPE html>  
So, for the page movies.cshtml you just created, the contents of the page are <div> and <ol><li> lists. So the idea is that when you browse to the CSHTML page, WebMatrix uses the layout page to determine how to draw the page, so it gets the title, CSS, and everything from the layout page.

Do not forget to remove the @renderpage command from movies.cshtml before attempting this code.

Then create a new _pagestart.cshtml

Replace the contents with the following:

@{      Layout = "~/_sitelayout.cshtml";   }
_pagestart.cshtml tells the launched Cshtml page to associate with the layout file



Start movies.cshtml now and you'll see the effect



Remark: 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;  }
The above is WebMatrix Advanced Tutorial (4): How to use the content of the layout, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

