Steve Wellens

Programming in the .Net environment

Sponsors

Links

HTML 5 and jQuery – A Match Made in Heaven

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:

    <asp:TextBox 
        ID="TextBox1" 
        CssClass="TextEntry" 
        data-entryType="Date" 
        runat="server">
    </asp:TextBox>

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"
        type="text/javascript"></script>
    <link href="Scripts/jquery-ui-1.8.15.custom/css/smoothness/jquery-ui-1.8.15.custom.css"
        rel="stylesheet" type="text/css" />

CSS:

    .TextEntry
    {
        background-color: Cyan;
    }

jQuery:

<script type="text/javascript">
 
    $(document).ready(DocReady);
 
    function DocReady()
    {
        $("input[data-entryType = 'Date']").datepicker();
    }

HTML:

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

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

Posted: Aug 19 2011, 09:00 PM by SGWellens | with 5 comment(s) |
Filed under: , ,

Comments

hajan said:

Nice post, Steve!

# August 20, 2011 7:42 AM

imran_ku07 said:

>>$("input[data-entryType = 'Date']")

jquery have builtin support for Html5 data.

http://api.jquery.com/data

# August 20, 2011 8:10 AM

SGWellens said:

>>jquery have builtin support for Html5 data.

>>http://api.jquery.com/data

Thanks for adding that information!

# August 20, 2011 9:39 AM

RichardD said:

For date inputs, you'd probably be better off setting "type=Date". Some browsers will then provide a native date picker control. You can use Modernizr [1] to test whether the current browser supports it, and add the jQuery UI datepicker if it doesn't.

Also, flowplayer.org [2] has a nice tool for integrating HTML5 date inputs with jQuery in any browser.

[1] http://www.modernizr.com/

[2] flowplayer.org/.../index.html

# August 22, 2011 2:12 PM