ASP.NET MVC で HTML5 data-* 属性を TextBoxFor と使う：3 つの方法と詳細解説
ASP.NET MVC で HTML5 data-* 属性を TextBoxFor と一緒に使う方法
課題
ASP.NET MVC の TextBoxFor ヘルパーメソッドは、HTML 属性を匿名オブジェクトとして渡すことができます。しかし、data-* 属性にはハイフン (-) が含まれているため、C# コードで直接使用するとエラーが発生します。
解決策
この問題は、ハイフンをアンダースコア (_) に置き換えることで解決できます。 ASP.NET MVC は、アンダースコアをハイフンに変換するため、HTML 出力に正しく反映されます。
例
以下の例は、data-minimum-value と data-maximum-value 属性を持つテキストボックスを作成する方法を示します。
@Html.TextBoxFor(x => x.Age, new { data_minimum_value = 18, data_maximum_value = 100 })
このコードは次の HTML を生成します。
<input type="text" id="Age" name="Age" data-minimum-value="18" data-maximum-value="100" />
- Razor エンジン拡張機能を使用して、
data-*属性をより簡単に処理することができます。 - カスタム HTML ヘルパーメソッドを作成して、
data-*属性を処理することができます。
リソース
public class Person
{
public int Age { get; set; }
public string Name { get; set; }
}
ビュー
@model Person
@using (Html.BeginForm())
{
@Html.TextBoxFor(x => x.Age, new { @data_minimum_value = 18, @data_maximum_value = 100 })
@Html.TextBoxFor(x => x.Name, new { @data_placeholder = "Enter your name" })
<input type="submit" value="Submit" />
}
<form method="post" action="/">
<input type="text" id="Age" name="Age" data-minimum-value="18" data-maximum-value="100" />
<input type="text" id="Name" name="Name" data-placeholder="Enter your name" />
<input type="submit" value="Submit" />
</form>
説明
input type="submit"要素は、フォームの送信ボタンとして使用されます。- 匿名オブジェクトを使用して、
data-*属性を含む HTML 属性を指定できます。 Html.TextBoxFor()ヘルパーメソッドを使用して、モデルのプロパティに対応するテキストボックスを生成します。Html.BeginForm()メソッドを使用して、HTML フォームの開始タグを生成します。@usingディレクティブを使用して、Htmlヘルパーネームスペースをビューにインポートできます。- ハイフン (-) はアンダースコア (_) に置き換える必要があります。
@data_*属性構文を使用すると、data-*属性を HTML 要素に追加できます。
追加のリソース
カスタム HTML ヘルパーメソッドを作成して、data-* 属性を処理することができます。これは、複雑なロジックや条件付きの data-* 属性が必要な場合に役立ちます。
例：
public static class HtmlHelperExtensions
{
public static MvcHtmlString TextBoxForWithDataAnnotations(this HtmlHelper html, ModelExpression modelExpression, object htmlAttributes)
{
var dataAttributes = new Dictionary<string, string>();
foreach (var validationAttribute in modelExpression.ModelMetadata.ValidationAttributes)
{
if (validationAttribute is DataAttribute dataAttribute)
{
var dataAttributeName = $"data-{dataAttribute.DataKey}";
if (!dataAttributes.ContainsKey(dataAttributeName))
{
dataAttributes.Add(dataAttributeName, dataAttribute.Value.ToString());
}
}
}
htmlAttributes = htmlAttributes ?? new object();
var mergedAttributes = new Dictionary<string, string>(htmlAttributes as IDictionary<string, string> ?? new Dictionary<string, string>());
mergedAttributes.AddRange(dataAttributes);
return html.TextBoxFor(modelExpression, mergedAttributes);
}
}
このコードでは、TextBoxForWithDataAnnotations というカスタム HTML ヘルパーメソッドが定義されています。このメソッドは、モデル プロパティの検証属性に基づいて data-* 属性を自動的に生成します。
使用方法：
@Html.TextBoxForWithDataAnnotations(x => x.Age)
Razor エンジン拡張機能を使用する
Razor エンジン拡張機能を使用して、data-* 属性をより簡単に処理することができます。これは、data-* 属性を頻繁に使用する必要がある場合に役立ちます。
@inherits MyRazorEngineExtensions
@section Scripts {
<script>
function generateDataAttributes(validationAttributes) {
var dataAttributes = {};
for (var i = 0; i < validationAttributes.length; i++) {
var attribute = validationAttributes[i];
if (attribute instanceof DataAttribute) {
var dataAttributeName = "data-" + attribute.DataKey;
dataAttributes[dataAttributeName] = attribute.Value;
}
}
return dataAttributes;
}
</script>
}
@Html.TextBoxFor(x => x.Age, new { data = generateDataAttributes(Model.Age.GetValidationAttributes()) })
このコードでは、MyRazorEngineExtensions という Razor エンジン拡張機能が定義されています。この拡張機能は、generateDataAttributes という JavaScript 関数を提供します。この関数は、モデル プロパティの検証属性に基づいて data-* 属性のオブジェクトを生成します。
@Html.TextBoxFor(x => x.Age, new { data = generateDataAttributes(Model.Age.GetValidationAttributes()) })
これらの方法は、より複雑なシナリオで HTML5 data-* 属性を TextBoxFor と一緒に使用する際に役立ちます。
asp.net-mvc html asp.net-mvc-3
