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();
}
}
精彩评论