My Editor Template for Input Form

My InputFormTemplate

My Wish

To create a single template to be use for all my ADD and EDIT form.

My Big Thanks Goes To

• ASP.NET MVC : Annotated for Input by Dino Esposito
• ASP.NET MVC Basics Part 1: View Model Binding by Ed Andersen

My Strategy

Base on Dino blog, this are the steps taken :

1. Create editor template
2. Create model m complete with annotation
3. Create viewmodels vm for model m
4. Create controller c for model m
• Create action NEW - pass vm to view
5. Create partial view New for model m 
• Call template using helper @Html.EditorFor

My Editor Template

1. Add folder EditorTemplates under Shared folder
• \View\Shared\EditorTemplates
2. Add partial view InputTemplate under EditorTemplates folder
• \EditorTemplate\InputTemplate.cshtml
3. Add this code to InputTemplate

@inherits System.Web.Mvc.WebViewPage 
@if (Model == null) 
{ 
   <span>@ViewData.ModelMetadata.NullDisplayText</span> 
} 
else 
{        
   foreach (var prop in ViewData 
              .ModelMetadata 
              .Properties 
              .Where(pm => pm.ShowForDisplay && !ViewData.TemplateInfo.Visited(pm))) 
   { 
        if (prop.DisplayName != null) {   // only show prop with display name         // using bootstrap for css styling
           <div class="form-group col-xs-6">
                <label class="col-xs-4 control-label text-right">
                    <span style="color:red"> @(prop.IsRequired ? "*" : "")  </span>
                    <span>@prop.GetDisplayName()</span>
                </label>
                <div class="col-xs-8">                      
                    @if(prop.IsReadOnly) 
                    { 
                        <span class="readonly-field">@Html.Display(prop.PropertyName)</span> 
                    } 
                    else if (prop.TemplateHint == "DropDown")
                    { 
                        <span>@Html.DropDownList(prop.PropertyName,(IEnumerable<SelectListItem>) ViewData[prop.PropertyName],
                            new { @class = "form-control" })</span>
                        <span>@Html.ValidationMessage(prop.PropertyName)</span>
                    } 
                    else
                    {
                        <div class="editor-field"> 
                            <span>@Html.Editor(prop.PropertyName)</span> 
                            <span>@Html.ValidationMessage(prop.PropertyName, new { @class = "label-danger" } )</span> 
                        </div>
                    }                     
                </div>
          </div>
        
        } // if
    } // foreach
}

My Explaination

1. Read each properties in the model using foreach loop

foreach (var prop in ViewData   
        .ModelMetadata   
        .Properties   
        .Where(pm => pm.ShowForDisplay && !ViewData.TemplateInfo.Visited(pm)))   
   {   

2. Only display properties with DisplayName and not Complex Type

if (!prop.IsComplexType && prop.DisplayName != null ) {  

3. Display label name together with '*' marking for required property

<label class="col-xs-4 control-label"><small>   
    <span>@prop.GetDisplayName()</span>  
    <span style="color:red"> @(prop.IsRequired ? "*" : "") </span>  
</small></label> 

4. Display input box or dropdown box

<div class="col-xs-8">             
@if(prop.TemplateHint == "DropDown") // using UIHint[DropDown]  
{   
  <span>@Html.DropDownList(prop.PropertyName,(IEnumerable<SelectListItem>) ViewData[prop.PropertyName],  
        new { @class = "form-control" })</span>  
  <span>@Html.ValidationMessage(prop.PropertyName)</span>  
}   
else  
{  
  <div class="editor-field">   
     <span>@Html.Editor(prop.PropertyName, 
       new { @class = "text-box single-line form-control" })</span>   
     <span>@Html.ValidationMessage(prop.PropertyName, new { @class = "label-danger" } )</span>   
  </div>  
}             
</div>  

Basicly this template will show all label and input box of all properties in two column.

To be continue on next post for steps 2 onward ...