Use Dashes in HTML-5 data-* Attributes in ASP.NET MVC

HTML-5 data-* attributes provide a way to store custom data within HTML elements. These attributes can be useful for passing additional information to JavaScript or CSS. However, when working with ASP.NET MVC, you may encounter issues when using dashes in data-* attribute names. In this blog post, we will explore how to correctly use dashes in data-* attributes in ASP.NET MVC, along with code examples.

Understanding the Issue

In ASP.NET MVC, when you define a data-* attribute with a name containing dashes, the framework treats the attribute as a minus sign, causing rendering issues. For example, consider the following code:


When rendered, the above code will be interpreted as a subtraction operation rather than a custom attribute. To address this problem, you need to use an underscore (_) instead of a dash (-) in the attribute name.

Using Underscores in Attribute Names

To use dashes in data-* attribute names in ASP.NET MVC, you can follow these steps:

  1. Define the attribute name using underscores instead of dashes.
  2. Modify the code to handle the attribute name correctly.

Let's see how this can be done with some code examples:

Example 1: Creating a data-* Attribute

Suppose you want to create a data-fruit-type attribute with the value "apple". Here's how you can do it:


Example 2: Accessing the data-* Attribute in JavaScript

To access the data-fruit-type attribute in JavaScript, you can use the getAttribute method. Here's an example:

var fruitType = document.querySelector('[data_fruit_type]').getAttribute('data_fruit_type');

Example 3: Using the data-* Attribute in CSS

If you want to style elements based on the data-fruit-type attribute, you can use the attribute selector in CSS. Here's an example:

div[data_fruit_type="apple"] {
  color: red;

Example 4: Binding the data-* Attribute in ASP.NET MVC

In an ASP.NET MVC view, if you need to bind a model property to a data-* attribute, you can use the HtmlHelper class's Encode method to correctly handle the attribute name. Here's an example:


Example 5: Retrieving the data-* Attribute in ASP.NET MVC Controller

To retrieve the value of a data-* attribute in an ASP.NET MVC controller action, you can use the Request object's Params collection. Here's an example:

public ActionResult MyAction()
    var fruitType = Request.Params["data_fruit_type"];
    // Rest of the code...

Using dashes in HTML-5 data-* attributes can be problematic in ASP.NET MVC due to the framework's interpretation of dashes as subtraction operators. By replacing dashes with underscores, you can overcome this issue and correctly utilize data-* attributes. Remember to adjust your code accordingly when creating, accessing, styling, binding, or retrieving data-* attributes in ASP.NET MVC.

Asp.Net Ajax Control Toolkit tutorials.

Give your valuable comments.

6 + 4 =

About Us | Terms of Use | Privacy Policy | Disclaimer | Contact Us Copyright © 2012-2024 CodingFusion
50+ C# Programs for beginners to practice