a developer's notes – a semi-technical web development BLOG

January 22, 2014

MVC 4 – Using HTML5 “data-” attributes with Jquery

Filed under: ASP.NET MVC,Javascript / JQuery — Duy Nguyen @ 11:55 am
Tags: , , , , ,

You can create data- HTML attributes with your controls using this technique.

Define a new HTML Attributes anonymous object with your Html helpers. Below, I create a text box with some additional properties I want to be able to access with jQuery. Using properties that start with “data_”, you will be able to access the property with jquery’s data() method. Note: using property names that start with “data-” will result in a compilation error.

    ViewBag.Title = "Index";

<h1>Tesing data-properties in MVC</h1>

<div>@Html.Label("Product: ")@Html.Label("Book")</div>

@Html.TextBox("myTextbox", "", 
        @class = "myCssClass",
        data_my_new_property = "hello world",
        //data-dashTest = "hello dashTest", This will not work. Compilation Error 
        data_product_id = "productId1",
        data_minimum ="0",
        data_price = "5.00",
        data_val = "true",
        data_val_number = "The field Quantity must be a number.",
        data_val_range = "The field Quantity must be between 0 and 10000.",
        data_val_range_max = "10000",
        data_val_range_min = "0",
        data_val_required = "The Quantity field is required.",
        @style = "width: 100px;"

<input type="button" value="clickMe" />

    $(function () {
        var $qtyInput = $('.myCssClass');
        var myProperty = $qtyInput.data().price; // value is 5.00
        //You can also do this
        var txBox = document.getElementByID('myTextbox');


This is the HTML that gets rendered

<input name="myTextbox" 
style="width: 100px;" 
type="text" value="" 
data-val-required="The Quantity field is required." 
data-val-range="The field Quantity must be between 0 and 10000." 
data-val-number="The field Quantity must be a number." 
data-my-new-property = "hello world",

Here is what jquery’s data() method converts property names to. Interestingly, the underscores are removed and camel casing is applied to the name.


Here is another good article on the subject.



  1. Reblogged this on urbantechsf.

    Comment by mizakita — January 22, 2014 @ 1:05 pm | Reply

  2. Many thanks, I was trying trying to create the attributes object using the ‘data-‘ prefix. Now I know I can use the underscore.

    Comment by unidev — October 5, 2015 @ 12:26 pm | Reply

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: