Click here to Skip to main content
13,893,927 members
Click here to Skip to main content
Add your own
alternative version


13 bookmarked
Posted 20 Aug 2011
Licenced CPOL

HTML 5 and jQuery – A Match Made in Heaven

, 22 Aug 2011
Rate this:
Please Sign up or sign in to vote.
An introduction to HTML 5 Custom Data Attributes.

I recently attended an ASP.NET MVC seminar hosted by the Twin Cities .NET User Group. The speaker was K. Scott Allen. Scott is a charismatic, gifted speaker and did a great job. You can always pick up useful items when watching an expert write a program from scratch.

When I saw what he did with jQuery and HTML 5 Custom Data Attributes, I got so excited I ran around the room squealing like a little girl and wetting my pants until someone threw an unopened can of pop at my head and knocked me out cold. Well, that didn't happen, but what Scott did was interesting enough to compel me to write this post.

What are HTML 5 Custom Data Attributes?

They are attributes that YOU create for an HTML element that starts with "data-"

Here's an example:


data-entryType="Date" is a Custom Data Attribute. Note that asp:TextBox will render as an input element in the browser.

What is incredibly useful, is that jQuery can select elements by Custom Data Attributes. This is better than using CSS class names because CSS is for visual appearance and the CSS classes may be applied to elements you do NOT want to select with jQuery.

In the following example, I have three text boxes for entering data. They all share the same CSS class. Two of the textboxes are marked with a Custom Data Attribute to specify a date type of input.

Page Includes

<script src="Scripts/jquery-1.6.1.js" type="text/javascript"></script>

  <script src="Scripts/jquery-ui-1.8.15.custom/development-bundle/ui/jquery-ui-1.8.15.custom.js"


  <link href="Scripts/jquery-ui-1.8.15.custom/css/smoothness/jquery-ui-1.8.15.custom.css"

      rel="stylesheet" type="text/css" />


    background-color: Cyan;


<script type="text/javascript">


    function DocReady()
        $("input[data-entryType = 'Date']").datepicker();


            Company Name:
            <asp:TextBox ID="TextBoxCompanyName" CssClass="TextEntry" runat="server"></asp:TextBox>
            Start Date:
            <asp:TextBox ID="TextBoxStartDate" CssClass="TextEntry" data-entryType="Date" runat="server"></asp:TextBox>
            End Date:
            <asp:TextBox ID="TextBoxEndDate" CssClass="TextEntry" data-entryType="Date" runat="server"></asp:TextBox>

With this code, the jQuery DatePicker is effortlessly (in a manner of speaking) attached to the correct HTML elements.

There were other slick things demonstrated at the seminar and although it was a seminar on MVC, most of the features demonstrated were applicable to ASP.NET forms.

I have an open mind about MVC if it allows me to satisfy my client's needs in a more timely fashion than ASP.NET forms, then bring it on.

However, when I see source code mixed in with HTML markup, it looks like a giant step backwards towards classic ASP. I understand the frustration of dealing with the HTML output from the ASP.NET controls. Oh, yes, I do. But you don't have to use every control and there are controls that do give you 100% control over the HTML. So, I will continue to proceed with caution.

I hope someone finds this helpful.

Steve Wellens


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Steve Wellens
EndWell Software, Inc.
United States United States
I am an independent contractor/consultant working in the Twin Cities area in Minnesota. I work in .Net, Asp.Net, C#, C++, XML, SQL, Windows Forms, HTML, CSS, etc., etc., etc.

You may also be interested in...

Comments and Discussions

Questionhonestly, this has been possible since javascript could read and write from any dom element attribute. Pin
Daniel Gidman23-Aug-11 15:32
professionalDaniel Gidman23-Aug-11 15:32 
AnswerRe: honestly, this has been possible since javascript could read and write from any dom element attribute. Pin
Steve Wellens12-Sep-11 17:54
memberSteve Wellens12-Sep-11 17:54 
GeneralRe: honestly, this has been possible since javascript could read and write from any dom element attribute. Pin
Daniel Gidman21-Sep-11 4:45
professionalDaniel Gidman21-Sep-11 4:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04 | 2.8.190306.1 | Last Updated 22 Aug 2011
Article Copyright 2011 by Steve Wellens
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid