ASP.NET MVC 3 Razor-EditorForへのクラスの追加


189

入力にクラスを追加しようとしています。

これは機能していません:

@Html.EditorFor(x => x.Created, new { @class = "date" })

1
名前もわかりましたね!-(私のコードの場合)
2013

1
注:一部の回答では、回答が正しい場合でも、それを実現するためにブラウザのキャッシュをクリアする必要がある場合があります。これは、ソリューションがCSSベースであるか、CSSクラスを含む場合に特に当てはまります。ただ、非常にわずかに異なる問題でこれを実現しながら....過ごした
JosephDoggie

回答:


183

にクラスを追加しても、Html.EditorForそのテンプレート内には多くの異なるタグが含まれる可能性があるため、意味がありません。したがって、エディターテンプレート内でクラスを割り当てる必要があります。

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

カスタムテンプレートで:

<div>
    @Html.TextBoxForModel(x => x.Created, new { @class = "date" })
</div>

5
これは非常に効果的です。モデルのDisplayFormatアノテーションに従ってフィールド値のフォーマットに問題があります。EditorForとDisplayForでは注釈が付けられているが、TextBoxForでは注釈が付けられていない:(誰かが私に見当たらないものを指摘できない限り、カスタムテンプレートを使用する必要があるように見えます。?
Sean

TextBoxForがDisplayFormatセットを受け入れないのと同じ問題があります。
jocull

14
これは、ModelTomへのGroundControllerです。Viewを送信し、最もMVCの方法でフローティングしています。
Trent Stewart

3
私は同じ問題を抱えていますが、エディターまたはディスプレイで動作するDisplayFormatが必要なため、TextBoxForを使用できませんが、同時に、クラスも必要なので、読み取り専用形式でテキストを表示できます
AT

153

ASP.NET MVC 5.1以降では、クラスをに追加することEditorForが可能です(元の質問ではASP.NET MVC 3が指定されており、受け入れられた回答は、検討された中で依然として最良です)。

@Html.EditorFor(x=> x.MyProperty,
    new { htmlAttributes = new { @class = "MyCssClass" } })

参照:ASP.NET MVC 5.1の新機能、エディターテンプレートのブートストラップサポート


それは素晴らしいです。ありがとう!
Neill

1
リストの3位なので、見逃してしまいました。おそらく、それを独自の質問にして、自分で答えることが役立つでしょう。
Robb Sadler

MVC 2、3、4の間、私は意味がありませんでした...しかし、より多くの人々がそれを使用しないことについて不平を言うようになりました-それは突然MVC 5で意味をなした:D +1
Piotr Kula

これは私の意見では受け入れられた答えになるはずです。
Manfred

101

ジェネリックEditorForのクラスを設定することはできません。必要なエディターがわかっている場合は、すぐに使用でき、そこでクラスを設定できます。カスタムテンプレートを作成する必要はありません。

@Html.TextBoxFor(x => x.Created, new { @class = "date" }) 

5
カスタムテンプレートを作成する必要がないのは良かったです。
Steve Duitsman、2009

あなたは私のために多くの時間を節約しましたjo!
プラシャントベニー

39

以下を使用できます。

@Html.EditorFor(x => x.Created, new { htmlAttributes = new { @class = "date" } })

(少なくともASP.NET MVC 5では、ASP.NET MVC 3でそれがどのように行われたかはわかりません。)


質問のタイトルを読んでください。これはMVC3の問題です。完全に誤解を招くMVC5ソリューションを提供しています。
Vincent、

10
そして、あなたが私がMVC5のために書いた私の投稿全体を読んでください。これはGoogleからの最初の結果だったので、私が欲しかったソリューションを見つけたので、ここで共有してください。
przno 2015

これは私を助けました!ありがとう@przno
Joakim M

29

同じイライラする問題があり、すべてのDateTime値に適用されるEditorTemplateを作成したくありませんでした(jQuery UIドロップダウンカレンダーではなく、UIで時間を表示したい時間がありました)。私の研究では、私が遭遇した根本的な問題は次のとおりです。

  • 標準のTextBoxForヘルパーを使用すると、「日付ピッカー」のカスタムクラスを適用して目立たないjQuery UIカレンダーをレンダリングできましたが、TextBoxForは時間なしでDateTimeをフォーマットしないため、カレンダーのレンダリングが失敗しました。
  • 標準のEditorForは、DateTimeをフォーマットされた文字列として表示します(などの適切な属性で装飾されている[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]場合)が、カスタムの「date-picker」クラスを適用できません。

したがって、次の利点を持つカスタムHtmlHelperクラスを作成しました。

  • このメソッドは、DateTimeをjQueryカレンダーで必要なShortDateStringに自動的に変換します(時間が存在する場合、jQueryは失敗します)。
  • デフォルトでは、ヘルパーはjQueryカレンダーを表示するために必要なhtmlAttributesを適用しますが、必要に応じてオーバーライドできます。
  • 日付がnullの場合、ASP.NET MVCは値として1/1/0001の日付を設定します。

このメソッドは、それを空の文字列に置き換えます。

public static MvcHtmlString CalenderTextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes = null)
{
    var mvcHtmlString = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper, expression, htmlAttributes ?? new { @class = "text-box single-line date-picker" });
    var xDoc = XDocument.Parse(mvcHtmlString.ToHtmlString());
    var xElement = xDoc.Element("input");
    if (xElement != null)
    {
        var valueAttribute = xElement.Attribute("value");
        if (valueAttribute != null)
        {
            valueAttribute.Value = DateTime.Parse(valueAttribute.Value).ToShortDateString();
            if (valueAttribute.Value == "1/1/0001")
                valueAttribute.Value = string.Empty;
        }
    }
    return new MvcHtmlString(xDoc.ToString());
}

