Views in ASP.NET MVC
As we discussed in my previous article we discussed about Controller functionality in Asp.Net MVC. Controller functionality is what to do next by returning ActionResult. In this article we discuss about ViewResult which is one of the ActionResult type. When HTML content has to display Controller returns ViewResult as ActionResult by rendering the View.
We can create View by right click on method in the Controller class and select “Add View”. Open Microsoft Visual Studio 2013 => right click on Controller folder and select Add Controller option name it as HomeController.cs. It adds the Index() method as shown below.
public ActionResult Index()
{
return View();
}
Right click on the Index method and select Add “View…” option as shown below.
Home folder created in Views folder and @Index.cshtml view added to Home folder. When Asp.Net MVC framework wants to show the view for Index() action method it searches for the @Index.cshtml view in Views/Home folder. If it is not able to find the view in Views/{Controller name folder} it searches in Views/Shared folder. If framework not able to find View in shared folder also it produces error.
@Index.cshtml view displays as shown below.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
</div>
</body>
</html>
If you observes the above code, View is combination of HTMl markup and Code. In Asp.Net MVC code means not like traditional Asp.Net code syntax is different. In Asp.Net MVC Razor is responsible to have code in View. In traditional Asp.Net we can have code as shown below.
<div>
<%=DateTime.Now.ToString()%>
</div>
In Asp.Net MVC, code is as shown below.
<div>
@DateTime.Now
</div>
If you observe above both code snippets only syntax is different. Razor provides two ways to differentiate the code from HTML markup, those are Code nuggets and Code blocks.
Code nuggets: Code nuggets are simple expressions evaluated as inline code as shown below.
<div>
@DateTime.Now
</div>
The expression immediately starts after @ symbol. Razor identifies start of the code with @ symbol. Code nuggets can also combined with text as shown below.
<div>
The current date and time is @DateTime.Now
</div>
Code blocks: Code block is the section of the view that contain strictly code rather than the markup. Code block starts with @{ and ends with } as shown below.
<div>
@{
int i = 10;
string str = string.Empty;
}
</div>
Variables defined in the code blocks can be accessed in the code nuggets and also in other code block within the View. Let’s discuss about this with simple example as shown below.
<div id="div1">
@{
string str = "This is string variable";
}
</div>
<div id="div2">
@{
int i = 10;
string str1 = str;
}
</div>
As shown above we declared the string variable str in first code block and accessed in second code block. We will discuss about Layouts of Asp.Net MVC in my next article.
