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.

Source code

You can find source code for this example from my Visual Studio examples GitHub repository.

Source code @ GitHub Source code repository
GitHub

The project where Razor is used is called Experiments.AspNetMvc3NewFeatures.Razor.

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.

@model Experiments.AspNetMvc3NewFeatures.Razor.Models.ContentPage

And in the browser our view looks like this.

ASP.NET MVC 3: Strongly-typed view in Razor

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.

6 Comments

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

  • 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.

  • Looks for me like an complex way of solving simple problem.

  • 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

  • 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.

  • 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.

Comments have been disabled for this content.