Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 847
indra Avatar asked Nov 29 '10 16:11

indra


People also ask

How pass data from client side to server side in ASP NET?

To pass the value of client side, you can use javascript to pass that value to a <asp:HiddenField > first, then do a post back. At the server side you can retrive the value.

What is stored at client side?

They are bits of text stored on the client machine and sent with the HTTP request to the Web site for which they were created. So, for example, if you created a user name to access your bank account this can be stored in a cookie and sent with the access request to the bank.

Which client side storage APIS are accessible by service workers?

Cache API The API is typically used in service workers to cache network responses for progressive web apps.


1 Answers

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.

like image 94
Josh Avatar answered Sep 28 '22 15:09

Josh