Editor Templates introduction in ASP.NET MVC 5

This is a brief introduction to Editor Templates, for use in ASP.NET MVC 5 web apps.

This note was updated on June 3, 2015.

.

What is an Editor Template?

It is a partial view. It renders customized content.

You have noticed that the “Add View” scaffolder will create markup for strings and ints. However, you have also noticed that the scaffolder will not create markup for a drop-down list or radio button group. You must write this code yourself, which can be repetitive and error-prone.

An editor template can help with this problem.

.

Problem to be solved

In this post, we will create editor templates that will easily render these HTML Form item-selection elements:

  • Single-selection drop-down list, or list box
  • Single selection radio button group
  • Multi-selection list box
  • Multi-selection check box group

.

Implementation plan

We will do the following:

1. Decide on some “coding conventions”.

2. Write the Editor Template.

3. Write the view model classes.

4. Write the controller method pair (for a “create” or “edit” task).

5. Scaffold the view, and then add code to use the new Editor Template.

.

Coding conventions

These coding conventions build upon others that you have recently learned.

.

View model classes for a “create” or “edit” task

Two view model classes are required for a “create” or “edit” task.

One is used to prepare the HTML Form, in the controller method that handles the HTTP GET request.

  • For a “create gizmo” task, the view model class name could be GizmoAddForm

The other defines the data submitted by the browser, to the controller method that handles the HTTP POST request.

  • The view model class name could be GizmoAdd

.

Property names and data types

In the GizmoAddForm view model class, create a property that will hold the data for the item-selection element on the HTML Form.

  • The property name must include the word “List” as a suffix, e.g. SizeList, SupplierList, or ColoursList.
  • The property’s data type will be SelectList for single-selection scenarios, or MultiSelectList for multi-selection scenarios.

In the GizmoAdd view model class, create a property that will hold the data submitted by the browser. Three scenarios:

If the property is a string or an int, and matches exactly to a design model class property, then its name must match the design model class property. (This enables AutoMapper to do its job.)

If the property is an int and is an object identifier (e.g. Supplier identifier), then its name must be the design model class name with the suffix “Id”, e.g. SupplierId. The value will be used somewhere during processing (e.g. controller method, or manager/repository method), to help with the lookup process.

If the property is a collection of int values, as object identifiers (e.g. Colour identifiers), then its name must be the design model class name with the suffix “Ids”, e.g. ColoursIds. As above, the values will be used elsewhere during processing.

.

Write the Editor Template

(more to come)

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: