入力にクラスを追加しようとしています。
これは機能していません:
@Html.EditorFor(x => x.Created, new { @class = "date" })
入力にクラスを追加しようとしています。
これは機能していません:
@Html.EditorFor(x => x.Created, new { @class = "date" })
回答:
にクラスを追加しても、Html.EditorFor
そのテンプレート内には多くの異なるタグが含まれる可能性があるため、意味がありません。したがって、エディターテンプレート内でクラスを割り当てる必要があります。
@Html.EditorFor(x => x.Created)
カスタムテンプレートで:
<div>
@Html.TextBoxForModel(x => x.Created, new { @class = "date" })
</div>
ASP.NET MVC 5.1以降では、クラスをに追加することEditorFor
が可能です(元の質問ではASP.NET MVC 3が指定されており、受け入れられた回答は、検討された中で依然として最良です)。
@Html.EditorFor(x=> x.MyProperty,
new { htmlAttributes = new { @class = "MyCssClass" } })
ジェネリックEditorForのクラスを設定することはできません。必要なエディターがわかっている場合は、すぐに使用でき、そこでクラスを設定できます。カスタムテンプレートを作成する必要はありません。
@Html.TextBoxFor(x => x.Created, new { @class = "date" })
以下を使用できます。
@Html.EditorFor(x => x.Created, new { htmlAttributes = new { @class = "date" } })
(少なくともASP.NET MVC 5では、ASP.NET MVC 3でそれがどのように行われたかはわかりません。)
同じイライラする問題があり、すべてのDateTime値に適用されるEditorTemplateを作成したくありませんでした(jQuery UIドロップダウンカレンダーではなく、UIで時間を表示したい時間がありました)。私の研究では、私が遭遇した根本的な問題は次のとおりです。
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
場合)が、カスタムの「date-picker」クラスを適用できません。したがって、次の利点を持つカスタムHtmlHelperクラスを作成しました。
このメソッドは、それを空の文字列に置き換えます。
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');
});
DateTimePickerFor
モデルの日付フィールドを更新すると、あなたが代表しています[DataType(DataType.Date)]
か[DataType(DataType.DateTime)]
?たとえば、mm / dd / yyyyの形式で.ParseFormats(new string[] { "MM/dd/yyyy" })
(または簡単に好きなように変更して)挿入することもできます。それのnullの場合、フィールドは中というコードにせずに、空のようにレンダリングん。
@MyHtmlHelpers.CalenderTextBoxFor(model => model.ExpirationDate)
。これを実装する方法に関するアイデアはありますか?
AdditionalViewDataを通じてクラスやその他の情報を提供することは可能です。これを使用して、ユーザーがデータベースフィールド(propertyName、editorType、およびeditorClass)に基づいてフォームを作成できるようにします。
最初の例に基づいて:
@Html.EditorFor(x => x.Created, new { cssClass = "date" })
カスタムテンプレートで:
<div>
@Html.TextBoxFor(x => x.Created, new { @class = ViewData["cssClass"] })
</div>
@Html.EditorFor(m=>m.Created ...)
テキストボックスに引数を渡すことはできません
これは、属性を適用する方法です。
@Html.TextBoxFor(m=>m.Created, new { @class= "date", Name ="myName", id="myId" })
質問の対象は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-*
(角度)などの属性を追加するのに役立ちます。
同じ動作を作成して、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属性でも同じことができます。
jQueryを使用して行うこともできます。
$('#x_Created').addClass(date);
1ページに1つのテキストボックスのサイズを設定するだけで済みます。モデルの属性のコーディングとカスタムエディターテンプレートの作成はやりすぎだったので、@ Html.EditorFor呼び出しを、テキストボックスのサイズを指定するクラスを呼び出すスパンタグでラップしました。
.SpaceAvailableSearch input
{
width:25px;
}
<span class="SpaceAvailableSearch">@Html.EditorFor(model => model.SearchForm.SpaceAvailable)</span>