WebGridヘルパーを使用してレンダリングされるテーブルにカスタムHTML5データ属性を追加しようとすると問題が発生します。テーブルタグを次のように表示します。
<table data-test="testdata"><!-- Table Content --></table>
これは、Razorビューエンジンを使用したサンプルビューです。
@{
var myUser = new
{
Id = 1,
Name = "Test User"
};
var users = new[] { myUser };
var grid = new WebGrid(users);
}
@grid.GetHtml(htmlAttributes: new { data-test = "testdata"})
最後の行は、「無効な匿名型メンバー宣言子」を生成します。データテストのハイフンが原因でエラーが発生しました。
他の入力HtmlHelpersのいくつかでは、ハイフンの代わりにアンダースコアを使用でき、レンダリング時に自動的にハイフンに変更されます。これはWebGridでは発生しません。
HtmlAttributesの辞書を渡すと:
@grid.GetHtml(htmlAttributes: new Dictionary<string, object> {{ "data-test", "testdata"}})
テーブルは次のようにレンダリングされます。
<table Comparer="System.Collections.Generic.GenericEqualityComparer`1[System.String]" Count="1" Keys="System.Collections.Generic.Dictionary`2+KeyCollection[System.String,System.Object]" Values="System.Collections.Generic.Dictionary`2+ValueCollection[System.String,System.Object]"><!-- Table Content --></table>
何が間違っているのでしょうか。また、必要に応じて属性をレンダリングするにはどうすればよいですか。
これは不可能だと思います。残念ながら、WebGridは、TextBoxFor
などの標準のHTMLヘルパーと同じ構文をサポートしていません。
@Html.TextBoxFor(x => x.SomeProp, new { data_test = "testdata" })
アンダースコアは自動的にダッシュに変換されます。