If you have multiple instances of the PanelBar control on your view, you can reduce the size of the DHTML code rendered by moving all the PanelBar related code to external *.js files.

To accomplish this, you can the remove PanelBar control from your view, and place them into secondary views that uses the following:


This causes the PanelBar CSS Definitions and HTML Structure to render in a JavaScript compatible manner. Several MVC Response properties are changed in these secondary views to set the file type and caching options.

Then, add the following code to your main view to include a static version of the PanelBar JavaScript library:


This library is included with this sample, and is cacheable by web browsers so it is only retrieved once when the initial view is loaded.

Finally, add the following code to your main view where you want a PanelBar control to appear:


If you use this approach, it is important to update the PanelBar JavaScript library whenever you deploy a new version or build of the PanelBar control.