开发者

EditorFor Template for boolean type

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>
    </开发者_JAVA技巧fieldset>


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; }


<%: 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();
    }
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