AJAX best practice for adding html components to a page

I'm new to AJAX/javascript, an开发者_如何转开发d I'm not sure what the best approach is for what I'm trying to do.

I'm calling page methods (WebMethods) on my Page using Javascript. The data I'm retrieving is a list of Divs basically.

I don't know how many will be returned, but they need to be inserted into the proper place on the page depending on their content.

I see a couple ways of doing this:

1. Create a list of HtmlGenericControls and pass them back.
2. Create a list of Strings, where each String is the entire Div code I want to drop onto the page. (This feels wrong for some reason)
3. Create simple container objects that have the necessary data in them. Pass those to the page and use them to create the Divs within javascript.

I think any of these could work, but I'd like to follow standard practice. Which would you choose?

Actually, IMHO best pratice would be to return the data from the service, rather than HTML, and build the UI on the client. Typically this is because the same data may be used in different places. Now, PageMethods only return data for that page, so server-side HTML can be OK if not needing reuse, but personally I use JQuery to build the UI on the client and only pass the data; this resorts to less data being transferred over the wire, which increases the speed of the app, and pushes off page rendering to the client's browser.

HTH.

I recommend returning the data as a JSON object. Make arrays in the JSON object for each type of control, then you can cycle through them with for ( var q in json_object['div_type_q'] ) and dynamically add them to the page.

Example json object:

json_object = {
 div_type_1: [ 0: "Content", 1: "More content", 2: "Even more content" ],
 div_type_2: [ 0: "This is navigation content" ]
}

You can pass something like that as a string and use var object = eval( '(' + returned string + ')' )

Good luck

I´m doing this too since some time. I can say it is not easy to do this. But now I found a good solution, and let me say you, the best still is using update panels. Why? Because, if you are using for example msajax extenders, they will be initialized properly when using updatepanel, and updatepanel even transfers new script files, if there are no.

Ok, I have 5 control on my page. each of them is wrapped with an conditional update panel. The user can change settings on every single item, and if he saves, only the on one control gets wonderfully synchronized.

Now, if a want to add a new one, i have another updatepanel, for the whole collection

like

   <updatepanel>
      <updatepanel-inner>
          <control>
      </updatepanel-inner>
      <updatepanel-inner>
          <control>
      </updatepanel-inner>
      <updatepanel-inner>
          <control>
      </updatepanel-inner>
      <updatepanel-inner>
          <control>
      </updatepanel-inner>
   </updatepanel>

Now if the user adds another updatepanel, (you have to manage this on client side, save them using webmethods some where and use this settings to generate the updatepanels) you update the whole collection.

Let me say to you, that with updatepanels you save a lot of time!