Strongly Typed Views

Suppose you need to write a view that displays a list of Album instances. One possible approach is to simply add the albums to the view data dictionary (via the ViewBag property) and iterate over them from within the view.

For example, the code in your Controller action might look like this:

public ActionResult List() {
  var albums = new List<Album>();
  for(int i = 0; i < 10; i++) {
    albums.Add(new Album {Title = "Product " + i});
  }
  ViewBag.Albums = albums;
  return View();
}

Code snippet 3-6.txt

In your view, you can then iterate and display the products like so:

<ul>
@foreach (Album a in (ViewBag.Albums as IEnumerable<Album>)) {
  <li>@p.Title</li>
}
</ul>

Code snippet 3-7.txt

Notice that we needed to cast ViewBag.Albums (which is dynamic) to an IEnumerable<Album> before enumerating it. We could have also used the dynamic keyword here to clean the view code up, but we would have lost the benefit of IntelliSense.

<ul>
@foreach (dynamic p in ViewBag.Albums) {
  <li>@p.Title</li>
}
</ul>

It would be nice to have the clean syntax afforded by the dynamic example without losing the benefits of strong typing and compile-time checking of things such as correctly typed property and method names. This is where strongly typed views come in.

In the Controller method, you can specify the model via an overload of the View method whereby you pass in the model instance:

public ActionResult List() {
  var albums = new List<Album>();
  for (int i = 0; i < 10; i++) {
    albums.Add(new Album {Title = "Album " + i});
  }
  return View(albums);
}

Code snippet 3-8.txt

Behind the scenes, this sets the value of the ViewData.Model property to the value passed into the View method. The next step is to indicate to the view what type of model is using the @model declaration. Note that you may need to supply the fully qualified type name of the model type.

@model IEnumerable<MvcApplication1.Models.Album>
<ul>
@foreach (Album p in Model) {
  <li>@p.Title</li>
}
</ul>

Code snippet 3-9.txt

To avoid needing to specify a fully qualified type name for the model, you can make use of the @using declaration.

@using MvcApplication1.Models
@model IEnumerable<Album>
<ul>
@foreach (Album p in Model) {
  <li>@p.Title</li>
}
</ul>

Code snippet 3-10.txt

An even better approach for namespaces that you end up using often within views is to declare the namespace in the web.config file within the Views directory.

@using MvcApplication1.Models
<system.web.webPages.razor>
  …
  <pages pageBaseType="System.Web.Mvc.WebViewPage">
    <namespaces>
      <add namespace="System.Web.Mvc" />
      <add namespace="System.Web.Mvc.Ajax" />
      <add namespace="System.Web.Mvc.Html" />
      <add namespace="System.Web.Routing" />

      <add namespace="MvcApplication1.Models" />
    </namespaces>
  </pages>
</system.web.webPages.razor>

Code snippet 3-11.txt

To see the previous two examples in action use NuGet to install the Wrox.ProMvc3.Views.AlbumList package into a default ASP.NET MVC 3 project like so:

Install-Package Wrox.ProMvc3.Views.AlbumsList 

This places the two view examples in the ViewsAlbums folder and the controller code within the SamplesAlbumList folder. Hit Ctrl+F5 to run the project and visit /albums/listweaklytyped and /albums/liststronglytyped to see the result of the code.