Ajax Toolkit Client Rendering

Question

Hi all,

I'm working on a long, dynamic form (100 or so fields) and am using toolkit items such as CalendarBehaviors, HovermenuBehavior, etc for each field.

I've never worked with that many toolkit items at once, and am seeing a big performance hit in rendering. Every instance of a toolkit control is being sent to the client in its' own <SCRIPT></SCRIPT> tags. In other words, 200 instances of he following:

<SCRIPT type="text/javascript"> 
Sys.Application.add_init(function() {    $create(AjaxControlToolkit.HoverMenuBehavior, {"OffsetX":20,"PopDelay":50,"dynamicServicePath":"/default.aspx","id":"hmePopupHelpPolicyNumber","popupElement":$get("lblHelpPolicyNumber")}, null, null, $get("imgHelpPolicyNumber"));});
</SCRIPT>
<SCRIPT type="text/javascript"> 
...snip
</SCRIPT>

Is there any way to control this and have all the controls created in a single script block?

Also, does anybody know of a good, detailed article that would describe how IE 7 parses and renders html and javascript?

And I know most of you will recommend JQuery instead. Unfortunately that is not an option in this project.

Thanks in advance and happy coding.

Answer 1

I'd say rethink your design of the page. That many items on your page can't make for a good user experience. Instead of coding a really far out solution, reconsider your design and it will probably benefit your user in the end as well.

Edit: Your question is at the heart of what many consider the major drawback to using WebForms. There is little control on how the server renders the controls and emits their HTML. Without a more "advanced" approach which you are trying to avoid, I'd be hard pressed to suggest anything other than breaking the form up into smaller pieces. If it is a data entry form, it may be faster for the user to type in the date fields as opposed to populating the form via mouse clicks.

Answer 2

Going along the lines of @Achilles' answer, I would break up the form into multiple pages. You could also try one page with multiple tabs.

Update: Something else that might help you is the ToolkitScriptManager. It combines all of the external toolkit scripts into one single external script. I think it also combines all of the inline toolkit scripts into one block.