2

以前はMVC3で作業していましたが、以前のプロジェクトの一部を取り、それらを新しいMVC4テンプレートに埋め込みました。どうやら、最もよく使用されている2つのCSSクラス定義editor-labelとeditor-fielddivは、MVC4のSite.cssから消えています。

問題は、CSSファイルでそれらを定義し直す必要があるのか​​、それとも他の何かを使用するのか、それとも何を使用するのかということです。

4

1 に答える 1

2

さて、あなたが取ることができるいくつかのオプションがあります：

クラス内の要素をラップする

すべての入力をaでラップしdiv、スタイルを変更して、との代わりにそれをターゲットにしdivます。.editor-label.editor-field

だからHTML

<label class="editor-label">blah</label>
<input class="editor-field" />

になる

<div class="editor">
    <label class="editor-label">blah</label>
    <input class="editor-field" />
</div>

そしてあなたのCSS

.editor-label { /**/ }
.editor-field { /**/ }

になる

.editor label { /**/ }
.editor input,
.editor select { /**/ }

JavaScriptでそれらを追加し直します

JavaScriptを使用してクラスを追加し直すことができる場合があります。

jsFiddleのデモ

var content = document.getElementById('content');
var labels = content.getElementsByTagName('label');

for (var i = 0; i < labels.length; i++) {
    labels[i].classList.add('editor-label');
    var id = labels[i].getAttribute('for');
    var input = document.getElementById(id);
    input.classList.add('editor-field');
}

エディターテンプレートを変更する

数か月前に、とからカスタムHTMLを出力できるように、表示テンプレートとエディターテンプレートを変更する方法についてブログに投稿しました。これにより、クラスを元の場所に戻すことができます。ただし、この方法は、状況に見合うだけの価値があるよりも厄介な場合があります。HtmlHelper.EditorFor()HtmlHelper.DisplayFor()

Views/Shared/EditorTemplates/基本的に、オーバーライドするタイプに基づいて名前が付けられた場所にカスタムビューを配置できます（例string.cshtml：string。のビューの例stringは次のとおりです。

string.cshtml

@model string

@{
    var id = ViewData.TemplateInfo.GetFullHtmlFieldId(Model);
}

<label class="editor-label" for="@id"></label>
<input type="text" class="editor-field" id="@id" />

パスインhtmlAttributes

のhtmlAttributes引数にクラスを渡すことはできませんがEditorFor()、LabelFor()andTextBoxFor()などはできます。のすべてのインスタンスをEditorFor()それぞれのタイプに変更し、呼び出しでクラスを提供することができます。

@Html.LabelFor(e => e.UserName, new { @class="editor-field" })
@Html.TextBoxFor(m => m.UserName, new { @class="editor-field" })

参考文献

于 2013-03-23T13:12:06.393 に答える