Views are the actual output of the application that is delivered to the user. It is what they actually see when they access your application from the screen. All the components, be it menus, input elements, dialog boxes, and everything the user sees comes from your Views only. If you do not provide good user experience when accessing your application, users will not care how great your application is. So, Views play a critical role when building an ASP.NET MVC application.
In this chapter, we'll cover the following topics:
As discussed in Chapter 1, Introduction to ASP.NET Core, a browser can only understand HTML, CSS, and JavaScript. The purpose of the View engine is to generate the HTML code from your View and send it to the browser so that it can understand the content. Primarily, there are two different types of View engines—Razor View engine and Webform View engine. Although these two View engines come out of the box with ASP.NET MVC, you can use any custom View engine.
The Razor View engine is the default and recommended View engine in ASP.NET Core, and going forward, this may be the only View engine coming out of the box when you install ASP.NET MVC.
You can mix a C# code and HTML code in your Razor View and the Razor View engine is intelligent enough to distinguish between these two and generate the expected output. In some scenarios, we may have to give additional information to Razor View to produce the appropriate results. Razor code blocks start with the @
symbol and do not require a closing @
.
Programming in Razor View engine is just like you program in C#. The difference is that, in Razor View engine, your C# code will get mixed with HTML to produce the desired HTML output.
You can declare a variable inside the razor block and use that variable using the @
symbol.
Let's discuss this with an example.
Controllers
folder and a Controller called HomeController
.Views
, a subfolder called Home
, and a View file called Index.cshtml
by right-clicking the context menu and selecting Add | New Item and then MVC Razor View from the list.The HomeController.cs
file will have following code:
public class HomeController : Controller { // GET: /<controller>/ public IActionResult Index() { return View(); } }
Next is the updated Razor View where we will declare a variable and use it. The first five lines and the last two lines are simple HTML elements.
We will concentrate on the lines that are bold. Then, we will create a Razor block using @
{ … } and declaring a variable inside it. The Razor block ends with the closing curly bracket. The snippet Value:
is considered as simple HTML text. As we would like to use the razor variable value, we will use @i
to instruct the Razor View engine that i
is not a normal HTML text; and it is a Razor construct and is to be treated accordingly. The complete HTML code is as follows:
<html> <head> <title> Views demo</title> </head> <body> @{ int i = 5; } Value: @i </body> </html>
When you run the application, you'll see the following output:
Please note that when you access the razor variable, you will need to use the @
symbol. Without this, Razor View engine sees the i
as text and not as an expression.
The following screenshot is the result you will get when you access the variable without @
symbol:
You can use most of the programming constructs available in C# in Razor View. The following piece of code is the for
loop construct where we loop through five times and print the variable name:
@{ for (int i = 0; i < 5; i++) { <li>@(i+1)</li> } }
The following are a few points to be noted:
@
symbol to indicate that the code that follows is a Razor code and not normal HTML.@
symbol again to tell the Razor View engine that whatever follows is a Razor code and not an HTML element. This is the reason we use the @
symbol again in the preceding expression, even within the parent root-level razor code.The complete code for the View is as follows:
<html> <head> <title> Views demo</title> </head> <body> <ul> @{ for (int i = 0; i < 5; i++) { <li>@(i+1)</li> } } </ul> </body> </html>
The following piece of code is the while
loop implementation for the same loop. Please note that the emboldened expressions increment the variable i. We will not use the @ symbol as it is not within the HTML element:
@{
int i = 0;
while(i<5)
{
<li>@(i + 1)</li>
i++;
}
}
The foreach
loop in Razor View is the same as the foreach
loop in C#. In the following code, we will initialize a list of integers, iterate through the list and print it as a list item:
<ul> @{ List<int> integers = new List<int> { 1,2,3,4,5 }; foreach (int i in integers) { <li>@i</li> } } </ul>
In the following code, we will check if the value of the variable is less than 10. If it is less than 10, we will print i is less than 10
, otherwise, we will say i is greater than 10
. You may wonder why we have to include the text
tag and what its purpose is. As we are inside the Razor View code block, the text i is less than 10
will be considered as Razor expression, but it is not.
This text
tag is to instruct the Razor View engine that whatever follows the text
tag is to be considered as a text and not as a Razor expression:
@{ int i = 5; if (i < 10) { <text>i is less than 10</text> } else { <text>i is greater than 10</text> } }