Using EditorTemplate in MVC3
Recently, I was asked to build a quality assurance application for our Claims department.
The application was not complex.
Qualifying users should be able to select one of the claims that we are managing
and
rate it in several categories where each category has several questions. Each question
contains the same
set of possible answers where the user can answer “meets the requirements”, “does
not meet the requirements”
or leave it unanswered.
Using MVC DropDownListFor for each of the questions could have become one of the
major annoyances
of that application, so I have found a solution in implementing Editor Template
and using EditorFor instead of DropDownListFor in Create view. Initial code for RatingDropDown
looked like this:
@model int?
@Html.DropDownList("",new SelectList(new[] {
new SelectListItem{ Text="---select---", Value="0"},
new SelectListItem{ Text="Meet the requirements",Value="1"} ,
new SelectListItem{ Text="Does not meet the requirements", Value="2"}
}, "Value", "Text"))
NOTE: I am using Nullable integer as a model for the template, because in Create view
on rendering null is being passed from the database.
Just in case you are new to MVC and Editor Templates I will mention how to prompt
MVC to render our template.
Since by default EditorFor helper for integer will render as a input type=”text”
we need to add an attribute to Model property we want to be rendered as select element,
so your property should look like this:
[UIHint("RatingsDropDown")]
public int EffectiveUseDiary { get; set; }
then your select will be rendered appropriately. (Just don’t forget to add to your
class reference to System.ComponentModel.DataAnnotations - that is where UIHint
leaves).
We are almost done. The last problem you will notice is that in the Edit View in
our select control previously saved values will not be selected.
To fix that, we need to implement one last correction in our Editor Template, so
it will look like this:
@model int?
@Html.DropDownList("",new SelectList(new[] {
new SelectListItem{ Text="---select---", Value="0"},
new SelectListItem{ Text="Meet the requirements",Value="1"} ,
new SelectListItem{ Text="Does not meet the requirements", Value="2"}
}, "Value", "Text", (Model.HasValue?Model.Value:0)))
Now we updated Editor Template with the logic which checks if there is value in our
model and provides mechanism to ensure that the value will be selected or if
value is null than first option in the select element will be selected.
We are done coding there is only one unanswered question left: What are the BENEFITS
of all that?
The answer is simple: Firstly, result of operations above is a simpler, better looking
and more maintainable, readable code. Instead of having for each question
@Html.DropDownListFor(model=>model.YourQuestionProp, new SelectList(new[] {
new SelectListItem{ Text="---select---", Value="0"},
new SelectListItem{ Text="Meet the requirements",Value="1"} ,
new SelectListItem{ Text="Does not meet the requirements", Value="2"}
}, "Value", "Text",”YourSelectedVal”))
You getting just this
@Html.EditorFor(model=>model.YourQuestionProp)
Secondly, if later on user will decide to add more items in performance rating, they
can all be done in one location – our Editor Template.
That’s it.
Happy coding.