Asp.net mvc 2 布尔类型模板的编辑器
当使用带有值类型模板的Asp.net mvc 2 布尔类型模板的编辑器,asp.net-mvc-2,editorfor,editorformodel,Asp.net Mvc 2,Editorfor,Editorformodel,当使用带有值类型模板的EditorFor()时,我们如何访问模型的属性名称,例如下面针对bool类型的模板 MVC似乎以某种方式提取了属性名,因为它正确地呈现了具有正确属性名的复选框(或文本框,如果使用),但MVC从何处获取它 <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<bool>" %> <fieldset> <legend>insert
EditorFor()
时,我们如何访问模型的属性名称,例如下面针对bool
类型的模板
MVC似乎以某种方式提取了属性名,因为它正确地呈现了具有正确属性名的复选框(或文本框,如果使用),但MVC从何处获取它
<%@ 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>
在此处插入布尔属性名或DisplayName属性的值??
在此处插入布尔属性名或DisplayName属性的值??
使用MVC3、Jquery 1.7和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>
DisplayName属性可以连接到资源文件中的字符串吗?@mare,不,不是现成的。您可以编写一个从
DisplayNameAttribute
派生的自定义属性来实现这一点。允许您使用资源文件进行本地化您在某处有这方面的实时演示吗?
<%: ViewData.ModelMetadata.DisplayName %>
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();
}
}
@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>
.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; }