Chapter 4. Views

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:

  • The purpose of View Engine and Razor View Engine
  • Programming in Razor View Engine and different programming constructs
  • Layout in ASP.NET Core and its features
  • HTML Helpers
  • Partial Views
  • Tag Helpers

The View engine and the Razor View engine

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.

Razor 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

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.

Variables in Razor View

You can declare a variable inside the razor block and use that variable using the @ symbol.

Note

For all the examples in this chapter, we will only present the code samples of the view.

Let's discuss this with an example.

  1. Create a Controllers folder and a Controller called HomeController.
  2. Create a folder called 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:

Variables in Razor View

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:

Variables in Razor View

The for loop

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:

  • As the for loop is a razor code, we should enclose the loop with the @ symbol to indicate that the code that follows is a Razor code and not normal HTML.
  • Whenever we use an HTML element or tag, Razor View engine falls back to HTML mode. If you want to use any Razor expression within the HTML tags, you will want to include the @ 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 while loop

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

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>

The if condition

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>
   }
 }
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset