Display Templates & Editor Templates in MVC

DateTime.cshtml

//EditorTEmplated in Shred FOlder
@{
    string name = ViewData.TemplateInfo.HtmlFieldPrefix;
    string id = name.Replace(".", "_");
    string value = "";
    if (Model != null) { value = Model.ToShortDateString(); }        
}

<input type="text" id="@id" class="txt" value="@value" />
<script type="text/ecmascript">
    $(document).ready(function () {
        $('#@id').datepicker({
            changeMonth: true,
            changeYear: true
        });
    });
</script>
--------------------------------
//Display Template in shred folder
@if (Model!=null)
{ <div class="dtstr">@Model.ToShortDateString()    </div>}

Helpers.cs

 public partial class sHtml
    {
        public static HtmlString LabelMy(string target, string text)
        {
            return new HtmlString(String.Format("<label for='{0}'>{1}</label>", target, text));
        }
        public static HtmlString LabelMy(string text)
        {
            return new HtmlString(string.Format("<label></label", text));
        }
    }

homeController.cs

public class HomeController : Controller
    {
        //
        // GET: /Home/
        public ActionResult Index()
        {
            List<Office> offices = new List<Office>();
            offices.Add(new Office() {Name="Office One",ID=1 });
            offices.Add(new Office() { Name = "Office Two", ID = 2 });

            Contact contact = new Contact()
            {
                ID = 1,
                FirstName = "Sumit",
                Salary = 2000,
                IsActive = false,
                DOB = System.DateTime.Now,
                Age=34,
                IsDeleted=true,
                Offices=offices
            };
            return View(contact);
        }

    }

index.cshtml

@using MvcApplication1.Helpers
@model MvcApplication1.Models.Contact
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<fieldset>
    <legend>DisplayForModel</legend>
    @Html.DisplayForModel()
</fieldset>
<fieldset>
    <legend>EditorForModel</legend>
    @Html.EditorForModel()
</fieldset>
@Html.EditorFor(m => m.Offices)

Model.cs

 public partial class Contact
    {
        public int ID { get; set; }
        public string FirstName { get; set; }
        public bool IsActive { get; set; }
        public bool? IsDeleted { get; set; }
        public DateTime DOB { get; set; }
        public DateTime? DOJ { get; set; }
        public int Salary { get; set; }
        public int? Age { get; set; }
        public List<Office> Offices { get; set; }  
    }
    public class Office
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }
    [MetadataType(typeof(Contact_Validation))]
    public partial class Contact
    {
       
    }
    
    //[Bind(Exclude="ID")]
    public class Contact_Validation
    {
        [ScaffoldColumn(true)]
        public int ID { get; set; }
        [Display(Name = "First Name")]
        public string FirstName { get; set; }
        [Display(Name = "Active")]
        public bool IsActive { get; set; }
        [Display(Name = "Deleted")]
        public bool? IsDeleted { get; set; }
        [Display(Name = "Date Of Birth")]
        public DateTime DOB { get; set; }
        [Display(Name = "Date Of Joining")]
        public DateTime? DOJ { get; set; }
        [Display(Name = "Proposed Salary")]
        public int Salary { get; set; }
        [Display(Name = "Current Age")]
        public int? Age { get; set; }
        //[UIHint("Offices")]
        [DataType("Offices")]  
        public List<Office> Offices { get; set; }
    }

    public class MyContext : DbContext
    {
        public DbSet<Contact> Contacts { get; set; }
        public DbSet<Office> Offices { get; set; }
    }

Offices.cshtml

//Inside EditorTemplates folder in Sharted/COntroller folder
@model List<MvcApplication1.Models.Office>
@Html.DropDownListFor(m => m,new SelectList(Model,"ID","Name"))

string.cshtml

//EditorTEmplated in Shred FOlder
@Html.TextBoxFor(m => m, new { @class = "txt" })

//DisplayTemplated in Shread fFolder
@using MvcApplication1.Helpers
<div class="str">
@Model</div>

style.css

/* SUMIT Custom Template Styles
    ----------------------------------------------------------*/
.editor-field {
    margin: 1em 0 0 0 !important;
}

.display-field {
    min-height: 25px;
}

.editor-label, .display-label {
    margin-right: 10px;
    float: left;
    width: 150px;
    text-align: right;
}

    .editor-label ::after, .display-label::after {
        content: ':';
        margin: 0 5px;
    }

.txt { position: relative;
  z-index: 2;
  border: 1px solid #ccc;
  margin: 0;
  padding: 3px 2px;
  background-color: white;
  color: #333333;
  font-size: 1em;
  line-height: 1;
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
  -webkit-transition: border ease 0.5s;
  -moz-transition: border ease 0.5s;
  -o-transition: border ease 0.5s;
  transition: border ease 0.5s;
}

.txt:focus
{
  outline: none;
  border-color: #5ca9e4;
  box-shadow: 0 0 0 2px rgba(70, 161, 231, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) inset;
}

    .str {
        padding: 2px 3px;
        display: inline-block;
        line-height: 1;
        background: lightblue;
        border: 1px solid #ddd;
    }
    .dtstr {
        padding: 2px 3px;
        display: inline-block;
        line-height: 1;
        background: lightpink;
        border: 1px solid #ddd;
    }
    /*-----------------END------------------------*/