Razor is the new view engine that is available for ASP.NET MVC 3 Beta. Razor has directives that are the same as the WebForms view engine, so you can define namespaces at the top of the Razor file so you don’t have to use the fully qualified name when referencing objects. One of the keywords available is the new @model keyword. This keyword defines the model that is being used in the view. By default the default value is dynamic, which means you’re using a dynamic model for your view. However you can change this so you can use a strongly typed view. This article will demonstrate how to use both
Before moving on, you need to download ASP.NET MVC 3 Beta and NuPack. Click here to download and install them using the Microsoft Web Platform Installer.
Open studio 2010 and create a new ASP.NET MVC 3 Web Application (Razor) project. The new MVC 3 Beta dialog can be seen below
Choose Razor as the view engine and click OK
We’re going to add a model called FavouriteGivenName which will store the most popular given names in Australia for 2009. We’re going to add a new controller named MostPopular and add the following code:
private readonly List<FavouriteGivenName> _mostPopular = null;
public MostPopularController()
{
_mostPopular = new List<FavouriteGivenName>()
{
new FavouriteGivenName() {Name = "Jack"},
new FavouriteGivenName() {Name = "Riley"},
new FavouriteGivenName() {Name = "William"},
new FavouriteGivenName() {Name = "Oliver"},
new FavouriteGivenName() {Name = "Lachlan"},
new FavouriteGivenName() {Name = "Thomas"},
new FavouriteGivenName() {Name = "Joshua"},
new FavouriteGivenName() {Name = "James"},
new FavouriteGivenName() {Name = "Liam"},
new FavouriteGivenName() {Name = "Max"}
};
}
public ActionResult DynamicView()
{
return View(_mostPopular);
}
We’ll add a new view, but we won’t select Create a strongly-typed view
Upon completion the view’s HTML is the following
@model dynamic
@{
View.Title = "DynamicView";
Layout = "~/Views/Shared/_LayoutPage.cshtml";
}
<h2>Dynamic View</h2>
You’ll notice in the code above, the first line contains the @model keyword and it’s dynamic.
@model dynamic
This means you won’t have access to a strongly-typed object when you code this view. You can use the following code to render the popular names to the view.
@model dynamic
@{
View.Title = "DynamicView";
Layout = "~/Views/Shared/_LayoutPage.cshtml";
}
<h2>Dynamic View</h2>
<p>
@foreach(var givenName in Model) {
@givenName.Name <br />
}
</p>
On the other hand you wanted a strong-typed view and not rely on dynamic views, it’s easy. Add another action and create a new view, but this time select Create a strongly-typed view
By default you’ll now have a strongly typed view as shown in the code snippet below
@model IEnumerable<MvcApplication5.Models.FavouriteGivenName>
@{
View.Title = "StronglyTypedView";
Layout = "~/Views/Shared/_LayoutPage.cshtml";
}
<h2>Strongly Typed View</h2>
Now the model is a list of strongly-typed FavouriteName objects. Intellisense doesn’t work in the beta version, so we are unable to show you the benefits of using a strongly-typed view. You can use the following code to render the favourite given names:
@model IEnumerable<MvcApplication5.Models.FavouriteGivenName>
@{
View.Title = "StronglyTypedView";
Layout = "~/Views/Shared/_LayoutPage.cshtml";
}
<h2>Strongly Typed View</h2>
<p>
@foreach(var givenName in Model) {
@givenName.Name <br />
}
</p>
The @model keyword is easy to miss when you’re using the beta version of ASP.NET MVC 3 Beta, but it’s something you’ll learn once and never forget it’s there.