How to build widget page using jquery, json object, and xml file in ASP.NET

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 be开发者_C百科st 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!

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.