views:

449

answers:

2

I'm very new to the world of jQuery and might be asking a fairly trivial question here. I'm curious as to what the community views as the best practice for a databound object with jQuery functionality.

As a specific example, I've currently created a repeater bound to a list of objects. Each object has properties such as "link", "thumbnail", "subtext", etc. This is a small repeater(<10 items at any time). When a user clicks on "link", a separate area of the page updates to reflect that object.

The approaches I've discovered so far involve:

  • Dynamically creating the necessary jQuery script from the C# codebehind
  • Creating a JSON service to respond to the link request and return the object to be loaded(an extra possibly unnecessary database hit)
  • To dynamically create a JS Struct within the C# codebehind (similar struct)

I guess the main reason I have for avoiding a JSON service in this scenario, is that the objects have already been bound once after being returned from the datasource. I'm not sure if another db hit is warranted, but I'm open to any and all suggestions.

A: 

I assume this list has some basic details about some items and when you click on one you see some more data about that particular item.

I would definitely pick choices one (dynamic jQuery) or two (JSON service) depending on the size difference of the rendered page. If we're talking a difference in the vicinity of 10kb I would go with dynamic jQuery and just have all the data ready to go. If it's significantly more than that use a JSON service.

There's nothing wrong with an extra DB request and the delays it implies when the user expects it. If someone clicks on a web page item they're going to be fine with any delay less than half a second and perhaps a little over a second if you're nice enough to just say "please wait" to signal that a noticeable delay is normal.

Spencer Ruport
+1  A: 

Dynamically creating the necessary jQuery script from the C# codebehind might be unecessary as the JQuery code won't have to change. Bear in mind that unobtrusive JS is what jQuery is largely about.

I imagine the single piece of JS would look something like this:

$('.link-class', '#repeater-id').click(function(){
  // Get the id of the link or the target using $(this).attr('id')
  // Show a page section or call a service using the the discovered ID.
});

You can use the first comment to pull out the data you need to identify the data you wish to display.

The second comment can be either an Ajax call or a div toggle to some other section on your page. If this data is large then I'd be inclined to Ajax it. Otherwise I would keep it on the page and just toggle it on or off.

If you think users would be more inclined to click on several of the links then I would weight the non-ajax option a little more favourably even if the page was a little heavier. Especially if the user might return to a previously clicked link.

Does that make sense? Happy to elaborate further...

objektivs
That makes sense and is elegant for the click event. Only a small bit of information is being loaded into the page, so I'm not broken up about loading it all at once on the initial load. One question I do have is with the additional data attached to each object(ie, "Subtext"). In the itemdatabound event, item.Subtext is easily available, but I'm unsure how to attach that additional information.
Alexis Abril
This to be seems to be the best route to take, I'm adding a new question to tackle the custom attribute piece. I'm a big fan of Javascript not having to be generated(or any code being generated for that matter)
Alexis Abril
Hi Alexis. Thanks for the tick :). With the subtext issue I would output that as either a hidden field or a HTML element I style as hidden. Then create a selector that can find that when you need it. Possibly similarly as before, var subText = $('input#subTextID' + id, '#repeater-id').val();
objektivs