Razor, razor

Razor, razor

When learning MVC, you will always see the default Razor when creating a controller:

Then, we can write the following in the created View:

<! -- Create a user name text box, equivalent to <input type = "text"> --> @ * @ Html. TextBoxFor (model => model. UserName )*@

So what are the things with @ That don't look like html but put on The View? Let's start from the beginning ~~

1. What is Razor?

 

Razor is a markup syntax that allows you to embed server-based code (Visual Basic and C #) into a webpage.

When a webpage is written into a browser, the server-based code can create dynamic content. When a webpage is loaded, the server executes the server-based code on the page before returning the page to the browser. Because it is running on the server, this code can execute complex tasks, such as accessing the database.

Razor is based on ASP. NET and designed for web application creation. It has the capabilities of traditional ASP. NET tags, but is easier to use and learn.

For programmers, the familiar language is the server-side language, which is easier to write than html... And more powerful functions, also very studious! (The benefits are still being explored ..)

 

Ii. Syntax Rules

Take C # as an example,

Demo example:

<! -- Basic Syntax 1: starts with the @ symbol + {code block} or with the @ symbol. --> <! -- Declaring a variable in a code block should end with a good score, and no extra points are required when using the variable --> <! -- There cannot be any html characters before the @ symbol; otherwise, the variable will be output as is in the form of a string --> <! -- When writing variables in C # columns, Razor is case sensitive. --> <div >@{ int id = 100; var ID = 101; string Name = "Capital name"; string Name = "variable case sensitive ";} </div> <div> @ id </div> <div> @ ID </div> <div> @ Name </div> <div> @ name </div> <div> Hi @ name </div> <! -- Basic syntax 2 ::: String concatenation --> <div> String concatenation: aa @ name bb </div> <div> String concatenation: begin @ {@ Name} End </div> <! -- Basic syntax 3: Use text --> <div >@{< div> internal <br/> text 1 </div> @: internal <br/> text 2} </div> <! -- Basic syntax 4 ::: annotation usage --> <div >@{// comment 1, single line comment @ * Comment 2, multi-line comment * @} </div> <! -- Basic syntax 5 :::: usage of cyclic statements --> <div >@{ for (int I = 0; I <10; I ++ ){@: @ I }}</div> <! -- Basic syntax 6 ::: special symbol usage --> <div >@{ var password = @ "123456! @ # $ % ^ \ ""; @ * Note: When double quotation marks are output, add a pair of double quotation marks to escape. * </div> <div> @ password </div> <div ></div>

Result

We can view the source code on the webpage and see the pure HTML code (Part ):

It can be seen that Razor is finally parsed into HTML format for display.

Iii. Working Principle Analysis

A Razor webpage can be described as an HTML page with two types of content: HTML content and Razor code.

After the server reads such a page, it first runs the Razor code before sending the HTML page to the browser. The Code executed on the server can complete tasks that cannot be completed in the browser, such as accessing the server database. The server code can create dynamic HTML content before the page is sent to the browser. From the browser's perspective, the HTML generated by the server code is no different from the static HTML content, for example, the web page source code we see above.