そして、date-pickerクラス装飾を持つオブジェクトを探してカレンダーをレンダリングするJQuery構文を知りたい人のために、ここにそれを示します:

$(document).ready(function () {
    $('.date-picker').datepicker({ inline: true, maxDate: 0, changeMonth: true, changeYear: true });
    $('.date-picker').datepicker('option', 'showAnim', 'slideDown');
});

それは今私を助けました、それに関する小さな問題-DateTime.Parseメソッドに渡す前にvalueAttribute.Valueが空または空白でないことを確認する必要があります。そうしないと、空のフィールドでFormatExceptionがスローされる危険があります。
Moo

ありがとう。あなたは私をたくさん助けてくれました。
Bronzato 2013

これは、あなたがこれを実装しようとしていると、あなたはこのロジックを適用する必要があります検証を実行するために、フィールドを期待しているがあれば、私を助け:stackoverflow.com/questions/12023970/...
アーロンニュートン

良い仕事ができますが、日時や、単に日付コントロールだけで使用して表示された場合、あなたがコントロールすることができます知っていたDateTimePickerForモデルの日付フィールドを更新すると、あなたが代表しています[DataType(DataType.Date)][DataType(DataType.DateTime)]?たとえば、mm / dd / yyyyの形式で.ParseFormats(new string[] { "MM/dd/yyyy" })(または簡単に好きなように変更して)挿入することもできます。それのnullの場合、フィールドは中というコードにせずに、空のようにレンダリングん。
vapcguy

Razorは認識しません@MyHtmlHelpers.CalenderTextBoxFor(model => model.ExpirationDate)。これを実装する方法に関するアイデアはありますか?
Mehdiway 2016年

15

AdditionalViewDataを通じてクラスやその他の情報を提供することは可能です。これを使用して、ユーザーがデータベースフィールド(propertyName、editorType、およびeditorClass)に基づいてフォームを作成できるようにします。

最初の例に基づいて:

@Html.EditorFor(x => x.Created, new { cssClass = "date" })

カスタムテンプレートで:

<div>
    @Html.TextBoxFor(x => x.Created, new { @class = ViewData["cssClass"] })
</div>

8
@ Html.EditorFor(x => x.Created、new {cssClass = "date"})が機能しませんでした
アランマクドナルド

1
これは私のために働いた&マークされたものよりも良い答えです。テンプレートを使用するという利点がありますが、jQueryをハックすることなくカスタマイズを行うことができます。
チャドヘッジコック2014年

TextBoxForは、たとえば「DataType」のように、モデルに設定できる他の属性を無視します。
Markus

8

EditorFor特にビルトインエディターテンプレートの場合は、プロパティが何らかのタグの属性として追加される匿名オブジェクトを渡すことができるオーバーライドはありません。独自のカスタムエディターテンプレートを作成し、追加のビューデータとして必要な値を渡す必要があります。


2
@Html.EditorFor(m=>m.Created ...) 

テキストボックスに引数を渡すことはできません

これは、属性を適用する方法です。

@Html.TextBoxFor(m=>m.Created, new { @class= "date", Name ="myName", id="myId" })

2

jQueryを使用すると、簡単に実行できます。

$("input").addClass("class-name")

これが入力タグです

@Html.EditorFor(model => model.Name)

DropDownlistの場合、これを使用できます。

$("select").addClass("class-name")

ドロップダウンリストの場合:

@Html.DropDownlistFor(model=>model.Name)

2

質問の対象はMVC 3.0でしたが、問題はMVC 4.0でも解決されないことがわかりました。MVC 5.0には、ネイティブでhtmlAttributesのオーバーロードが含まれています。

私は現在の勤務先でMVC 4.0を使用する必要があり、JQuery統合用のcssクラスを追加する必要がありました。私は単一の拡張方法を使用してこの問題を解決しました...

拡張方法:

