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

Answer 1

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:

1. WCF
2. Page Methods

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.