EditorFor Template的布尔类型

时间:2011-02-05 11:39:28

标签: asp.net-mvc-2 editorfor editorformodel

在将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>

2 个答案:

答案 0 :(得分:1)

使用MVC3,Jquery 1.7和CSS3

的EditorTemplates的布尔类型示例

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

答案 1 :(得分:0)

<%: ViewData.ModelMetadata.PropertyName %>

或:

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