ASP. MVC5 + EF6 Getting Started Tutorial (6) View in razor use

Original: ASP. MVC5 + EF6 Introductory Tutorial (6) View in razor use

Article Source: slark.net-Blog Park http://www.cnblogs.com/slark/p/mvc-5-ef-6-get-started-model.html

Previous section: ASP. MVC5 + EF6 Getting Started Tutorial (5) Model and entity Framework

Next section: Grid system for ASP. MVC5 + EF6 + Bootstrap3 (7) Bootstrap

SOURCE download: Click I download

I. Introduction of RAZOR

In Solution Explorer, view the files under the Views folder as shown in.

The suffix of the file is. cshtml. What kind of document is this? As the name implies, cshtml = cs + HTML is an HTML file that contains C sharp (C #) code.

Now that the file contains the client code in the original HTML file and server-side code like C #, we have to figure out a way to differentiate between the two types of code. This is where we need to razor.

What is Razor? A view engine? I'm looking for an expert who can give me a tall definition.

In my opinion, Razor is a markup language that distinguishes server-side code from other code.

Second, Razor notes

In order to better observe the results of the operation, we disable the template here. Open the _viewstart.cshtml file under the Views folder. Comment out all of the code, as shown in.

@*@{    Layout = "~/views/shared/_layout.cshtml";} *@

As you can see from above, the multiline comment in the cshtml file is written at the beginning of the first line @* and then at the end of the last line *@.

Razor's single-line comment is almost this form, write @* at the beginning of the line, write *@ at the end, as shown below.

@* A One line code comment *@

Iii. three basic forms of razor

Razor is the server-side code to determine the code for the specified area in three ways:

• inline (inline) markers
• Single line Mark
• MultiRow (multi-line) mark

Open the index.cshtml file in the first folder under the Views folder. Write the following code. The yellow part of the figure is the server-side C # code under the razor tag

<div>
<!--single line-->
　　@{var name = "Slark";}
@{Response.Write ("single line:name is" + Name + "<br/>");}

<!--inline-->
Inline:today is:@DateTime. now.tostring ("Yyyy-mm-dd") <br/>
Inline:name is @name <br/>

<!--multi-line-->
　　@{
var age = 25;
Response.Write ("Multi-line:age is" + Age + "<br/>");
}
</div>

As you can see from the above code, the inline tag can be followed by a variable that has already been defined or a function with a return value.

Each line in a single-line tag actually contains a C # statement, ending with a semicolon.

A multiline tag is a multi-line C # statement.

Iv. sequence of statements Run

Then select the index.cshtml you just edited and click "View in Browser" in the menu bar to display the results below.

Right click on the page to select "View Source", the results are as follows:

Single  line:name isslark<br  />multi-line:ageare<
     br  /> <Div>    <!-- Single Line -    <!--Inline -Inline:today is:2014-12-13 <BR/>Inline:name is slark <BR/>    <!--multi-line -</Div>

The result of the operation is not the same as what you think. The order in which this file is executed is this:

• The server searches the file for C # code in the Razor tag row by line, and executes it if it reads a single-or multiple-line code in C #. The result of the output after execution is the green part of the code above. If the inline code is found, replace the code with the value of the code corresponding to the yellow part of the code above. This file is processed once again.
• The server then writes all the non-razor tagged code in the file to the file to be output, corresponding to the blue and yellow portions of the code above.

V. keyword () {} special syntax

The razor tag can be written as a special form such as "@keyword () {}" when encountering a C # code structure that has the form "keyword () {}", such as if, for, and while.

This is not mandatory, can not be used. Here is a comparison of two examples.

Comment out the existing code in index.cshtml. Add the following code:

@if (1 > 2)
{
Response.Write ("1 > 2 <br/>");
}
Else
{
Response.Write ("1 <= 2 <br/>");
}

@for (int i = 0; i < 3; i++)
{
Response.Write (i + "<br/>");
}

Select View in Browser • To get the following results:

Vi. writing text within the razor tag

Comment out index.cshtml old code, write the code below.

@{    varName1 ="Slark"; <p>varName2 ="Slark";</p>    @:varName3 ="Slark"; <br/> <text>varName4 ="Slark"; <br/>varName5 ="Slark"; </text>}

Does the code look strange? Take a look at the results:

In general, the code in @{} is only run as C # code. In the above code, only name1 is treated as C # code and the other lines are treated as text output.

The previous content is to introduce how to embed the server code in the HTML file, now to explain how to embed HTML code in the server code ...

As shown in the code above, there are three ways to do this:

• In razor tagged code, if there is a pair of HTML tags, then this tag and its contents will be treated as normal text output. As above the <p>var name2 = "Slark";</p>
• If there is "@:" in the code in the razor tag, the following line of code is treated as plain text output. As above the @:var Name3 = "Slark"; <br/>
• If there is a <text>...</text> tag in the code of the razor tag, its contents are treated as normal text output. such as the above <text> var name4 = "Slark"; <br/> var name5 = "Slark"; </text>

Your recommendation and message is I continue to update the power, thank you.

Previous section: ASP. MVC5 + EF6 Getting Started Tutorial (5) Model and entity Framework

Next section: Grid system for ASP. MVC5 + EF6 + Bootstrap3 (7) Bootstrap

ASP. MVC5 + EF6 Getting Started Tutorial (6) View in razor use