EditorFor Template for boolean type

Question

How can we access the model's property name when using EditorFor() with a template for value types, for instance like the one below for bool type?

It seems that the MVC somehow pulls out the property name because it correctly renders the checkbox (or textbox, if used) with the correct property name, but where does MVC get it?

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<bool>" %>
 <fieldset>
        <legend>insert boolean property name here or the value of DisplayName attribute??</legend>
            <div class="clear">
                <p>
                    <%: Html.CheckBox("", Model) %>
                    <span>insert boolean property name here or the value of DisplayName attribute??</span>
                </p>
            </div>
    </fieldset>

Answer 1

<%: ViewData.ModelMetadata.PropertyName %>

or:

<%: ViewData.ModelMetadata.DisplayName %>

---

UPDATE:

Example of resource localized display attribute:

public class LocalizedDisplayNameAttribute : DisplayNameAttribute
{
    public LocalizedDisplayNameAttribute(string name)
        : base(GetValueFromResource(name))
    { }

    private static string GetValueFromResource(string name)
    {
        // TODO: fetch the display name from wherever you want
        throw new NotImplementedException();
    }
}

Answer 2

Example of a Boolean type for EditorTemplates using MVC3, Jquery 1.7 and CSS3

EditorTemplates Boolean.cshtml

@model bool
@{
    string propertyName = Html.ViewData.ModelMetadata.PropertyName;
}
<div class="field switch">
    @if (@Model == true)
    {
        <label class="cb-enable selected">
            <span>Yes</span></label>
        <label class="cb-disable">
            <span>No</span></label>
        <input type="checkbox" id="@propertyName" class="checkbox" name="@propertyName" value="true" checked=checked />
    }
    else
    {
        <label class="cb-enable">
            <span>Yes</span></label>
        <label class="cb-disable selected">
            <span>No</span></label>
        <input type="checkbox" id="@propertyName" class="checkbox" name="@propertyName" value="false"   />
    }
</div>
<script>
    $(document).ready(function () {
        $(".cb-enable").click(function () {
            var parent = $(this).parents('.switch');
            $('.cb-disable', parent).removeClass('selected');
            $(this).addClass('selected');
            $('.checkbox', parent).attr('checked', true);
            $('.checkbox', parent).attr('value', true);
        });
        $(".cb-disable").click(function () {
            var parent = $(this).parents('.switch');
            $('.cb-enable', parent).removeClass('selected');
            $(this).addClass('selected');
            $('.checkbox', parent).attr('checked', false);
            $('.checkbox', parent).attr('value', false);
        });
    });
</script>

CSS

    .cb-enable, .cb-disable, .cb-enable span, .cb-disable span
    {
      display: block; float: left;
    }
    .cb-enable {
      display: block;
      float: left;
      border: 1px solid #EEE;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      -webkit-border-top-left-radius: 5px;
      -webkit-border-top-right-radius: 0px;
      -webkit-border-bottom-right-radius: 0;
      -webkit-border-bottom-left-radius: 5px;
      -moz-border-radius-topleft: 5px;
      -moz-border-radius-topright: 0px;
      -moz-border-radius-bottomright: 0;
      -moz-border-radius-bottomleft: 5px;
      border-top-left-radius: 5px;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 5px;
    }
    .cb-disable
    {
      display: block; float: left; border: 1px solid #EEE;
     .roundedCorners(0px,5px,0px,5px);
    }
   .cb-enable span, .cb-disable span
   {
     line-height: 30px; display: block; background-repeat: no-repeat;  
   }
   .cb-enable span {  padding: 0 10px;  }
   .cb-disable span { padding: 0 10px; }
   .cb-disable.selected
   {
     background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, transparent),                             color-stop(100%, rgba(0, 0, 0, 0.25))),#D5D5D5;
     background: -webkit-linear-gradient(top, transparent,rgba(0, 0, 0, 0.25)),#D5D5D5;
     background: -moz-linear-gradient(top, transparent,rgba(0, 0, 0, 0.25)),#D5D5D5;
     background: -o-linear-gradient(top, transparent,rgba(0, 0, 0, 0.25)),#D5D5D5;
     background: -ms-linear-gradient(top, transparent,rgba(0, 0, 0, 0.25)),#D5D5D5;
     background: linear-gradient(top, transparent,rgba(0, 0, 0, 0.25)),#D5D5D5;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
     -webkit-border-top-left-radius: 5px;
     -webkit-border-top-right-radius: 0px;
     -webkit-border-bottom-right-radius: 0;
     -webkit-border-bottom-left-radius: 5px;
     -moz-border-radius-topleft: 5px;
     -moz-border-radius-topright: 0px;
     -moz-border-radius-bottomright: 0;
     -moz-border-radius-bottomleft: 5px;
     -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
     -o-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
     box-shadow: 0 1px 2px rgba(0,0,0,0.4);
     text-shadow: rgba(0, 0, 0, 0.2) 0 -1px 1px;
     color: white;
   }
   .cb-disable.selected span {  color: #fff; }
   .cb-enable.selected
   {
     background: #129EE8;
     background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.25))),#129EE8;
     background: -webkit-linear-gradient(top, transparent,rgba(0, 0, 0, 0.25)),#129EE8;
     background: -moz-linear-gradient(top, transparent,rgba(0, 0, 0, 0.25)),#129EE8;
     background: -o-linear-gradient(top, transparent,rgba(0, 0, 0, 0.25)),#129EE8;
     background: -ms-linear-gradient(top, transparent,rgba(0, 0, 0, 0.25)),#129EE8;
     background: linear-gradient(top, transparent,rgba(0, 0, 0, 0.25)),#129EE8;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
     -webkit-border-top-left-radius: 5px;
     -webkit-border-top-right-radius: 0px; 
     -webkit-border-bottom-right-radius: 0;
     -webkit-border-bottom-left-radius: 5px;
     -moz-border-radius-topleft: 5px;
     -moz-border-radius-topright: 0px;
     -moz-border-radius-bottomright: 0;
     -moz-border-radius-bottomleft: 5px;
     -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
     -o-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
     box-shadow: 0 1px 2px rgba(0,0,0,0.4);
     text-shadow: rgba(0, 0, 0, 0.2) 0 -1px 1px;
   }
   .cb-enable.selected span { color: #fff; }
   .switch label { cursor: pointer; }
   .switch input { display: none; }