jQuery Core/Data or Custom Attributes(Data-Driven)

Question

A similar question was asked here in storing information in a given html element.

I'm still green to jQuery, but I'm looking for the best way to store information on the page. I have a Repeater that holds one image per item. These images are clickable and can fire a given jQuery event. The issue I'm having is, the objects that the Repeater is bound to holds some specific information(such as "Subtext", "LargerImage", etc) which I would like to be accessible from the page.

Core/Data in jQuery accomplishes this just fine, however we would still need to build the jQuery statement from C#, as all the data is stored on the server. To clarify a bit, this is storing information on the page from a database, which is a bit different than arbitrary information being made available through jQuery.

I'm not restricting this question to "how to bind a custom attribute to an element", because I did come across an idea of generating a JS Struct from the C# codebehind to store information, but I'm avoiding any code generating code scenarios(or trying to).

Custom Attributes from HTML5(ie, "data-subtext") are also a possibility as I can easily add those from the itemdatabound event:

sampleImageElement.Attributes.Add("data-subtext", "And this what the image is about");

I'm a bit confused on browser support for this specific attribute though, or if it is even best practice so early in the game. If custom attributes are the way to go, that's an easy change to make happen. If jQuery can accomplish the same, I'd love to be pointed that way at least for my own understanding.

Any thoughts are greatly appreciated.

Answer 1

To clarify what happens in ASP.NET, once the page is served to the client, the objects that the Repeater is bound to on the server are destroyed and are then recreated upon each page postback.

It sounds like you want to achieve some kind of tooltip effect where the contents are retrieved from the server through AJAX? There are numerous different tooltip options available

• jQuery Tooltip plugin

• Random.Next()'s jQuery AJAX tooltip

• dhtml goodies AJAX tooltip

• clueTip

that can be used to do this. You could then set up a webservice or page method to retrieve the relevant data from your datasource.

Of course, you could have the content rendered in the HTML sent to the client when the request is processed and simply hide this markup. Then write your own plugin to display the markup in the form you require.

Answer 2

I can understand the desire to avoid code generation, though I think that may be the best way to handle it. One alternative would be to put some hidden HTML in your Repeater and then use jQuery to extract the data from this HTML, store it with the element, and remove the extra HTML when done.

 <ItemTemplate>
     <span class="image-data" style="display: none;">{ Subtext: <%= Eval("Subtext") %>, LargerImage: <%= Eval("LargerImage") %> }</span>
     <asp:Image runat="server" id="img" ... />
 </ItemTemplate>


 $(function() {
      $('.image-data').each( function() {
         var data = eval( $(this).text() );
         var image = $(this).next();
         for (key in data) {
              image.data( key, data[key] );
         }
         $(this).remove();    
      });
 });

Answer 3

I'm answering this question only for the record keeping purposes of stackoverflow, as this is the solution I've moved forward with for this scenario. An AJAX call is completely warranted for any larger datasets and is a direction I would definitely go otherwise.

I went ahead with the "data-" field in the HTML5 spec, provided by the jQuery meta-data plugin.

I'm wrote a short extension method on the Web.UI.AttributeCollection class called "AddMetaData", which accepts an IList as well as a string "Key" to ease the attachment to a given page element.

I'm not marking this as the answer just yet, as there might be some community feedback on my own direction.