views:

346

answers:

1

Hi,

I am trying to build a page which consists of different user controls which is divided in 3 columns.

I have created a custom class for the page and widgets where the user controls will be loaded in. The custom class needs to be stored in an XML file, and using jQuery sortable for drag-and-drop functionality.

At this point, my question is what is the best implementation for loading and saving the states of the page and widgets inside the page? I was thinking about using JSON and WebMethod for that, but I am still missing out the architecture on how I should build the page.

Help me please, since I am such a newbie in ASP.NET development and jQuery... Thanks in advance!

A: 

Is this for a class? Have you seen the site here: http://dropthings.omaralzabir.com/ or pageflakes.com ? They were written on the same code-base initially.

I took ideas from his work to write my own dashboard for an internal project, that matches what you're asking above. Three columns (but in my case you can change the number and size of the columns according to a predefined list) with draggable widgets, and using jQuery sortable and draggable (you can drag one widget to the page repeatedly).

Ok, so now that I've given you at least one sample project to reference, let me ask for a few more details. How do you build the widgets to get them on the page? Are you building DOM elements in javascript or on the server? That's mostly how I'm tracking my state; a handful of custom attributes on a master div that those custom attributes are part of my JSON to my webservice and the individual parts are .ascx and those attributes tell the ascx how to end up.

IE: I have a RSS reader widget that passes the rss feed I'm reading from. I have a twitter widget that follows one or more users or terms (using the search api) and those terms/users are passed in to the twitter widget. I have a gridview widget that gets the particular sproc from the custom data passed to it. I have a chart that gets the width and height and the sproc from the custom data passed in.

All of the custom data I pass is tied to those attributes on the div wrapper.

drachenstern
I got it now, thanks!i figured it out already, and my solution is actually to pass the JSON object from the server and modify the DOM elements on the client side. Whenever there is a change on the DOM, the JSON object will be sent to the server so the XML file which contains the position of each element would be updated as well.So far it works! And thanks alot for helping me out...
5tarzi3
Yeah, that's what I did too, where I passed the positions of all the elements every time I updated one, so I know that my data stays in sync all the time. Cheers on getting it all sorted out. Be interested in chatting off stackoverflow on how you structured things, but hesitant to post a fair dinkum of internal code to the public. If you're interested, the username above is my gmail account as well.
drachenstern