One of the most commonly used types of action results in an ASP.NET MVC application is the ViewResult. When you return a ViewResult from an action method, it indicates that ASP.NET MVC should invoke a view page to render HTML back to the client browser.
You store view pages in the Views directory inside the application. Views often include server-side code to produce the final HTML. When you create a view, you need to specify the view engine that will be used to process server-side code. Out of the box, ASP.NET MVC includes two view engines:
• ASPX view engine: The original view engine included in ASP.NET MVC 1. It uses a syntax similar to Web Forms.
• Razor view engine: A new view engine that uses a new, simple and fluid syntax.
An important addition in ASP.NET MVC 4 is the Display Modes feature, which lets the application choose which view to render based on which client browser is making the request. This is relevant now that mobile
browsers are widely used. Particularly important is the concept of layouts that will help keep a consistent look-and-feel across the entire application.
Understanding View Engines
The ultimate goal of a view is to render HTML to the browser in response to a user request. A view can be as simple as the one presented in Listing 1.
Listing 5-1. A Simple View
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>View1</title>
</head>
<body>
<h1>View1</h1>
</body>
</html>
Note that the view content is basically only HTML. This is perfectly OK, but it doesn’t do much for an application except to display static content.
To make views really useful, they should render HTML based on information produced in the server. To work with this information, views must be able to access and manipulate the information, and that’s where view engines come into play.
View engines provide a specific syntax to work with server-side elements and process the view to render the HTML in the browser. As indicated in the introduction to the blog, ASP.NET MVC 4 includes two view engines: the original ASPX view engine, which works similarly to the syntax in Web Forms applications, and the new Razor view engine, which uses a simpler and compact syntax that is very easy to use.
A few examples of the syntax in both view engines are provided in Listings 2, 3 and 4. Note that Razor uses fewer characters and that the syntax is far easier to read than the ASPX syntax.
Listing 2. Print the Current Date
<%--ASPX--%>
<%=DateTime.Now %>
@*Razor*@
@DateTime.Now
Listing 5-3. if Statement
<%--ASPX--%>
<% if (DateTime.Today.Year == 2013) { %>
<span> Current year </span>
<% }
else { %>
<span> Past year </span>
<% } %>
@*Razor*@
@if (DateTime.Today.Year == 2013) {
<span> Current year </span>
}
else {
<span> Past year </span>
}
Listing 5-4. foreach Loop
<%--ASPX--%>
<ul>
<% foreach (var t in tweets) { %>
<li><%= t.content %></li>
<% } %>
</ul>
@*Razor*@
<ul>
@foreach (var t in tweets) {
<li>@t.content</li>
}
</ul>
You can also have code blocks. A code block is a section of the view that contains strictly code rather than a combination of markup and code. An example is shown in Listing 5.
Listing 5. Code Blocks
<%--ASPX--%>
<%
var name = "Jose";
var message = "Welcome " + name;
%>
<p>Hello! <%= message %> </p>
@*Razor*@
@{
var name = "Jose";
var message = "Welcome " + name;
}
<p>Hello! @message </p>
You store view pages in the Views directory inside the application. Views often include server-side code to produce the final HTML. When you create a view, you need to specify the view engine that will be used to process server-side code. Out of the box, ASP.NET MVC includes two view engines:
• ASPX view engine: The original view engine included in ASP.NET MVC 1. It uses a syntax similar to Web Forms.
• Razor view engine: A new view engine that uses a new, simple and fluid syntax.
An important addition in ASP.NET MVC 4 is the Display Modes feature, which lets the application choose which view to render based on which client browser is making the request. This is relevant now that mobile
browsers are widely used. Particularly important is the concept of layouts that will help keep a consistent look-and-feel across the entire application.
Understanding View Engines
The ultimate goal of a view is to render HTML to the browser in response to a user request. A view can be as simple as the one presented in Listing 1.
Listing 5-1. A Simple View
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>View1</title>
</head>
<body>
<h1>View1</h1>
</body>
</html>
Note that the view content is basically only HTML. This is perfectly OK, but it doesn’t do much for an application except to display static content.
To make views really useful, they should render HTML based on information produced in the server. To work with this information, views must be able to access and manipulate the information, and that’s where view engines come into play.
View engines provide a specific syntax to work with server-side elements and process the view to render the HTML in the browser. As indicated in the introduction to the blog, ASP.NET MVC 4 includes two view engines: the original ASPX view engine, which works similarly to the syntax in Web Forms applications, and the new Razor view engine, which uses a simpler and compact syntax that is very easy to use.
A few examples of the syntax in both view engines are provided in Listings 2, 3 and 4. Note that Razor uses fewer characters and that the syntax is far easier to read than the ASPX syntax.
Listing 2. Print the Current Date
<%--ASPX--%>
<%=DateTime.Now %>
@*Razor*@
@DateTime.Now
Listing 5-3. if Statement
<%--ASPX--%>
<% if (DateTime.Today.Year == 2013) { %>
<span> Current year </span>
<% }
else { %>
<span> Past year </span>
<% } %>
@*Razor*@
@if (DateTime.Today.Year == 2013) {
<span> Current year </span>
}
else {
<span> Past year </span>
}
Listing 5-4. foreach Loop
<%--ASPX--%>
<ul>
<% foreach (var t in tweets) { %>
<li><%= t.content %></li>
<% } %>
</ul>
@*Razor*@
<ul>
@foreach (var t in tweets) {
<li>@t.content</li>
}
</ul>
You can also have code blocks. A code block is a section of the view that contains strictly code rather than a combination of markup and code. An example is shown in Listing 5.
Listing 5. Code Blocks
<%--ASPX--%>
<%
var name = "Jose";
var message = "Welcome " + name;
%>
<p>Hello! <%= message %> </p>
@*Razor*@
@{
var name = "Jose";
var message = "Welcome " + name;
}
<p>Hello! @message </p>
No comments:
Post a Comment