ASP.NET MVC 3 Beta: Strongly-typed views in Razor

One of the new features of Razor view engine is support for strongly-typed models. In this posting I will show you how to use strongly-typed model with Razor using simple view page.

Model

To illustrate strongly-typed view we need some object that we can use as model. I have ContentPage and ContentPagesModel classes. First of them represents primitive content page and the other the model that handles content operation. Okay, there is one method available right now in our model.

public class ContentPage
{
   
public string Title { get; set
; }
   
public string Description { get; set
; }
}

public class ContentPagesModel
{
   
public ContentPage
GetAboutPage()
    {
       
var page = new ContentPage
();
        page.Title =
"About us"
;
        page.Description =
"This page introduces us"
;

       
return page;
    }
}

Controller action

Next let’s take Home controller and and modify action method called About(). This action method displays our About view. In this method we will instantiate model and ask about page from it. The instance of page is used as a model for About view.

public ActionResult About()
{
   
var model = new ContentPagesModel
();
   
var
page = model.GetAboutPage();

   
return View(page);
}

Strongly-typed model in Razor

Now let’s open About view that we got out-of-the-box when we created new project. After some little modifications this view likes this.

@model Experiments.AspNetMvc3NewFeatures.Razor.Models.ContentPage
@{
    View.Title = Model.Title;
} 
 

<h2>About</h2
>
<
p>
     @Model.Description
</p
>

First line of the view sets type of model. And in the browser our view looks like this.

Razor strongly-typed view

Conclusion

Razor supports now strongly typed views and this is good for us. In the future it helps us also to support IntelliSense when we are writing our views. And, of course, the best thing is, we don’t have to use view data collection that is not error-prone.

Gunnar Peipman

Gunnar Peipman is ASP.NET, Azure and SharePoint fan, Estonian Microsoft user group leader, blogger, conference speaker, teacher, and tech maniac. Since 2008 he is Microsoft MVP specialized on ASP.NET.

    6 thoughts on “ASP.NET MVC 3 Beta: Strongly-typed views in Razor

    • October 13, 2010 at 4:20 pm
      Permalink

      Nice post & great to see that Razor now supports the strongly typed views!

    • October 13, 2010 at 6:36 pm
      Permalink

      I’m a little confused why you have the ContentPagesModel class if you’re view is using ContentPage for its model. It seems like an extra class and method to set properties. What if you did something like this and what advantage does the extra class have?

      public ActionResult About() {
      var model = new ContentPage{
      Title = “About Page Title”,
      Description = “Some Description”
      };
      return View(model);
      }

      Apologies if there’s something I’m missing as I have yet to use Mvc3 or the Razor view engine. It just seems like I’m using strongly-typed properties like that already.

    • October 14, 2010 at 7:59 am
      Permalink

      It’s good to see blogs on razor. At the moment I am really comfortable, and enjoy working, with the spark view engine.

      But razor is nice. And simple blog posts like this are quite useful.

      Thanks

    • October 14, 2010 at 5:15 pm
      Permalink

      Thanks fro feedback, Todd :) I like to use got for samples project because I can package my examples quick if I want to make them available for download. No need for exports like in SVN etc, just do it where your solution is, upload example and delete the archive.

    • October 14, 2010 at 5:17 pm
      Permalink

      Koistya, Razor is also used in WebMatrix that is targeted to beginners and people who are not professional developers. For them (and I think also for other developers) @model is simpler and easier to read than @inherits.

    Leave a Reply

    Your email address will not be published. Required fields are marked *