MVC 2のHtml.EditorForにCSSクラスを追加

Question

テキストボックスにCSSクラスを追加しようとしています。これは私が私の見解で持っているものです。

<%: Html.EditorFor(m => m.StartDate) %> 

私は私のコードすることによって、このlinkの指示に従って試してみました：

<%: Html.EditorFor(m => m.StartDate, new { @class: "datepicker" }) %> 

しかし、私は言ってコンパイラエラーを取得：

構文エラー、 '、' expected

私はここで間違っていますか？

Answer 1

私は非常にEditor Templatesを使用してお勧めします。これは間違いなくあなたのEditorForのスタイルを変更する "正しい"方法です。

エディターテンプレートを使用するようにモデルプロパティに指示するには、2通りの方法があります。

最初の（最も簡単なのは）特定のデータタイプのエディタテンプレートを作成することです（DateTimeなど）。
2番目の方法は、UIHintを使用してDataAnnotationsに宣言的に設定することです。

編集
私はまた、JavaScriptが無効になっている場合でも、ユーザーが静止画は、現代のネイティブ日付ピッカー（唯一の有効なを見ることができるように、あなたの入力フィールドに「日付」タイプを使用する必要があることを追加したいですHTML5ブラウザ）
<input id="meeting" type="date" value="2011-01-13"/>

Answer 2

HtmlPropertiesを設定できるEditorForのオーバーロードはありません。 （IDictionaryをhtmlAttributes）

このリンクは、それを行う方法を説明します

http://aspadvice.com/blogs/kiran/archive/2009/11/29/Adding-html-attributes-support-for-Templates-2D00-ASP.Net-MVC-2.0-Beta_2D00_1.aspx

Answer 3

MVC3では、これを動作させることができなかったため、私は頭を叩き続けました。 1つのクラスを追加するだけでEditorTemplate全体を作成したくなかった。

代わりEditorForを使用してのまあ、TextBoxForを使用し、当然のとイコールはそうのような署名：

@Html.TextBoxFor(m=> m.ZipCode, new { @class = "zip" }) 

Answer 4

私はこれを行うために迅速かつ汚い方法ははい、jQueryの中だろうと思いますか？

$(document).ready(function() { 
    $('#StartDate').addClass('datepicker'); 
}); 

Answer 5

はここで非常にシンプルなソリューションです："datepicker"から二重引用符を削除して、Visual Studioに戻ってそれらを再入力し、それが動作するはずです。

私は同じ問題を抱えていました。ウェブからサンプルコードをコピーして貼り付けたところ、コードには特殊なタイプの引用があり、これは","構文の問題を引き起こしました。私はそれが本当に明らかではないことを知っています。

Answer 6

理想的には、エディタテンプレートを使用する必要があります。私は実際のHTMLコードを再構築できるMvcHtmlString.Create（）内のエディタテンプレートを使用してこの問題を回避しました。もちろん、「クラス」セクションのすべてをコピーして、エディタテンプレートをできるだけ有効に保ちたいと思うでしょう。

私は上記の提案の多くを試してみましたが、結局、私はそれがあまり複雑だと思うので、私は、これに定住し、それは私がエディタのテンプレートを使用し続けることができます：

@MvcHtmlString.Create(Html.EditorFor(m => m.StartDate).ToString().Replace("class=\"text-box single-line\"", "class=\"text-box single-line datepicker\"")) 

Answer 7

私はこれが古い質問です知っているが、私はここに貢献できると思った。私は同じ問題を抱えていて、エディタテンプレートを作ることを避けたかったのです。私は、ビュー内でHtml.EditorForを使用するときにhtml属性を指定できる汎用ソリューションのすべてのソリューションを必要としていました。

本当にCIAの回答が気に入っていましたが、必要な属性を渡すために少し拡張しました。

public static class EditorForExtentions 
{ 
    public static MvcHtmlString EditorFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, Object htmlAttributes, bool extendAttributes) 
    { 
     string value = html.EditorFor(expression).ToString(); 

     PropertyInfo[] properties = htmlAttributes.GetType().GetProperties(); 
     foreach (PropertyInfo info in properties) 
     { 
      int index = value.ToLower().IndexOf(info.Name.ToLower() + "="); 
      if (index < 0) 
       value = value.Insert(value.Length - (value.EndsWith("/>") ? 2 : 1), info.Name.ToLower() + "=\"" + info.GetValue(htmlAttributes, null) + "\""); 
      else if (extendAttributes) 
       value = value.Insert(index + info.Name.Length + 2, info.GetValue(htmlAttributes, null) + " ");    
     } 

     return MvcHtmlString.Create(value); 
    } 
} 

あなたはそれがHTML文字列を取得するには、通常のHtml.EditorForメソッドを使用しています。この

<%=Html.EditorFor(m => m.StartDate, new { @class = "datepicker" }, true)%> 

ようなビューでそれを呼び出すことができます - ：私は、HTML属性を受け入れ、余分なHtml.EditorForメソッドを作成しました必要なhtml属性を注入します。

Answer 8

@ HTML.EditorForヘルパーメソッドによって生成された特定のボックスにスタイルを適用するソリューションを探していました。

質問単一の要素のスタイルを編集したい人のためのCSSの@ HTML.EditorForのためのクラスが、の設定に関するました..あなたは、例えば、これを試すことができます。

で私のブロックは、私はヘルパーによって生成されたIDに基づいてスタイルを追加しました..

<style> 
    #EnrollmentInfo_Format 
    { 
     width:50px; 
     font: normal 100% 'Lucida Grande',Tahoma,sans-serif; 
     font-size: 11px; 
     color: #2e6e9e; 
    } 
</style> 

とし、その後、私のページに（私は部分図でこれをやっている）：

@Html.EditorFor(e => e.EnrollmentInfo.Format)