ASP. NET MVC View Engine Razor Introduction

Source: Internet
Author: User

ASP. NET MVC View Engine Razor Introduction 1.Razor Introduction Program Park Original, reproduced please specify: http://www.kwstu.com/ArticleView/dabaomvc_201408240820545275

1) the ASP. NET MVC3 brings a new view engine named Razor that provides the following benefits:

    • Razor's syntax is simple and clear, requiring only minimal input
    • Razor easy to learn, syntax similar to C # and VB
    • Visual Studio provides smart hints and syntax coloring for Razor
    • Razor views do not need to allow programs or start a WEB server to test

2) Razor now offers a number of new features:

    • @model used to specify the model type to upload to the view
    • @* * Comment Syntax
    • For the entire site, you can set default items, such as layouts, at once.
    • The Html.raw method provides output that is not HTML-encoded
    • Support for sharing code between multiple views (_viewstart.cshtml or _viewstart.vbhtml)

3) Razor also contains new HTML Helper, for example:

    • Chart. Generate chart
    • WebGrid, generating data tables to support full pagination and sorting
    • Crypto, use hash algorithm to create hash and salt-adding passwords
    • Webimage, creating pictures
    • WebMail, send e-mail
2.Razor File types

Razor supports two file types, the. cshtml and. Vbhtml, where the. cshtml server code uses the C # syntax. Vbhtml's server code uses the vb.net syntax.

As you can see, razor is actually a code template that is mixed with server code and HTML code, similar to an. aspx file without a post code.

3.Razor syntax @ symbol

The @ character is an important symbol in razor, which is defined as the starting symbol for the Razor server code block. If we want to output a variable in the Web page, or the current date, we can use the following code:

@{string productName = "Table lamp";}    <span> @productName </span>    <span> @DateTime. now.tostring ("yyyy-mm-hh") </span>

When you're done with this code, you'll find that vs 2012 gives us code coloring and IntelliSense:

To run this code, let's look at what the browser displays:

As you can see from this example, the @ symbol marks the output of an HTML code, after which the variables, method return values, and expression operations results are output.

code block definition of 4.Razor syntax

You can use @{code} to define a block of code.

@{    int num1 =10;    int num2 =5;     int sum = NUM1 + num2;    @sum;}

In the code block, we write the code the same way as the usual server-side code. In addition, if output is required, such as the above output in the page, we can use @sum to complete the output

In addition, @ (code) can output an expression of the results of the operation, the above code we can also write:

@{       int num1 =10;   int num2 =5;         int sum = NUM1 + num2;        @ (Num1 +num2);    }
5.Razor Syntax Code MIX

Razor supports code blending. It is possible to insert HTML into a code block, insert a razor statement in HTML.

@{    int num1 =10;    int num2 =5;     int sum = NUM1 + num2;    String color = "Red";    <font color= "@color" > @sum </font>}

It is commendable that even if we write this way, it does not affect the IntelliSense capabilities of VS2012.

    • Output @ symbol: @@
    • Output email Address: Razor template will automatically recognize the email address, so we do not need to do any conversion. In the code block, you only need to use @:[email protected]. @: Indicates that the following content is text.
    • Output HTML code (including tags): direct output, string html = "<font color= ' red ' > Text </font>"; @html
    • Output HTML content (without tags): There are two methods, the first: ihtmlstring html=new htmlstring ("<font color= ' red ' > Text </font>"); @html; Second type: string html = "<font color= ' red ' > Text </font>"; @Html. Raw (Html);
Annotations to the 6.Razor syntax

The comment here refers to the server-side comment, in the razor code block, you can annotate using C # notation, namely//: (single-line comment) and/**/(multiline comment).

In addition, Razor provides a new server segment code comment, which can be commented in C # code, and can comment on the HTML code, @**@, which is not limited by the code block, in the razor code anywhere in the amount can be.

@* This is a comment <b> this is a comment </b> *@

7.Razor layout

The new Razor view engine in ASP. MVC3 has many advantages, and this article will briefly describe the layout of the page in the Razor view engine under MVC3.

Using the Razor view engine, we will find that it differs from the. ASPX view, which does not use a master page. Let's take a look at Razor layout technology, first look at the public view in our project, as follows:

As we can see, we have defined the page header, footer, etc., Razor layout is very simple, similar to our previous use of the include loading method. First, let's look at the code in "_layout.cshtml", which is similar to the master page in the ASPX view engine, as follows:

In line 4th, Viewbag.title is used so that we can specify the name of each page title on each view page, and the 8th line specifies the ID of the body. As in the home page:

Line 10th, line 21 uses the Htmlhelper.partial () method to load the partial view of the header and footer separately, and there is not much to say. In line 16, renderbody () loads the body part of each view page, so that we have completed the layout of our page in the "_layout.cshtml" page, which has been used for reuse purposes. Finally, in "_viewstart.cshtml", we Specify the "_layout.cshtml" page that layout defines for us, and of course, we can load different layouts as needed in "_viewstart.cshtml".

These are the basic layout methods in Razor, and it is clear that if the reused part is not static content, think about the custom control we used in WebForm. So how do we implement a custom control effect in the Razor view? In line 18th We do this, let's see, first, we added the App_Code folder to the project and added a file named "Latest.cshtml", as follows:

Next, we use the helper class to define a method called "Lastest ()" (the method name is not good), to display our recently published article, I do not have a specific implementation here, but take out all the articles, for the method definition:

Finally, we call this method in the page that needs to be displayed. So I called this method on the "_layout.cshtml" page, like Line 18th.

(go) ASP. NET MVC View Engine Razor Introduction

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.