☰

ASP.NET MVC の HTML-5 data-* 属性でダッシュを使用する方法 質問する

tag-icon • tag-icon asp.net-mvc html custom-data-attribute
ASP.NET MVC の HTML-5 data-* 属性でダッシュを使用する方法 質問する

使用しようとしていますHTML5 データ属性私の ASP.NET MVC 1 プロジェクトで。(私は C# と ASP.NET MVC の初心者です。)

 <%= Html.ActionLink("« Previous", "Search",
     new { keyword = Model.Keyword, page = Model.currPage - 1},
     new { @class = "prev", data-details = "Some Details"   })%>

上記の htmlAttributes の「data-details」では次のエラーが発生します。

 CS0746: Invalid anonymous type member declarator. Anonymous type members 
  must be declared with a member assignment, simple name or member access.

data_details を使用すると動作しますが、仕様に従って「data-」で始まる必要があると思います。

私の質問:

  • これを機能させて、Html.ActionLink または同様の HTML ヘルパーで HTML5 データ属性を使用する方法はありますか?
  • 要素にカスタム データを添付する他の代替メカニズムはありますか? このデータは、後で JS によって処理されます。

ベストアンサー1

この問題は、ASP.Net MVC 3 で解決されました。HTML 属性プロパティ内のアンダースコアは、自動的にダッシュに変換されるようになりました。アンダースコアは HTML 属性では無効であるため、MVC はアンダースコアを使用する場合はダッシュが必要であることを自信を持って示唆できるため、この点は幸運でした。

例えば：

@Html.TextBoxFor(vm => vm.City, new { data_bind = "foo" })

これをMVC 3でレンダリングします:

<input data-bind="foo" id="City" name="City" type="text" value="" />

まだ古いバージョンの MVC を使用している場合は、MVC3 のソース コードから借用した次の静的メソッドを作成することで、MVC 3 の動作を模倣できます。

public class Foo {
    public static RouteValueDictionary AnonymousObjectToHtmlAttributes(object htmlAttributes) {
        RouteValueDictionary result = new RouteValueDictionary();
        if (htmlAttributes != null) {
            foreach (System.ComponentModel.PropertyDescriptor property in System.ComponentModel.TypeDescriptor.GetProperties(htmlAttributes)) {
                result.Add(property.Name.Replace('_', '-'), property.GetValue(htmlAttributes));
            }
        }
        return result;
    }
}

そして、次のように使用できます。

<%: Html.TextBoxFor(vm => vm.City, Foo.AnonymousObjectToHtmlAttributes(new { data_bind = "foo" })) %>

これにより、正しい data-* 属性がレンダリングされます。

<input data-bind="foo" id="City" name="City" type="text" value="" />

おすすめ記事