using System.Linq;
using System.Web.Mvc;
using System.Web.Routing;
using System.Xml.Linq;

namespace MyTest.Utilities
{
    public static class MVCHelperExtensionMethods
    {
        public static MvcHtmlString AddHtmlAttributes(this MvcHtmlString input, object htmlAttributes)
        {
            // WE WANT TO INJECT INTO AN EXISTING ELEMENT.  IF THE ATTRIBUTE ALREADY EXISTS, ADD TO IT, OTHERWISE
            // CREATE THE ATTRIBUTE WITH DATA VALUES.

            // USE XML PARSER TO PARSE HTML ELEMENT
            var xdoc = XDocument.Parse(input.ToHtmlString());
            var rootElement = (from e in xdoc.Elements() select e).FirstOrDefault();

            // IF WE CANNOT PARSE THE INPUT USING XDocument THEN RETURN THE ORIGINAL UNMODIFIED.
            if (rootElement == null)
            {
                return input;
            }

            // USE RouteValueDictionary TO PARSE THE NEW HTML ATTRIBUTES
            var routeValueDictionary = new RouteValueDictionary(htmlAttributes);

            foreach (var routeValue in routeValueDictionary)
            {
                var attribute = rootElement.Attribute(routeValue.Key);

                if (attribute == null)
                {
                    attribute = new XAttribute(name: routeValue.Key, value: routeValue.Value);
                    rootElement.Add(attribute);
                }
                else
                {
                    attribute.Value = string.Format("{0} {1}", attribute.Value, routeValue.Value).Trim();
                }
            }

            var elementString = rootElement.ToString();
            var response = new MvcHtmlString(elementString);
            return response;
        }
    }
}

HTMLマークアップの使用:

@Html.EditorFor(expression: x => x.MyTestProperty).AddHtmlAttributes(new { @class = "form-control" })

(かみそりビューに拡張メソッドの名前空間が含まれていることを確認してください)

説明: アイデアは、既存のHTMLに挿入することです。Linq-to-XMLを使用して現在の要素を解析することを選択しましたXDocument.Parse()。タイプとしてhtmlAttributesを渡しobjectます。MVCを利用していますRouteValueDictionary、渡されたhtmlAttributesを解析します。すでに存在する属性をマージするか、まだ存在しない場合は新しい属性を追加します。

入力が以下によって解析できない場合 XDocument.Parse()すべての希望を放棄して元の入力文字列を返します。

これで、DisplayFor(通貨などのデータ型を適切にレンダリングする)の利点を利用できるようになりましたが、CSSクラス(およびその他の属性)を指定することもできます。data-*ng-*(角度)などの属性を追加するのに役立ちます。


1

同じ動作を作成して、DateTime.cshtmlというシンプルなカスタムエディターを作成し、Views / Shared / EditorTemplatesに保存できます。

@model DateTime

@{
    var css = ViewData["class"] ?? "";
    @Html.TextBox("", (Model != DateTime.MinValue? Model.ToString("dd/MM/yyyy") : string.Empty), new { @class = "calendar medium " + css});
}

そしてあなたの見解では

@Html.EditorFor(model => model.StartDate, new { @class = "required" })

私の例では、2つのcssクラスと日付形式をハードコーディングしていることに注意してください。もちろん、それを変更することができます。読み取り専用、無効など、他のhtml属性でも同じことができます。


1

CSS属性セレクターを使用する別のソリューションを使用して、必要なものを取得しました。

知っているHTML属性を指定し、必要な相対スタイルに配置します。

以下のように:

input[type="date"]
{
     width: 150px;
}

1

MVC 4のカスタムテンプレートを作成する必要はありません。EditForの代わりにTextBoxを使用してください。ここでは、特別なhtml属性はサポートされていません。MVC5からのみサポートされています。TextBoxはMVC 4をサポートする必要があります。他のバージョンはわかりません。

@Html.TextBox("test", "", new { @id = "signupform", @class = "form-control", @role = "form",@placeholder="Name" })


0

1ページに1つのテキストボックスのサイズを設定するだけで済みます。モデルの属性のコーディングとカスタムエディターテンプレートの作成はやりすぎだったので、@ Html.EditorFor呼び出しを、テキストボックスのサイズを指定するクラスを呼び出すスパンタグでラップしました。

CSSクラス宣言:

.SpaceAvailableSearch input
{
    width:25px;
}

コードを表示:

<span class="SpaceAvailableSearch">@Html.EditorFor(model => model.SearchForm.SpaceAvailable)</span>

0

@Html.EditorFor()MVC3 RAzorでクラスを適用する最良の方法の1つは

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


<style type="text/css">

#Created
{
    background: #EEE linear-gradient(#EEE,#EEE);   
    border: 1px solid #adadad;
    width:90%;
    }
</style>

それはあなたに上記のスタイルを追加します EditorFor()

MVC3で動作します。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.