web-dev-qa-db-ja.com

ASP.NET MVC Razor Viewでクラス属性をHtml.EditorForに設定します

ご存知のように、カミソリビューでactionLinkまたはtextBoxに属性を設定できますが、属性を@Html.EditorForに設定する方法は、EditorForがモデルタイプに従って設定できる動的な要素であることがわかりますが、属性を取得します。属性を@Html.EditorForに設定する方法はありますか？new {@class = "myclass"}？

c#asp.net-mvcasp.net-mvc-3razor
31
Saeid

EditorForヘルパーは、対応するエディターテンプレートをレンダリングします。 デフォルトのテンプレート または作成したカスタムテンプレートのいずれかです。このテンプレートには、任意のマークアップを含めることができます。多くのDOM要素を含めることができます。したがって、クラスをテンプレートに適用するように要求しても意味がないことがわかりました。このテンプレートのどの要素にこのクラスを適用しますか？たとえば、TextBoxForヘルパーを使用すると、単一の入力フィールドが生成されることがわかっているため、CSSクラスを適用することについて説明するのは理にかなっています（htmlAttributes引数でできることです）。

これは異なる技術があると言われています。たとえば、私が非常に気に入っているのは、カスタムデータアノテーションモデルメタデータプロバイダーとカスタムエディターテンプレートを ブログ投稿の続き で概説されているように記述することです。

もう1つの可能性は、デフォルトのテンプレートをカスタマイズし（Brad Wilsonのブログ投稿を参照）、対応する入力フィールドに異なるHTML属性を適用することです。 string.cshtmlエディターテンプレートの例を見てみましょう。

@model string
@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, ViewData)

次に、ビューモデルの文字列プロパティに対してこのエディターテンプレートをレンダリングする場合：

@Html.EditorFor(x => x.SomeStringProperty, new { @class = "myclass" })
45
Darin Dimitrov

これを試して：

@Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
57
10gler

カスタム属性を追加する

@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @data_minlength = "3", @class = "form-control input-md", @placeholder = "Name", @required = "required", @id= "txtName"} })

Data-を@data_に置き換えます

データを含む正しいhtmlを生成します-

10
Kamran Qadir

元のポスターは正しかったと思う

  • 各EditorFor()

    メインHTML elementを作成します（他にも存在する場合があります）。そのため、HTML attributesを含むobjectを渡して、そのメインHTML elementに適用できると非常に便利です。

  • HTML 5'autofocus'属性を1つのfieldすべてのformに適用したい、

  • しかし、カスタムコードを記述する必要はありません。

  • 特定の属性をinput elementに適用できるように、現在、その1つのフィールドに@Html.TextBoxFor()を使用するようになっているという事実は嫌いです。

  • EditorFor()メソッドにはパラメーターがあり、additionalViewDataを呼び出しますが、それで何ができるかわからず、[〜＃〜] msdn [〜＃〜 ]は私にとって何の助けにもなりませんでした。

2
user1738579

@Html.EditorFor()にクラスを追加するためのこの簡単なコードを試してください

@Html.EditorFor(x => x.Demo)

<style type="text/css">

#Demo
{
   color:#fff;
   width: 50%;
}

</style>

このコードはMVC3で正常に動作します

0
Bilal