Razor is the name of the view engine which is introduced by microsoft in mvc3 and they revised it in mvc4. The main use of the view engine is, it processes the ASP.NET content and inserts dynamic content on the browser.
There are two view engines which are maintained by Microsoft.
1 ASPX engine : It works on the <% %> tags and it has important role in the ASP.NET development
2 Razor engine : It works on the regions of content denoted with the @ character.
Let us see the more features of Razor by the following mvc4 application.
Step 1: Create a Empty mvc4 application in Visual Studio and name it as RazorApp.
Step 2: Add a class file to your Model folder and name it as Employee.cs.
now add some properties to our Employee class like below
Step 3: Add a Controller to your application
To add a Controller: Right click on Controller Folder --> select Add --> Select Controller --> Set the name to HomeController --> Select Template as Empty MVC Controller --> and finally click on ADD
Now add the following code to your Controller
In the above code, We have created a Action method called Index and we populated properties of Employee Object. Also we have passed the Employee to View method so that it is used as the model when the View is rendered.
Step 4: Now we are going to create a View.
To create View Right click on the Index method of your HomeController class --> select Add View --> check the option "Create a strongly-typed view" --> now select Employee class from drop-down list --> Uncheck the "Use layout or master page option" --> finally click on ADD.
Now the newly added View is will appear in the Views/Home folder as Index.cshtml. It will look like
Look at the first line. The @model statement declares the type of the model object thar we are passing to the view from our action method. This statement allows us to use the methods, properties and fields of the view model object through @Model. (Example: To access the Name property of object we have to use @Model.Name)
Now, Change your View to look like the following code.
Now run the application and you will see the output as following.
When you type @Model. in your View then the Visual Studio auomatically show the suggestions member names of that particulat Object Model.
And if you want to access the members which are not defined in Emploee class(like @Model.Company) then Visual Studio flag errors.
Now look at the following code in the View
@{
Layout = null;
}
This is the example of Razor code block. Using this we can include c# statements in a view. The statements written inside this block are executed when a view is rendered.
The above code block is used to se the property of the Layout property to null, wchich means we are not using any layout or master page for this particular application.
This is about Razors and i am going to explain "Creating Layout in MVC4" in my NEXT POST.
There are two view engines which are maintained by Microsoft.
1 ASPX engine : It works on the <% %> tags and it has important role in the ASP.NET development
2 Razor engine : It works on the regions of content denoted with the @ character.
Let us see the more features of Razor by the following mvc4 application.
Step 1: Create a Empty mvc4 application in Visual Studio and name it as RazorApp.
Step 2: Add a class file to your Model folder and name it as Employee.cs.
now add some properties to our Employee class like below
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace RazorApp.Models
{
public class Employee
{
public int EmployeeID { get; set; }
public string Name { get; set; }
public string Designation { get; set; }
public decimal Salary { get; set; }
}
}
Step 3: Add a Controller to your application
To add a Controller: Right click on Controller Folder --> select Add --> Select Controller --> Set the name to HomeController --> Select Template as Empty MVC Controller --> and finally click on ADD
Now add the following code to your Controller
using System;
using System.Linq;
using System.Web;
using RazorApp.Models;
namespace RazorApp.Controllers
{
public class HomeController : Controller
{
//Add a Employee
Employee employee = new Employee
{
EmployeeID=1,
Name="John",
Designation="Manager",
Salary=10000M //decimal representation
};
public ActionResult Index()
{
return View(employee); //returning our Employee object to View
}
}
In the above code, We have created a Action method called Index and we populated properties of Employee Object. Also we have passed the Employee to View method so that it is used as the model when the View is rendered.
Step 4: Now we are going to create a View.
To create View Right click on the Index method of your HomeController class --> select Add View --> check the option "Create a strongly-typed view" --> now select Employee class from drop-down list --> Uncheck the "Use layout or master page option" --> finally click on ADD.
Now the newly added View is will appear in the Views/Home folder as Index.cshtml. It will look like
@model RazorApp.Models.Employee
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
</div>
</body>
</html>
Look at the first line. The @model statement declares the type of the model object thar we are passing to the view from our action method. This statement allows us to use the methods, properties and fields of the view model object through @Model. (Example: To access the Name property of object we have to use @Model.Name)
Now, Change your View to look like the following code.
@model RazorApp.Models.Employee
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
@Model.Name
</div>
</body>
</html>
Now run the application and you will see the output as following.
When you type @Model. in your View then the Visual Studio auomatically show the suggestions member names of that particulat Object Model.
And if you want to access the members which are not defined in Emploee class(like @Model.Company) then Visual Studio flag errors.
Now look at the following code in the View
@{
Layout = null;
}
This is the example of Razor code block. Using this we can include c# statements in a view. The statements written inside this block are executed when a view is rendered.
The above code block is used to se the property of the Layout property to null, wchich means we are not using any layout or master page for this particular application.
This is about Razors and i am going to explain "Creating Layout in MVC4" in my NEXT POST.
No comments:
Post a Comment