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";
}

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

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

@Html.TextBox("myTextbox", "", 
    new
    {
        @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" />

<script>
    $(function () {
        var $qtyInput = $('.myCssClass');
        var myProperty = $qtyInput.data().price; // value is 5.00
        //You can also do this
        var txBox = document.getElementByID('myTextbox');
        console.log(txBox.getAttribute('data-my-new-property'));
    });

</script>

This is the HTML that gets rendered

<input name="myTextbox" 
class="myCssClass" 
id="myTextbox" 
style="width: 100px;" 
type="text" value="" 
data-val-required="The Quantity field is required." 
data-val-range-min="0" 
data-val-range-max="10000" 
data-val-range="The field Quantity must be between 0 and 10000." 
data-val-number="The field Quantity must be a number." 
data-val="true" 
data-my-new-property = "hello world",
data-product-id="productId1" 
data-price="5.00" 
data-minimum="0">

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

data-dash-watch

Here is another good article on the subject.
http://unmatchedstyle.com/news/html5-data-attributes-jquery.php

Advertisements

2 Comments »

  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

Blog at WordPress.com.

%d bloggers like this: