ASP.NET MVC 3 – How to use EditorTemplates

There are a lot of fabulous functionalities in ASP.NET MVC.

One of my favorite is the EditorTemplates.

With these templates, it is possible to say

“Okay, I’m gonna make an html template for this type of object and when I want to display this type, Razor will uses my template”.

WPF and Silverlight Developers already know this functionality to display their objet.

For example, a “Person” objet has an “Address” list. (Everyone has already implemented this type of job isn’t it?).

Our (simple) model

Thanks to EditorTemplates in ASP.NET MVC, you will be able to create a template for one address.

First, create the template

Here we want to create a template for the Address objet so we create the file “Address.cshtml”. The name has to be the same that the object. Pretty simple, no?

This file has to be placed into the “Shared/EditorTemplate/” folder.

Editor Template in ASP.NET MVC Visual Studio Solution

Second step, create model and controller

Model : Person Class

    public class Person
    {
        public Person()
        {
            Name = "George";

            var newYork = new Address
                      {
                          City = "NY",
                          Country = "USA",
                          PostalCode = "10021",
                          Street = "34 Vosges street"
                      };

            var paris = new Address
                            {
                                City = "Paris",
                                Country = "France",
                                PostalCode = "75001",
                                Street = "13 Leclerc street"
                            };

            var bruxelles = new Address
                                {
                                    City = "Bruxelles",
                                    Country = "Belgium",
                                    PostalCode = "65478",
                                    Street = "01 Garden Street"
                                };

            Addresses = new List<Address> { newYork, paris, bruxelles };
        }

        public string Name { get; set; }
        public List<Address> Addresses { get; set; }
    }

Model : Address Class

    public class Address
    {
        public string Street { get; set; }
        public string PostalCode { get; set; }
        public string City { get; set; }
        public string Country { get; set; }
    }

Controler : PersonWithAddress

    public class PersonWithAddressController : Controller
    {
        public ActionResult Index()
        {
            return View(new Person());
        }
    }

Nothing special here. If you don’t use MVC yet, please download the example below  to better understand the article..

Third step, the view

Here, we strongly typed our View with our model (Person). (Of course it’s not mandatory to use strongly typed view if you want to use EditorTemplate). We want to be able to display the Person with all its addresses.

We call the Html helper EditorFor. For each Address object in the list, Razor will call the Address template.

@model MvcEditorTemplates.Models.Person
@{
    ViewBag.Title = "Person with Addresses";
}
<h2>Person</h2>
<p>
    @Html.LabelFor(model => model.Name)
    @Html.EditorFor(model => model.Name)
</p>

<h2>Person Addresses</h2>
@Html.EditorFor(model => model.Addresses)

I Love the syntax. There is no loop in the view. The EditorTemplate does all the job for us. Thanks ASP.NET MVC !

The result - Person and Addresses

Download the example EditorTemplates (Required : ASP.NET MVC 3 – Visual Studio 2010).