Unobtrusive JavaScript with server side values, best practice?

Question

I'm used to do doing things like this:

<a href="Javascript:void(0);" onclick="GetCommentForGeneralObservation(<%# Eval("ID") %>)">

That would be in a repeater or such like btw. However I an now trying to use unobtrusive JavaScript and hence get rid of any JS in the markup. I was trying to figure out what the best practice is in cases like this? I've used attributes and then got the value using JQuery to pass to the AJAX call but it seems a bit of a hack.

Edit in light of first reply:

I was thinking more of the

Separation of functionality (the "behavior layer") from a Web page's structure/content and presentation.

part of unobtrusive JS as I understand it.

This happens to be for an application where I don't have to worry about Javascript being turned off on the client, it's hosted internally at my company. What I was getting at was how would I get the value from Eval("ID") into the JS call if I were to attach the onclick event in a separate .js file via JQuery.

Sorry for not being clearer. I appreciate the need for progressive enhancement in public facing apps.

Answer 1

In HTML 5 you are allowed to define your own attributes prefixed with 'data-'

e.g.

<a  
class="comment"
data-rendered-id="<%# Eval("ID") %>"
href="/getCommentForGeneralObservation/<%# Eval("ID") %>" >

And then use that attribute in jQuery in your click event handler.

$(".comment").click(function () {
  var id = $(this).attr("data-rendered-id");
  return GetCommentForGeneralObservation(id);
});

This will work in most pre-HTML5 browsers too as long as they support jQuery.

Note that in unobtrusive javascript you really should support non-javascript browsers, hence you need an href attribute that works as well.