web-dev-qa-db-ja.com

ASP.NET MVC 3 Razor - EditorForにクラスを追加する

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

これはうまくいきません。

@Html.EditorFor(x => x.Created, new { @class = "date" })
asp.net-mvcasp.net-mvc-3razor
180
user137348

Html.EditorForにクラスを追加しても、そのテンプレートの内部にさまざまなタグを含めることができるので意味がありません。そのため、エディタテンプレート内でクラスを割り当てる必要があります。

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

カスタムテンプレートでは：

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

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の新機能、エディタテンプレートのブートストラップサポート

140
EF0

一般的なEditorForのクラスは設定できません。あなたが望むエディタを知っていれば、あなたはすぐにそれを使うことができます、そこであなたはクラスを設定することができます。カスタムテンプレートを作成する必要はありません。

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

あなたが使用することができます：

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

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

36
przno

同じイライラする問題があり、すべてのDateTime値に適用されるEditorTemplateを作成したくありませんでした（私のUIには、時間を表示する必要があり、 jQuery UI dropを表示したくない場合がありました）。ダウンカレンダー）。私の研究では、私が遭遇した根本的な問題は以下のとおりです。

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

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

  • このメソッドはDateTimeをjQueryカレンダーに必要なShortDateStringに自動的に変換します（時間があるとjQueryは失敗します）。
  • デフォルトでは、ヘルパーは必要なhtmlAttributesを適用してjQueryカレンダーを表示しますが、必要に応じてそれらをオーバーライドすることができます。
  • 日付が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');
});
29
bigmac

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

あなたの最初の例に基づいて：

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

カスタムテンプレートでは：

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

特に組み込みのエディタテンプレートの場合、何らかのプロパティが何らかの形で属性として追加される匿名オブジェクトを渡すためのEditorForのオーバーライドはありません。あなたはあなた自身のカスタムエディタテンプレートを書き、追加のviewdataとしてあなたが欲しい値を渡す必要があるでしょう。

8
marcind
@Html.EditorFor(m=>m.Created ...)

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

これが属性の適用方法です。

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

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

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

これがあなたの入力タグです

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

DropDownlistのためにあなたはこれを使うことができます：

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

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

@Html.DropDownlistFor(model=>model.Name)
2
Praveen M P

私はあなたが必要とするものを手に入れるためにCSS属性セレクタを使った別の解決策を使いました。

あなたが知っているHTML属性を示し、そしてあなたが望む相対的なスタイルで入れなさい。

以下のように：

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

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

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

質問は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にインジェクトすることです。 XDocument.Parse()を使ってLinq-to-XMLを使って現在の要素を解析することにしました。 htmlAttributesをobject型として渡します。 MVC RouteValueDictionaryを使用して、渡されたhtmlAttributesを解析します。属性が既に存在する場合はそれらの属性をマージするか、まだ存在しない場合は新しい属性を追加します。

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

これで、DisplayForの利点（通貨などのデータ型を適切にレンダリングする）を使用できるだけでなく、CSSクラス（およびそのことに関するその他の属性）を指定することもできます。 data-*やng-*（Angular）などの属性を追加するのに役立ちます。

1
barrypicker

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クラスと日付形式をハードコーディングしています。もちろん、それを変えることができます。 readonly、disabledなどの他のhtml属性についても同じことができます。

1
Alexandre

MVC3 RAzorで@Html.EditorFor()にクラスを適用するための最良の方法の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のために働きます。

0
Bilal

私はちょうど1ページに1テキストボックスのサイズを設定する必要がありました。モデルの属性のコーディングとカスタムエディタテンプレートの作成はやり過ぎるので、@ Html.EditorFor呼び出しをテキストボックスのサイズを指定するクラスを呼び出すspanタグでラップしました。

CSSクラス宣言：

.SpaceAvailableSearch input
{
    width:25px;
}

コードを見る：

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

また、jQueryを介してそれを行うことができます：

$('#x_Created').addClass(date);
0
ScottRFrost