【问题标题】:EditorFor Template for boolean typeEditorFor 布尔类型的模板
【发布时间】:2011-02-05 11:39:28
【问题描述】:

当使用带有值类型模板的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>

【问题讨论】:

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


    【解决方案1】:

    使用 MVC3、Jquery 1.7 和 CSS3 的 EditorTemplate 的布尔类型示例

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

    【讨论】:

    • 你有这个的现场演示吗?
    【解决方案2】:
    <%: 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();
        }
    }
    

    【讨论】:

    • DisplayName 属性可以连接到 Resources 文件中的字符串吗?
    • @mare,不,不是开箱即用。您可以编写一个从 DisplayNameAttribute 派生的自定义属性来实现这一点。
    • DisplayAttribute 允许您使用资源文件进行本地化
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2022-01-11
    • 2015-01-11
    • 1970-01-01
    • 2014-06-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多