Question

I’m looking for recommendations how to implement a list of items shown as images that the user can toggle on/off on the client-side, which then can be tracked and saved on the server side.

I looked at the possibly using the asp.net list view control but as far as I can tell the client side API isn’t that great so I’d need to write a significant amount of client side code.

Any suggestions on a way to do it better?

Answer 1

From the jQuery side, I’m a big fan of the jQuery UI model, where the UI is entirely separate from the back end. Not everyone agrees with this (cough JSF cough) but if that’s the route you’re willing to go, it wouldn’t be that much work. What I would do:

• have asp.net render out a multi-select INPUT field.
• hide it with CSS
• via jQuery parse out the value/text pairs (which would be value/URL)
• render out the HTML you want based on the value/URLs (Such as DIVs with an IMG in each).
• apply a click event to each DIV that, in turn, updates the selected value(s) of your INPUT field.

Now, the reason I like this method is it keeps the server-side code simple. And as a front-end dev, the simpler I can keep it for the back end team, the happier they seem to be.

The problem I’ve found with most commercial .net components is the fact that they spit out their own custom UI layer that is often full of convoluted JS and overly-complicated markup–wich makes them rather inflexible from a custom UI perspective.