Best way to store data on the client side - ASP.Net + JQuery

Question

I'm writing an admin form for some fairly complex objects. Its a standard repeater which displays some 'basic' information (name, id etc.) for each object row.

Clicking 'Edit' for a row expands it (using JQuery) to reveal the full horror of all the associated editable objects. One of these is a list of documents associated with each row and needs to be JQuery-editable so the user could click 'edit' to open up the full row gui, then un/select checkboxes to de/associate documents and then hit 'Save' to persist everything.

Currently I'm using nested repeaters to store the initially-hidden fields - the repeater generates a hidden formfield containing a comma-separated list of IDs for the assoc documents. When it comes to populating the Edit gui I do a split operation on the delimited string and set/unset the checkboxes as required.

This is proving a nightmare from a maintainability perspective and in my frustrated wanderings of the web in search of a solution i noticed JQuery has some functionality to act as a client-side database. Does any one have any experience of this, and if so, would you recommend it? My custom JS to parse csv-strings and dynamically build the gui is starting to grind me down a bit.

Thanks in advance,

5arx

score 5 · Accepted Answer · answered Nov 29 '10 at 16:43

5

Your getting into the realm of very advanced client-side behavior, and are bumping into a phenomenon that I think a lot of Web Forms developers hit. Trying to mash two paradigms into each other.

Without going into a lot of detail, my advice would be to go with a "Pure AJAX" approach to solving your client woes. The basic outline is this:

Use AJAX calls to grab a JSON representation of your data structure
- In your case... jQuery.ajax jQuery.get jQuery.getJSON
Use a client side templating / binding framework to generate the UI and bind the JSON objects to those elements. There are a couple of good options here.
- jQuery
  - Templating: http://api.jquery.com/category/plugins/templates/
  - Data Binding: http://api.jquery.com/category/plugins/data-link/
- Knockout JS
  - Knockout can use jQuery templating, but implements it's own version of databinding.
Make actions on the UI call web service methods to handle data manipulation operations.

You can implement the JSON stuff however you feel best suits your needs, but in ASP.Net you basically have two options:

It's probably going to involve some re-architecting on your part, but if you want to achieve really nice client-side behavior you are going to have to bite the bullet and just do it.

answered Nov 29 '10 at 16:43

Josh

44,706
7
102
124

@Josh - Thanks for the speedy response. Unfortunately I'm limited in terms of the tech (asp.net 1.1) on this one, so its going to have to be some kind of crude, hand-rolled solution :-( I've taken a look at the JQuery data methods - they seem to only allow storage of single, keyed values so no good for my multi-part data requirement. – immutabl Nov 29 '10 at 16:55
1

@5arx - 1.1 isn't a total loss. You could always implement a custom HttpHandler to return a JSON response. It won't be beautiful, but it would get the job done, and allow you to work with the nice client side functionality that jQuery provides. – Josh Nov 29 '10 at 18:25
@Josh - cheers. I'll take a good look into it. Time is a bit of an issue though so if its going to take too long to get into JSON I might have to implement this in a standard webform :-( – immutabl Nov 30 '10 at 10:34
@Josh - I've gone for a quicker server-side solution. But thanks much for the tip. I'll definitely use it next time round. Have +1'd you. – immutabl Dec 01 '10 at 14:01
@5arx - You should post your solution here and mark it as the accepted answer. There is no shame in doing so, and it helps the community :) – Josh Dec 01 '10 at 14:08
@Josh - I've marked yours as the accepted answer to the orig question - my revised solution is pure serverside ;-) EDIT: Thinking back to the bad old days of classic ASP and what was then called DHTML we used to stick shedloads of data into JS arrays and things. My 2010 foray into this stuff reveals that actually, things haven't changed that much since 1998 :-( – immutabl Dec 01 '10 at 14:15
@5arx - yeah people were using 0 pixel IFrames to load XML data in the background and applying XSL to generate dynamic DOM elements loaded via JavaScript... then one day somebody came along and called that AJAX :) The mechanism might have been different, but the idea was the same. – Josh Dec 01 '10 at 15:43
@Josh - yep. Guilty as charged ;-) – immutabl Dec 01 '10 at 15:56
Well its exactly six years later and we've still got these problems. But if anyone from the future is reading this, the landscape is a little more hospitable. You can use WebApi and JQuery :-) – immutabl Nov 30 '16 at 11:48
AngularJS could be a better solution with the already integrated $scopes, $rootScope, localStorage, etc... – alexOtano Jul 10 '17 at 04:36

Best way to store data on the client side - ASP.Net + JQuery

1 Answers1