-- Introduction
See the following MVC 2.0 code.
<% If (Model! = Null)
{%>
<P> <% = Model %> </p>
<% }%>
<% Else
{%>
// Do something
<% }%>
From the perspective of a reader, this method of marking C # code is very painful.
If the person who writes this Code does not have good indentation and alignment habits, A piece of code with complicated logic will pile up a mess of "<%" and "%>" -- matching them is a headache and will make readers feel daunting.
Even if you write code yourself, closing is also a troublesome task, and VS is not very friendly with the automatic indentation and alignment support for "<%>", and you are used to neat code, it will be uncomfortable to face the messy things you have written.
With the release of MVC 3.0, the new Razor view engine solves this problem.
Razor refers to a Razor, which is often sharp. The code in the introduction is written using the Razor Syntax:
@ If (Model! = Null)
{
<P> @ Model </p>
}
Else
{
// Do something
}
Razor uses "@" to mark a piece of C # code and closes the code internally. Does it feel much refreshed?
Razor has great advantages in reducing code redundancy, enhancing code readability, and vs intelligent perception. The following describes how to use Razor in ASP. net mvc 3.0.
--------------------------------------------- Introduction End ----------------------------------------------
1. Create a Razor-based Web program
First, you must install. NET Framework4.0 in your development environment. Then, select ASP. net mvc 3 application when creating a project in VS, and select Razor as the view engine on the options page. 1:
Figure 1
Create a project and you will get a Razor-based Web project, 2.
Figure 2
I believe that those who are familiar with MVC are familiar with this structure. Note that in the red box, the Razor page is suffixed with cshtml. Next we will explain how to use Razor for page layout.
2. Use Razor for page layout
UI designers also pay attention to the semantic and structured page design. They divide a page into multiple modules and use semantic class names or IDs to identify these modules. Razor launched a new layout solution to cater to this trend.
Some Razor syntaxes are involved here. You don't need to go into the content after "@". When it comes to page layout, you just need to focus on HTML code. The syntax will be added later.
1. Specify the master and loading mechanisms
First, let's take a look at the _ ViewStart. chhtml page. Its content is very simple:
@{
Layout = "~ /Views/Shared/_ Layout. cshtml ";
}
This Code specifies the default master location: Under the root directory of the current application <"~ "Meaning> Views/Shared/_ Layout. cshtml
Unless in special cases, for example, the view is a Partial view, or the following code is displayed in the view to indicate that the master is not used:
@{
Layout = null;
}
In other cases, the specified page is the master page of the view.
Then let's take a look at the content of Razor master page _ Layout. cshtml:
View Code
<! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> @ ViewBag. Title </title>
<Link href = "@ Url. Content ("~ /Content/Site.css ")" rel = "stylesheet" type = "text/css"/>
<Script src = "@ Url. Content ("~ /Scripts/jquery-1.5.1.min.js ")" type = "text/javascript"> </script>
</Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Body>
<Div class = "page">
<Div id = "header">
<Div id = "title">
<H1> my MVC application </Div>
<Div id = "logindisplay">
Welcome to <strong> @ User. Identity. Name </strong>!
</Div>
<Div id = "menucontainer">
<Ul id = "menu">
<Li> @ Html. ActionLink ("Homepage", "Index", "Home") </li>
<Li> @ Html. ActionLink ("About", "About", "Home") </li>
</Ul>
</Div>
</Div>
<Div id = "main">
@ RenderBody () <! -- Placeholder for General View content -->
</Div>
<Div id = "footer">
</Div>
</Div>
</Body>
</Html>
Note: The @ RenderBody () method is equivalent to a placeholder. Assume that the Index. cshtml of our homepage view is like this,
View Code
@{
ViewBag. Title = "Homepage ";
}
<H2> @ ViewBag. Message <P>
For more information about ASP. net mvc, visit the <a href = "http://asp.net/mvc" title = "ASP. net mvc Website"> http://asp.net/mvc </a>.
</P>
For example, when the server responds to a HomeController. Index () request, it needs to return the Index view,
• The content of the master page _ Layout. cshtml will be loaded first,
• When @ RenderBody () is encountered, replace it with the content of the home page view, and return the static page after processing is complete.
2. Use the Partial view www.2cto.com
In MVC 2.0, you need to use the <asp: Content> </asp: Content> label to split pages. If there are too many tags, you forget which part corresponds to which part.
In Razor, you can take the part to be stripped out as a separate Partial view, such as the website header (Logo, navigation, etc ..), bottom (links, copyright notices, etc ..), or a function module (login box, etc ..).
For example, on the master page above, we can strip its header and bottom, right-click the Share folder to add/view, and choose create as branch view. 3:
Figure 3
Follow these steps to create two views: "_ HeaderPartial. cshtml" and "_ FooterPartial. cshtml:
<! -- _ HeaderPartial. cshtml -->
<Div id = "header">
<Div id = "title">
<H1> my MVC application </Div>
<Div id = "logindisplay">
Welcome to <strong> @ User. Identity. Name </strong>!
</Div>
<Div id = "menucontainer">
<Ul id = "menu">
<Li> @ Html. ActionLink ("Homepage", "Index", "Home") </li>
<Li> @ Html. ActionLink ("About", "About", "Home") </li>
</Ul>
</Div>
</Div>
<! -- _ FooterPartial. cshtml -->
<Div id = "footer">
©2008-2012 John Connor All rights reserved.
</Div>
It can be seen that extracting the Partial view is very simple, that is, extracting the required content and placing it in the newly created Partial view. Then, we need to do one more thing,
Similar to a general view, the Partial view uses its own placeholder to replace the original content. After doing this, the original _ Layout. cshtml page becomes like this:
<! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> @ ViewBag. Title </title>
<Link href = "@ Url. Content ("~ /Content/Site.css ")" rel = "stylesheet" type = "text/css"/>
<Script src = "@ Url. Content ("~ /Scripts/jquery-1.5.1.min.js ")" type = "text/javascript"> </script>
</Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Body>
<Div class = "page">
@ Html. Partial ("_ HeaderPartial") <! -- _ HeaderPartial view placeholder -->
<Div id = "main">
@ RenderBody ()
</Div>
@ Html. Partial ("_ FooterPartial") <! -- _ FooterPartial view placeholder -->
</Div>
</Body>
</Html>
In this way, is the page layout more fresh and concise? As in the general view, when a request is returned, the master page is loaded first, then the corresponding Partial view is loaded when a placeholder is encountered, and finally the static page after processing is returned.
Iii. introduction and application of Razor syntax
1. Syntax Introduction
If we want to bind data in HTML code, for example, if we have a Product object Product, we need to bind the Product Name Product. Name, just add "@" to the variable,
You can also use "@ (expression)" to bind an expression:
<P> @ Product. Name </p>
<P> @ (Product. Price * 0.8) </p>
"@ {Code}" is used in Razor to identify a section of C # code. The code segment can appear anywhere and can be mixed with HTML:
@{
Var product = new product ();
Product. Name = "pen ";
Product. Price = 1.00;
<P> @ product. Name </p>
<P> @ product. Price </p>
}
You can directly add the "@" prefix when using a loop or conditional statement to control the page logic:
@ Foreach (var product in products)
{
<P> @ item. Name </p>
}
In Razor, the comment is "@ ** @", that is, Html code or C # code can be annotated. In the code block, the Comment Method of C # can still be used:
@{
Var product = new product ();
Product. Name = "pen ";
// Product. Price = 1.00;
<P> @ product. Name </p>
@ * <P> @ product. Price </p> *@
}
2. ASP. NET MVC3.0 Web Applications
Assume that a Product class is located in the JohnConnor. Data namespace and has two attributes: Name and Price. The HomeController. Index () method returns a List <Product> object to the Index view,
Print all product names and click the product name to bring up the product price.
The HomeController. Index () method is as follows:
View Code
Using System;
Using System. Collections. Generic;
Using System. Linq;
Using System. Web;
Using System. Web. Mvc;
Using JohnConnor. Data;
Namespace JohnConnor. Web. Controllers
{
Public class HomeController: Controller
{
Public ActionResult Index ()
{
Var products = new List <Product> ()
{
New Product {Name = "pen", Price = 11.55 M },
New Product {Name = "pencil", Price = 2.17 M },
New Product {Name = "ballpoint pen", Price = 5.98 M },
};
Return View (products );
}
}
}
Let's change the Index view to demonstrate the simple application of Razor.
@ Using JohnConnor. Data;
@ Model List <Product>
@{
ViewBag. Title = "Homepage"; // ViewBag. Title in the master is used to bind the Title tag. assign a value here.
}
<H2> Razor @ Foreach (var product in Model)
{
// Traverse all products
<Input type = "button" name = "@ product. Name" value = "@ product. Name" onclick = "alert (@ product. Price)"/>
}
In a general view, first declare the view model, that is, the type of the ViewResult object returned by Action <or not. If any returned object is returned, we recommend that you declare it>.
The view model here is a List <Product> set. Because the Product is located in the using JohnConnor. Data namespace, a reference is added first.
In the master, ViewBag. Title is used to bind the Title tag. In general views, you can assign values to bind the page Title.
If you do not want to use a master, add "Layout = null;" to the code block ;".
Finally, some data binding or logic processing are involved.
The basic content of Razor is about to be discussed. Of course, it has a rich background and needs to be learned in practical use. A short article cannot cover all the information.
Finally, Razor does not have a design view, which is a much more devastating aspect. I believe this will happen later. If you have any questions about the use of Razor, you can raise them here. I can help you with problems within the scope of capabilities.
I hope you can provide more support.
From chrysanthemum tea
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
