Some properties and methods of the Razor view engine

Reference URL: http://www.cnblogs.com/hangwei/p/4391058.html

ASP. NET MVC 5 Web Programming 4--razor view engine

2015-04-30-Hangwei, 1575 Read, 1 Reviews, favorites, edit

Razor Introduction

Razor is a new view engine for ASP., Microsoft's youngest vice president, with "ASP." NET's father "called Scott Guthrie-led team development.

Scott Guthrie, a leading razor developer, graduated from Duke University, USA. Executive vice president of Microsoft Cloud Computing and Enterprise product engineering.

Razor has made a reflection on the way traditional ASPX pages are written and rendered, so it has been optimized for both code writing and HTML generation. RZAOR's design objectives follow these points:

a). Minimize code

b). Get started fast, just need the existing programming language and basic HTML knowledge

c). You can use Notepad to write

d). Easy Unit Testing

The Rzaor View engine page ends with a. cshtml (or. vbhtml) file suffix, which is the page representation that ASP. NET MVC 5 uses by default.

Razor vs. aspx view engine

To have an intuitive understanding, let's first look at a simple User Management page implementation:

The assumed page rendering effect is our ultimate goal. Let's take a look at the Razor implementation page:

@{Layout = null;} @model ienumerable<mvc5demo.models.userinfoviewmodel><! DOCTYPE html>
Also post the code for the traditional ASPX page (note: The Style Code section is omitted):
 View Code 
Standing in the razor angle,
Unlike the code implemented with traditional ASPX pages, the main points are the following:
1. The "GridView" server control is not used (or no such control is available);
2. Use the @ symbol instead of <%=%> to access the server code;
3. Use the HTML helper functions provided by MVC to render the page (instead of the server control form);
4. Other differences (such as the page header).
As you can see, Razor's page processing is more "fine", a bit like JSP on the page display (or Back to ASP?), you need to have basic HTML knowledge (such as a table), because "View Designer", "server control" These things you used to know, "not exist".
Let's look at the differences between the HTML source code generated by the two view engines. First look at the HTML generated by the Razor page:
<! DOCTYPE html>
Overall, very "clean". It's almost the same as the code written by Razor. Then look at the HTML generated by the ASPX page:
 View Code 
Intuitive, a little more "ViewState". Does the comparison above show that MVC is better than webforms in terms of performance and writing?
In this regard, first notice in Razor introduction, Razor is a separate rendering engine. So far no professional team has tested the difference between it and WebForms from a performance point of view and given the actual results (the estimated results are not quite the same). Secondly, I personally agree with Lao Zhao's view (say a few words for WebForms), high-performance Web applications are mostly independent of the implementation technology used. MVC and WebForms each have various advantages and suitable application scenarios, blindly depress WebForms raise MVC, a kind of follow-up and wall grass suspicion.
Razor syntax
1). @ identifier
The @ symbol represents the beginning of the razor code block, without the need to add '%> ' to the end, as WebForms does. Razor will automatically start at the right of the @ symbol, judging what is behind the scenes and which is the foreground HTML.
2). Normal output
As in the. cshtml file, enter the following code:
@DateTime. Now;
What does the front desk show? Such as:
Front Desk display time + ";" (Note this semicolon), after the single statement @ symbol, write code, do not need to add a semicolon, and the semicolon will be used as HTML text to output to the foreground. 
 If you are writing a mix of code and text, you can:
Time @DateTime. Now week: @DateTime. Now.dayofweek
Text and razor code, with spaces in between, so that the view engine can determine that the @ is the code part.
There is also a simple way to mix text and code:
@ ("Today is:" + DateTime.Now.Year + "year.")
Use @ () for multi-sign statement output.
3). Output in a statement block
Statement block, using @{} to represent a piece of code.
        @{            @DateTime. now.month;            <br/>            <label> block variable output:</label>            int x = 8;            @x;        }
In the statement block, it is important to note that:
A. Using the @ symbol for output, and because the block follows the C # code mechanism, it is recommended to add a semicolon (';'), this semicolon will not output to the foreground page;
B. Directly using HTML tags, will automatically be recognized as the foreground code. This is really convenient, think of a C # code in the compilation environment, directly write HTML tag output ... ；
C. Cannot output characters directly, such as writing "test" directly in the code block, test, etc., are not allowed, please keep in mind that the code block is followed by C # (or VB) environment;
D. Other writing methods with background code.
4). HTML helper Functions
In the old way, we are outputting HTML text in the code forward, which can be achieved, but, not very ideal. Like myself, I used to use a page rendering style like Jsrender. Now, with the help of Razor's HTML helper functions, code output HTML can be easily implemented.
Use the @helper syntax to customize helper functions (snippets can be placed anywhere).
    @helper pList (list<string> lst)    {//html auxiliary function        <ul>            @foreach (string P in lst)            {                <li >@p</li>            }        </ul>    }
Then use
        HTML helper functions:        @{            list<string> LSTs = new List<string> {"A", "B", "C", "D", "E"};            @pList (LSTs);        }
Because a function named plist is defined, it can be called directly when used.
5). Other
A) Some writing habits are equivalent in function, such as conditional judgment, cyclic branching:
        @if (1 = = 1) {}        @foreach (string p in LSTs) {        }        @{            if (1 = = 1) {}            foreach (String p in LSTs) { }        }
b) code comments, using @* ... *@
        @*            Code Comment:            http://www.cnblogs.com/hangwei        *@
c) output @ symbol, using @@
d) String Conversions
       String conversion:        @{            String str = "10000";            @str. Asint ();//Follow the background code form in the Block        }
6). Use of layouts (templates)
A) Layout page usage
First you need to create a new view file in the views/shared directory under the MVC project (this directory is used to store layout (template) files by default). Here we create a new testlayout.cshtml with the following code:
@{    Layout = null;} <! DOCTYPE html>
Defines the content of the layout page, the portion of the child page, expressed in @renderbody (). Create a new child page to apply this layout page with the following code:
@{    Layout = "~/views/shared/testlayout.cshtml";} <! DOCTYPE html>
At the beginning of the page, use layout to specify the address of the template page. Let's look at the foreground display effect:
It is important to note that MVC differs from WebForms in that a child page is displayed (rendered) before the layout page.
b) Flexible use of layout pages (rendersection)
Sometimes we need the area content of the page not determined by the layout page, but dynamic, the page itself determines the rendering of the content. The rendersection is then used. For example, we add the following code to the layout page testlayout.cshtml:
    <div id= "Menu" >        <!--Let the child page decide how to render the menu-->        @RenderSection ("menu", false) @* Note that this method may be different from the previous version of MVC. False indicates optional (not required) *@    </div>
Then add the following code to the child page:
    @section menu{        <ul id= "submenu" >            <li>Item1</li>            <li>Item2</li>        </ul>    }
Foreground display effect:
Some properties and methods of the Razor view engine