ASP.NET MVC で data-dash- 属性プレフィックスを使用して HTML5 data- 属性にダッシュを含める

2024-05-19

ASP.NET MVC で HTML-5 data-* 属性を使用する際、ダッシュを含めることは許可されていません。しかし、ダッシュを含むデータ属性を定義したい場合があります。このチュートリアルでは、その方法を説明します。

カスタムデータ属性

ダッシュを含むデータ属性を作成するには、カスタムデータ属性を作成する必要があります。これを行うには、次の手順に従います。

新しいクラスを作成します。このクラスは、DataAttribute クラスから継承する必要があります。
クラスに、必要なプロパティとメソッドを追加します。
クラスに、Validate メソッドを追加します。このメソッドは、データ属性の値が有効かどうかを確認するために使用されます。

例

次の例では、MyDataAttribute という名前のカスタムデータ属性を作成する方法を示します。

[AttributeUsage(AttributeTargets.Property | AttributeTargets.Field | AttributeTargets.Parameter)]
public class MyDataAttribute : DataAttribute
{
    public string MyProperty { get; set; }

    public override bool Validate(object value)
    {
        // データ属性の値が有効かどうかを確認する
        return true;
    }

    public override string GetLocalizedString(string key)
    {
        // データ属性のローカライズされた表示名を返す
        return base.GetLocalizedString(key);
    }
}

HTML でカスタムデータ属性を使用する

カスタムデータ属性を作成したら、HTML で使用できます。これを行うには、次の手順に従います。

data-* 属性名に、カスタムデータ属性の名前を指定します。

<input type="text" data-my-data-attribute="my-value" />

ASP.NET MVC でカスタムデータ属性を使用するには、次の手順に従います。

カスタムデータ属性をモデルクラスに追加します。
コントローラーアクションで、カスタムデータ属性の値にアクセスします。

public class MyModel
{
    [MyDataAttribute(MyProperty = "my-value")]
    public string MyProperty { get; set; }
}

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyModel();

        // カスタム データ属性の値にアクセスする
        var myValue = model.MyProperty;

        return View();
    }
}

このチュートリアルでは、ASP.NET MVC で HTML-5 data-* 属性にダッシュを使用する方法について説明しました。カスタムデータ属性を作成することで、ダッシュを含むデータ属性を定義できます。

補足

このチュートリアルでは、基本的な例のみを示しています。カスタムデータ属性をより複雑にすることもできます。
カスタムデータ属性は、クライアント側検証やサーバー側検証に使用できます。
カスタムデータ属性は、データ属性のローカライズに使用できます。

このチュートリアルは、情報提供のみを目的としており、専門的な法的アドバイスを構成するものではありません。法的アドバイスが必要な場合は、弁護士に相談してください。

[AttributeUsage(AttributeTargets.Property | AttributeTargets.Field | AttributeTargets.Parameter)]
public class MyDataAttribute : DataAttribute
{
    public string MyProperty { get; set; }

    public override bool Validate(object value)
    {
        // データ属性の値が有効かどうかを確認する
        return true;
    }

    public override string GetLocalizedString(string key)
    {
        // データ属性のローカライズされた表示名を返す
        return base.GetLocalizedString(key);
    }
}

<input type="text" data-my-data-attribute="my-value" />

public class MyModel
{
    [MyDataAttribute(MyProperty = "my-value")]
    public string MyProperty { get; set; }
}

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyModel();

        // カスタム データ属性の値にアクセスする
        var myValue = model.MyProperty;

        return View();
    }
}

このサンプルコードをどのように使用できるかの例を次に示します。

フォームフィールドの検証に使用できます。

このサンプルコードは、あくまでも出発点として使用してください。ニーズに合わせてカスタマイズできます。

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

このチュートリアルでは、ASP.NET MVC で HTML-5 data-* 属性にダッシュを使用する 2 つの方法について説明します。

この方法は、チュートリアルの最初の部分で説明しました。この方法は、ダッシュを含むデータ属性を定義する最も柔軟な方法です。

2. data-dash- 属性プレフィックスを使用する*

この方法は、ダッシュを含むデータ属性を定義するより簡単な方法です。これを行うには、次の手順に従います。

data-* 属性名に、data-dash- というプレフィックスを追加します。

<input type="text" data-dash-my-data-attribute="my-value" />

public class MyModel
{
    [MyDataAttribute(MyProperty = "my-value")]
    public string MyProperty { get; set; }
}

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyModel();

        // カスタム データ属性の値にアクセスする
        var myValue = model.MyProperty;

        return View();
    }
}