Question

this might be a stupid question,

but I’m using asp.net list control that creates a table with <div> elements that have a picture thumbnail, and when the user clicks on the div and it calls Ajax method and populates a shared dialog with correct information, and then shows it to the user. In order to do this the div needs to know the item id associated with it, so it can do the db lookup.

Right now I’m doing stuff like <div id="item<% Eval(Id) %>Widget" onmouseover="GetInfo(<% Eval(Id) %>" and then the GetInfo(id) method does so work to look up information and show and hide the appropriate elements to the user, etc. I recently read about the jquery .data() method and that sounds like a cleaner solution, because ideally in my <itemtemplate> I would associate the id with div tag (as its being written), that way the id doesn’t show up in the source (i.e GetInfo(5)) ( this is not a big deal, as i don’t care too much that user can see this id), but my secondary and biggest motivation is to be able to bind a click method by class name rather then id, so ideally something like $(".itemWidget).hover(func (show/hide stuff));

So my questions boils down to, how do you dynamically store data to a div item in a list view loop.

so something like

<listControl>
  <ItemTemplate>
    < div>
       stuff
       thisdiv.data(<% Eval(id) %>); // <-unsure about this part
    </div>
  </ItemTemplate>
</listControl>

Thanks for any help you can provide!

Answer 1

I think what you are looking for is the HTML5 custom data attributes. You can include them into the markup like this…

<ItemTemplate>
  <div class="whatever" data-id="<%= Eval(id) %>">
   stuff
  </div>
</ItemTemplate>

And then with jQuery (1.4.3 and above) you can easily get at it using data like this…

$(".whatever").hover(
  function() {
    //show
    var id = $(this).data("id");
    alert(id);
    GetInfo(id);
  },
  function() {
    //hide
  }
);