ASP. NET Mvc Razor view syntax, mvcrazor

Source: Internet
Author: User
Tags reflector

ASP. NET Mvc Razor view syntax, mvcrazor
In ASP. net mvc has two sets of template engines, one is ASPX and the other is Razor. Friends who have been engaged in WebForms development are familiar with ASPX templates, the following describes some syntax of the Razor template engine that I am familiar with for your reference:

In ASPX, we use <%> to write C # code in it.

In Razor, we will use the @ symbol core syntax, which provides a lot of convenience for programmers. I will give an example one by one:

1. First, how to define variables. If we define C # variables in the. cshtml view, we can first define a C # code block and write the C # syntax in this code block.

Define a C # code block:

@{// Define a variableString name = "I Am a string ";}
// Output this string@ Name

2. If we have a requirement to output 10 <span> Tiananmen, Beijing </span>, we must use the for loop.

@ For (var I = 0; I <10; I ++) {<span> Tiananmen, Beijing </span>}

Some people may have questions about why we can directly write html tags in the C # code segment. In ASPX, we must put the C # code in <%>, because the Razor engine has a very powerful function, that is, automatic identification <> (angle brackets). When you encounter <> in Razor, Razor automatically recognizes the Html syntax, when you see the @ symbol, you will know how to write C # code.

Then we have doubts about how Razor views are identified? In ASPX, our. aspx page and. aspx. cs page, they will be compiled into two classes after compilation, and. aspx inherits from. aspx. cs in. after cshtml is compiled, it will also be compiled into a class. How can we see this class? We need to use our artifact. NET Reflector for decompilation.
// We can find a. cshtml output section to indicate the path of the output view assembly.@ This. GetType (). Assembly. Location

C: \ Windows \ Microsoft. NET \ Framework \ v4.0.30319 \ Temporary ASP. NET Files \ vs \ fc705515 \ 4aff2ded \ App_Web_ju12f1hu.dll similar path, then we can find this dll file and drag it. NET Reflector.

We can see that the. cshtml page is compiled into the class _ Page_Views_Employee_Index_cshtml, which inherits WebViewPage <object>. This class has an Execute method to override the parent class. From the method, we can easily see some html labels: for example, <! DOCTYPE html> and so on. This method Concatenates the html Tag content. The C # code is defined and executed in this method, and then the output content is spliced. 3. when the Razor view engine parses the labels in the C # syntax block, it will automatically find the end tag. If the end tag is not found, the Razor view engine will report an error, unless it is a single tag, for example: Custom <beijing/> 4. when compiling a page class, the Razor view engine considers the @ symbol as the C # syntax, if the C # statement block contains <>, it is automatically processed as a string. now I have a requirement that I want to output 10 items in a loop. I Love Tiananmen, Beijing without any tag modification. How can I do this?
// Method 1 @ {var str = string. empty; for (var I = 0; I <10; I ++) {str + = "I Love Tiananmen Square in Beijing ";}} @ str // method 2 @ for (var k = 0; k <10; k ++) {<text> Tiananmen, Beijing </text>}
The first method is cumbersome, because the Razor view engine can recognize <>. If you write in the @ {} Code directly, I will report an error in Beijing Tiananmen, this is not a C # syntax. If you use <span> </span> to modify the syntax, You can implement it. However, when we view the source code of the webpage, we can see that this is not the expected result. Therefore, we introduced the second method: <text> </text> label, which is a tag inherent in Razor. The text written in this tag can be output to the browser as it is. 6. As we mentioned earlier, Razor can recognize <>. What if we want to Output C # data in html?
// Controller public ActionResult check () {Person p = new Person () {Name = "aa"}; return View (p );} // view @ for (var I = 0; I <10; I ++) {// You can transmit data from the Controller to the view, if the following situation is output, <B> asdsad@Model.Name ~~~~~ </B>} // output result: asdsad@Model.Name this is obviously not the result we wantSo what if we correct it? We need to add a space before the @ symbol so that Razor is recognized.<B> asdsad @ Model. Name ~~~~~ </B>

 

// We can draw a conclusion:

If you want to output a C # statement in html, add spaces to the @ symbol; otherwise, use the @ symbol as a string.

// Controller public ActionResult check () {Person p = new Person () {Name = "aa"}; ViewBag. CName = "cc"; return View (p);} // View I want to output a cc. what about CName?// If this output is returned, the compiler reports an error. The Compiler resolves it to cc and has a CName attribute, but this attribute is not found in cc.@ ViewBag. CName. CName // you can use @ (ViewBag. CName). CName

 

7. Now I use C # to define an html Tag and then output it to the browser.

// Method 1

@ {String str = "<input type = 'text' value =''> ":} @ str // output result <input type = 'text' value = ''> // The output result is displayed in the source code of the webpage, the html input tag <> we wrote will be escaped. Obviously it is not the expected result. If we want to output a complete input tag, // The first method is to use @ Html. raw (str ), output html without escaping // The second method outputs html without escaping using HtmlString @ {HtmlString htmlRaw = new HtmlString ("<input type = 'button 'value = ''>" );} @ htmlRaw // method 3 @ {MvcHtmlString mvcStr = new MvcHtmlString ("<p> I won't be escaped </p> ");} @ mvcStr // Method 4 // use the MvcHtmlString static method Create to output unescaped html @ {var _ str = MvcHtmlString. create ("<p> I am method 2 </p>");} @ _ str
I will introduce this to you today. It is not necessarily correct. You are welcome to criticize and correct it.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.