what is the best way to store data for UI

Question

Hi ,

I am doing an application where there will be multiple items displayed on a page. for each item there will be lot of info. The data is completly generated in the code behind .aspx.cs and displayed in the ui.

When the user mouseover particular item , apart from visible elements i need some other info from the code behind to grab for that item. Right now i am storing lot of info with pipe separated in a hidden divs.

When the user mouseovers a item , i go to the context of that div and get the hidden values and show some popups..I just want to know if this is the right approach or if there is any other nice way of storing all the info as a object on the client side.

I am using jquery on the UI side.

Answer 1

You can store your data in a JavaScript object. Generate JSON on the back-end and parse it (or simply assign it as a literal to a variable) on the client side.

Answer 2

Personally, I've often used html attributes for this purpose, as creating separate div for each value isn't exactly concise or readable. Something like this <div class="feed" feed_id="id goes here" some_other_data="some other value">

You can also employ new data attributes from HTML 5, thus making your page valid HTML (if you care about passing validation at all).

edit
Javascript may also be a solution, as Ates notes, but IMHO it only works for small amount of information. If you consider example above, giving 'feed_id' value to each element with class 'feed' isn't exactly trivial in JavaScript.

Answer 3

jQuery allows you to store data against DOM objects in a much more elegant way.

See the data() api here: http://api.jquery.com/jQuery.data/

Another way that is used often but can make your X/HTML non compliant is creating your own attributes.

eg. <div id="myDiv" someattr="lipsum dolor sit emet"> ... </div>

and then in your jQuery you can get the value by doing $('myDiv').attr('someattr')