jQuery within a Repeater

Question

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.

Answer 1

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.

Answer 2

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...