2011-02-05 17 views
0

EditorFor()のテンプレートに値の種類のテンプレートを使用すると、モデルのプロパティ名にアクセスするにはどうすればいいですか?たとえば、boolの場合は次のようにします。EditorForブール型のテンプレート

正しいプロパティ名でチェックボックス(またはテキストボックスを使用する場合)を正しくレンダリングするので、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> 

答えて

0
​​3210

または:

<%: ViewData.ModelMetadata.DisplayName %> 

UPDATE:リソースローカライズされた表示属性の

例:

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

のDisplayName属性は、ファイルのリソース内の文字列に接続することができますか? – mare

+0

@mare、no、そのままの状態ではありません。これを達成するために、 'DisplayNameAttribute'から派生したカスタム属性を書くことができます。 –

+0

[DisplayAttribute](http://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations.displayattribute.aspx)では、ローカライゼーション用のリソースファイルを使用できます – Chris

1

MVC3、jQueryの1.7を使用してEditorTemplatesためのブールタイプの例と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; } 
+0

これはどこかのライブデモがありますか? – mare

+0

[link](http://jsfiddle.net/8tsqY/6/)をご覧ください。 – Stian

関連する問題