{"id":1913,"date":"2014-12-02T00:00:00","date_gmt":"2014-12-01T00:00:00","guid":{"rendered":"https:\/\/test.simple-talk.com\/uncategorized\/extending-editor-templates-for-asp-net-mvc\/"},"modified":"2021-05-17T18:34:50","modified_gmt":"2021-05-17T18:34:50","slug":"extending-editor-templates-for-asp-net-mvc","status":"publish","type":"post","link":"https:\/\/www.red-gate.com\/simple-talk\/development\/dotnet-development\/extending-editor-templates-for-asp-net-mvc\/","title":{"rendered":"Extending Editor Templates for ASP.NET MVC"},"content":{"rendered":"
\n

Editor Templates are one of the hidden gems in ASP.NET MVC.   They greatly simplify the process of generating the Views by extending the separation between content and format.    We can simply state that we want an Editor without having to stipulate exactly what form that editor should take.   It’s a lot simpler to state that you want an Editor without having to say that you want a radio button or a drop down, or a plain text box.   We may have a wide range of possibilities for an appropriate Editor.   It is nice to hand that over to the framework to keep track of.<\/p>\n

In this article, we will step through several examples. We will start with the built-in editor using a check box for a Boolean value, before trying a slightly more complex drop-down for a NULLable Boolean.    We will then look at creating our own editor for dates before pushing the boundaries out a bit by creating a reusable editor for a complex type such as an Address model.    Along the way, we also explore ways of using jQuery and JavaScript to add functionality to editors so as to improve usability for our sites.<\/p>\n

A Simple Model<\/h1>\n

Throughout this article we will reference and build on a simple AddressModel.<\/code> <\/p>\n

\tpublic class AddressModel\n\t{\n\tpublic string Line1 { get; set; }\n\tpublic string Line2 { get; set; }\n\tpublic string City { get; set; }\n\tpublic string State { get; set; }\n\tpublic string Zip { get; set; }\n\tpublic bool IsVerified { get; set; }\n\tpublic DateTime DateLastVerified { get; set; }\n\tpublic bool? IsPrimary{get; set; }\n\t}\n<\/pre>\n
A simple View for such a model may look like this, with some pieces excluded for  brevity:<\/p>\n
\t@using (Html.BeginForm()) {\n\t@Html.AntiForgeryToken()\n\t@Html.ValidationSummary(true)\n\t\n\t<fieldset>\n\t<legend>Address<\/legend>\n\t\n\t<div class=\"editor-label\">\n\t@Html.LabelFor(model => model.Line1)\n\t<\/div>\n\t<div class=\"editor-field\">\n\t@Html.EditorFor(model => model.Line1)\n\t@Html.ValidationMessageFor(model => model.Line1)\n\t<\/div>\n\t\n\t<div class=\"editor-label\">\n\t@Html.LabelFor(model => model.Line2)\n\t<\/div>\n\t<div class=\"editor-field\">\n\t@Html.EditorFor(model => model.Line2)\n\t@Html.ValidationMessageFor(model => model.Line2)\n\t<\/div>\n\t\n\t...\n\t\n\t<div class=\"editor-label\">\n\t@Html.LabelFor(model =>model.DateLastVerified)\n\t<\/div>\n\t<div class=\"editor-field\">\n\t@Html.EditorFor(model =>model.DateLastVerified)\n\t@Html.ValidationMessageFor(model =>\n\tmodel.DateLastVerified)\n\t<\/div>\n\t\n\t<div class=\"editor-label\">\n\t@Html.LabelFor(model =>model.IsPrimary)\n\t<\/div>\n\t<div class=\"editor-field\">\n\t@Html.EditorFor(model =>model.IsPrimary)\n\t@Html.ValidationMessageFor(model =>model.IsPrimary)\n\t<\/div>\n\t\n\t<p>\n\t<inputtype=\"submit\"value=\"Save\"\/>\n\t<\/p>\n\t<\/fieldset>\n\t}\n<\/pre>\n
You will notice that we use the same markup for each property.   We output a label, an editor directive, and a Validation message; but look what happens when we display the View  <\/p>\n
\n
Because IsVerified<\/code> is a Boolean property, MVC selected a check box for the editor and we get a drop-down with values  of true,false<\/code> , and not set<\/code> for IsPrimary<\/code> because it is a NULLable Boolean.    These are two built-in editors that are native to MVC which we get without any extra effort.<\/p>\n
Adding a Date Picker<\/h1>\n
We can make other data types such as  DateTime<\/code> get their own custom editor, just by placing a partial View in the  EditorTemplates<\/code> folder under the Sharedfolder  and naming it after the target  data type.   You will need to create this folder yourself since it is  not automatically added to the project.<\/p>\n
 A  DateTime.cshtml<\/code> might look like this …<\/p>\n
\t@model DateTime?\n\t\n\t@Html.TextBox(\"\", (Model.HasValue ? Model.Value.ToShortDateString() : \n\tstring.Empty),new { @class = \"datePicker\" , \n\t@readonly = \"readonly\"})\n<\/pre>\n
 … along with a snippet of jQuery code like this to associate the jQuery UI date picker to the class datePicker<\/code> .<\/p>\n
\t\t<script>\n\t     $(function () {\n\t         $(\".datePicker\").datepicker({\n\t            showOn: \"button\",\n\t            buttonImage: \"\/images\/calendar-icon.png\",\n\t            buttonImageOnly: true,\n\t            buttonText: \"Select date\"\n\t         });\n\t     });\n\t<\/script>\n<\/pre>\n
Now when we render our View, we get a nice date picker control for the DateLastVerified<\/code> property …<\/p>\n
 \"2102-img51.jpg\"<\/p>\n
… and when we click on the calendar icon we see the calendar.<\/p>\n
 \t\"2102-img55.jpg\"<\/p>\n
Some More Interesting Editors<\/h2>\n
As we just saw, Visual Studio will use our date picker editor based on the data  type.   The framework matches the name of the data type to the name of  the editor.    Fortunately this is not the only matching that the  framework does.   Matching by data type alone would be too restrictive.   Looking back at our model, we have a couple of  properties of type string<\/code> that could use a custom editor.   We would like to have an editor for Zip Codes and one for specifying the State.  A Zip Code editor would limit input to digits and limit it to only 5 digits.   A State editor would be a drop-down that lists out the valid states that the user could select.<\/p>\n
You can add an attribute to any property so as to give the framework a hint to  point it in the direction of the correct editor.   To find the right  template name, it can not only base its match on the data type, the framework can also match on the value of the UIHint  attribute that you add to a property.<\/p>\n
We now want to extend our Model to include UIHints to specify better editors or  these properties:<\/p>\n
\tpublicclassAddressModel\n\t{\n\t   public string Line1 { get; set; }\n\t   public string Line2 { get; set; }\n\t   public string City { get; set; }\n\t   [UIHint(\"State\")]\n\t   public string State { get; set; }\n\t   [UIHint(\"ZipCode\")]\n\t   public string Zip { get; set; }\n\t   public bool IsVerified { get; set; }\n\t   public DateTime DateLastVerified { get; set; }\n\t   public bool? IsPrimary{get; set; }\n\t}\n\t\n<\/pre>\n
AZipCode.cshtml<\/code> might look like this:<\/p>\n
\t@model string\n\t\n\t@Html.TextBox(\"\", (Model),\n\tnew { @class = \"zipCode\" , maxlength=\"5\"})\n<\/pre>\n
We set the maxLength<\/code> attribute to limit it to 5 characters.   If you  support a zip plus 4, I recommend two text boxes; one with a max length of 5, and one with a max length of 4.   We also specify the class to attach the JavaScript later.<\/p>\n
We can add supporting JavaScript to limit input to only numbers and some  navigational characters. We do it like this:<\/p>\n
\t$(document).ready(function() {\n\t    $(\".zipCode\").keydown(function (e) {\n\t        \/\/ Allow: backspace, delete, tab, escape, enter\n\t        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||\n\t             \/\/ Allow: Ctrl+A\n\t            (e.keyCode == 65 &&e.ctrlKey === true) || \n\t             \/\/ Allow: navigation keys\n\t            (e.keyCode>= 35 &&e.keyCode<= 39)) {\n\t            \/\/ let these keys through\n\t            return;\n\t        }   \n\t        \/\/ Stop anything not a number\n\t       if ((e.shiftKey || (e.keyCode< 48 || e.keyCode> 57)) \n\t       && (e.keyCode< 96 || e.keyCode> 105)) {\n\t           e.preventDefault();\n\t       }\n\t});\n\t\n<\/pre>\n
State.cshtml<\/code>   may look like this with no supporting JavaScript required.<\/p>\n
\t@model string\n\t \n\t@{ ViewData [\"states\"] = new SelectList(new[]\n\t   {\n\t       \" \",  \"GA\", \"NC\", \"SC\", \"VA\"\n\t   }.Select(x => new {value = x, text = x}), \"value\", \"text\", @Model);\n\t}\n\t \n\t@Html.DropDownList(\"states\")\n<\/pre>\n
With these editors in place our View looks a little different, but it will  behave quite a bit differently.<\/p>\n
\n
The state is now a drop down with the values listed in the Editor template.   This is the most obvious change.   The changes to the Zip are not  visible, but based on the template, we are now capped at 5 characters and only the navigation keys and numeric keys will  be accepted.<\/p>\n
The key thing to note with the Zip Editor is that we can easily attach whatever  JavaScript we need to support the editing scenarios that we want.    We can easily wire up blur and focus event handlers as well as the key-down event that you saw here.   Had this been a currency field, we might want to wire up a blur event handler to format the inputted value as  currency and a focus event handler to remove the formatting to make it easier to edit.   You may also want to modify the key-down event handler to allow a decimal point as well as only 2 digits after  the decimal.    You have lots of possibilities.<\/p>\n
Also with the State editor, you probably would not want to hard-code the values  in the Editor.    You would most likely retrieve them from the  database.    You may also want to make this data-access logic  asynchronous.    This is easily done by having the Editor add the  script to make an AJAX call that will retrieve the list of valid values after the initial page load.    This is a great way to handle all types of drop down lists.<\/p>\n
Regardless of how simple or complex, you make your Editor, the View itself stays  the same with a simple call to EditorFor().<\/code> <\/p>\n
Editors for Models<\/h1>\n
As we saw earlier, Visual Studio will use our date-picker editor simply because  the name of the editor matches the data type of the property.     The same can happen if the editor’s name matches a more complex name like  AddressModel<\/code> .<\/p>\n
We don’t need to change anything in the markup for our View.  We simply need to move most of it to the EditorTemplate<\/code> folder and  rename it to AddressModel.cshtml<\/code> <\/p>\n
\n
Now our View can be simplified to this.   Everything else is in the Editor Template<\/p>\n
\t@using (Html.BeginForm()) {\n\t@Html.AntiForgeryToken()\n\t@Html.ValidationSummary(true)\n\t@Html.EditorFor(m => m)\n\t<p>\n\t   <inputtype=\"submit\"value=\"Save\"\/>\n\t<\/p>\n\t}\n\t\n<\/pre>\n
… or if we have a more complex Model using  AddressModel<\/code> as one of the properties, it now fits right at home.<\/p>\n
Consider a simple EmployeeModel<\/code> that includes the AddressModel<\/code> that we have been  using.<\/p>\n
\tpublicclassEmployeeModel\n\t{\n\tpublic stringFirstName { get; set; }\n\tpublic stringLastName { get; set; }\n\tpublicAddressModel Address { get; set; }\n\tpublicDateTimeHireDate { get; set; }\n\t}\n<\/pre>\n
\n
Following the pattern we have used so far, our View will naturally flow:<\/p>\n
\t<h2>Employee<\/h2>\n\t\n\t@using (Html.BeginForm()) {\n\t@Html.AntiForgeryToken()\n\t@Html.ValidationSummary(true)\n\t\n\t<fieldset>\n\t<legend>EmployeeModel<\/legend>\n\t\n\t<div class=\"editor-label\">\n\t@Html.LabelFor(model =>model.FirstName)\n\t<\/div>\n\t<div class=\"editor-field\">\n\t@Html.EditorFor(model =>model.FirstName)\n\t@Html.ValidationMessageFor(model =>model.FirstName)\n\t<\/div>\n\t\n\t<div class=\"editor-label\">\n\t@Html.LabelFor(model =>model.LastName)\n\t<\/div>\n\t<div class=\"editor-field\">\n\t@Html.EditorFor(model =>model.LastName)\n\t@Html.ValidationMessageFor(model =>model.LastName)\n\t<\/div>\n\t<div class=\"editor-field\">\n\t@Html.EditorFor(model =>model.Address)\n\t<\/div>\n\t<div class=\"editor-label\">\n\t@Html.LabelFor(model =>model.HireDate)\n\t<\/div>\n\t<div class=\"editor-field\">\n\t@Html.EditorFor(model =>model.HireDate)\n\t@Html.ValidationMessageFor(model =>model.HireDate)\n\t<\/div>\n\t\n\t<p>\n\t<inputtype=\"submit\"value=\"Save\"\/>\n\t<\/p>\n\t<\/fieldset>\n\t}\n<\/pre>\n
and we get a nice looking View:<\/p>\n
\n
\n
The evaluation of our editor templates happens recursively.   Even though the AddressModel.cshtml<\/code> was already in the EditorTemplates<\/code> folder, it gets evaluated for more editor templates.<\/p>\n
\n
Display Templates<\/h1>\n
Display Templates are similar to Editor Templates.    Display Templates are intended just to display the value with no edit capabilities.   Often this will take the form of a disabled control or a regular html label.<\/p>\n
Switching the EditorFor<\/code> to DisplayFor<\/code> in our earlier View, you can see that we  get a mix of disabled controls and labels.<\/p>\n
 \"2102-img5F.jpg\"<\/p>\n
My personal preference is to forego the disabled controls.  We will also apply some additional formatting on the date fields.<\/p>\n
Let’s start with a Boolean Display Template.     We will need to handle both NULLable and regular Boolean values in our template.   So our Boolean.cshtml<\/code> might look like this:<\/p>\n
\t@model bool?\n\t\n\t@{\n\tif (!Model.HasValue)\n\t    {\n\t<imgsrc=\"\/Images\/question-icon.png\"\/>\n\t    }\n\telse\n\t    {\n\t\n\tif (Model.Value)\n\t        {\n\t<imgsrc=\"\/Images\/true-icon.png\"\/>\n\t        }\n\tif (Model.Value == false)\n\t        {\n\t<imgsrc=\"\/Images\/false-icon.png\"\/>\n\t        }\n\t    }\n\t}\n<\/pre>\n
Here we explicitly test the three possible states for the NULLable Boolean which  will also cover the two possible states for the regular Boolean.   Note  that whether it is a NULLable or non NULLable value, it matches the filename  Boolean<\/code> .   This works out well because none of the special  characters used to specify a NULLable data type are valid for file names.<\/p>\n
Now let’s turn our attention to the  DateTime<\/code> Display Template.   Quite often we don’t really care about  the time part of the date time.   Even in cases where we do care, we  still may want to format it a bit differently then we see by default.     We also may want to draw attention to missing dates.<\/p>\n
So our Display Template might look like this:<\/p>\n
\t@model DateTime?\n\t\n\t@if (Model.HasValue)\n\t{\n\t<span>@Model.Value.ToString(\" MM \/ dd \/ yyyy\")<\/span>\n\t}\n\telse\n\t{\n\t<span>No date entered!<\/span>\n\t}\n<\/pre>\n
\n
Here we are only displaying the date part.   We have spread it out a bit so that it doesn’t look so squished, and we explicitly draw attention to missing  dates.    If we needed to show the time as well, we might instead  opt for something like this:<\/p>\n
\t<span>@Model.Value.ToString(\" MM \/ dd \/ yyyy  @ hh : mm tt\")<\/span>\n<\/pre>\n
You may want to do something similar to format currency fields or percentages.    You may chose to store phone numbers as just the numbers but want to include the formatting characters when you  display them.     You may want to explicitly strip out key  pieces of personal identifiable information.     There are  many uses for being able to specify an alternate template for displaying values.<\/p>\n
 \t\"2102-img60.jpg\"<\/p>\n
Conclusion <\/h1>\n
Editor Templates make it easy to add more functionality to our pages, thereby  enhancing usability.   At the same time, they make it easier to build up  our Views.   We merely specify that we want an Editor without having to  get bogged down in the details of what form that Editor should take.    Also, once in place, they help to make the web application look and behave more consistently.    Because we are only specifying that we want an Editor and allowing the framework to fill in the rest, we have  fewer places where inconsistencies can be introduced.<\/p>\n
At the other end of the spectrum, we have  Display<\/code> templates to simplify displaying data with no edit capabilities.   Display<\/code> templates and Editor<\/code> Templates follow the same matching rules for finding templates.  Together they complement each other to bring consistency to both editing and displaying data in your web  application.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"
If you find yourself doing routine work repeatedly in ASP.NET MVC, it is worth exploring the possibilities that come from modifying or creating Editor Templates in Visual Studio. Templates can save you a lot of time when creating views or other  default content. Nick Harrison explains.…<\/p>\n","protected":false},"author":221853,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[143538],"tags":[4143,4156,4157,4178,5166],"coauthors":[],"class_list":["post-1913","post","type-post","status-publish","format-standard","hentry","category-dotnet-development","tag-net","tag-asp","tag-asp-net","tag-bi","tag-mvc"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/1913","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/users\/221853"}],"replies":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/comments?post=1913"}],"version-history":[{"count":7,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/1913\/revisions"}],"predecessor-version":[{"id":91052,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/1913\/revisions\/91052"}],"wp:attachment":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/media?parent=1913"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/categories?post=1913"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/tags?post=1913"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/coauthors?post=1913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}