Workaround for using Web Parts with AJAX 1.0 UpdatePanel

Hi All,

Some of you will be pleased to know that I have produced a workaround to address the issue of WebPart Drag and Drop (and verb popup menus) not operating correctly inside of an update panel.

It seems that the functionality being shown off on channel 9 (using Ajax CTP) was only to tease us into thinking that this would be possible in Ajax 1.0 (the final release).

Here are the details of the work around:

AJAX 1.0 Compatible WebPartManager (Workaround)

1. The Problem

ASP.NET Web Parts Drag and Drop facility and Drop down verbs menu does not operate correctly inside of an Microsoft AJAX 1.0 UpdatePanel.

2. Why is doesn't work

The WebPartManager is responsible for registering an include and start up script. This script provides Web Parts and zones with various client side functionality including drag and drop and drop down verb menus.

When a control is placed inside of an Update Panel, the script is rendered and ran on the first render, but not on subsequent renders. Due to this, the client side functionality fails.

3. The Solution

The solution is simple. Inherit the WebPartManager, override the RenderClientScript Method and render the client scripts using the System.Web.UI.ScriptManager instead of the System.Web.UI.ClientScriptManager. The System.Web.UI.ScriptManager informs Ajax of the registered client scripts and ensures that they are rendered out and executed whenever an UpdatePanel is refreshed.

4. Using the AJAX 1.0 Compatible WebPartManager

i. Download the Solution (includes source code)

ii. Compile the project and add a reference to it in your web project.

iii. Add the following Tag Mapping to the specified section of your web.config:

<configuration>
	<system.web>
		<pages>
			<tagMapping>
				<add tagType="System.Web.UI.WebControls.WebParts.WebPartManager"
mappedTagType="Sample.Web.UI.WebParts.WebPartManager, Sample.Web.UI.WebParts"/>
			</tagMapping>
		</pages>
	</system.web>
</configuration>

iv. Use Web Parts as normal (There is no need to replace the System.Web.UI.WebControls.WebParts.WebPartManager with Sample.Web.UI.WebParts.WebPartManager as the above mapping will take care of this).

Enjoy! [:D]

David

Re: Workaround for using Web Parts with AJAX 1.0 UpdatePanel

Hi davior,

That sounds great. Have you tried this workaround for the WebPartManager in ASP.Net AJAX Futures?

Regards.

Re: Workaround for using Web Parts with AJAX 1.0 UpdatePanel

Hi spvlong,

I haven't tried it, but I am aware that the same problem exists with the Microsoft.Web.Preview.UI.Controls.WebParts.WebPartManager in Microsoft.Web.Preview.

I'm sure the fix would work using this control (just change the class being inherited and the tag mapping), although I'm not sure why you would want to do this (or why they even included this control in the Futures release considering it doesnt work!??).

Cheers

David

Re: Workaround for using Web Parts with AJAX 1.0 UpdatePanel

Thanks so much for figuring this one out. Since I have been put on the spot for our future "Webbish awareness" which includes portals and minimal postbacks I am sure this would have been an enormous woe for me very soon.

Thanks,

Re: Workaround for using Web Parts with AJAX 1.0 UpdatePanel

Hi David,

I use Microsoft.Web.Preview.UI.Controls.WebParts.WebPartManager for Drag and Drop support in FireFox so I would like to know if this workaround can apply to Microsoft.Web.Preview.UI.Controls.WebParts.WebPartManager.

Thanks,

Re: Workaround for using Web Parts with AJAX 1.0 UpdatePanel

Does the WebpartManager need to be in the same UpdatePanel as the WebpartZone for this to work? I want to have one WebpartManager on the page and serveral TabPanels each containing an UpdatePanel that contains WebPartZones in various layouts. Is it posssible to render more than one update panel at a time so that I am always rendering the WebpartManager's UpdatePanel?

Also this seem like a pretty easy fix - almost too good to be true - is there a reason MS dropped this funtionality from AJAX and the CTP?

Re: Workaround for using Web Parts with AJAX 1.0 UpdatePanel

spvlong

I use Microsoft.Web.Preview.UI.Controls.WebParts.WebPartManager for Drag and Drop support in FireFox so I would like to know if this workaround can apply to Microsoft.Web.Preview.UI.Controls.WebParts.WebPartManager.

Hi spvlong,

I have done some investigation on this component and have found that for this workaround to work you would probably need to also update the include script for it to operate correctly with Microsoft.Web.Preview.UI.Controls.WebParts.WebPartManager.

My guess is that the only differance between the normal WebPartManager and the one found in Microsoft.Web.Preview.UI.Controls.WebParts.WebPartManager is the include script. Based on this in order to get this workaround to work with the Microsoft.Web.Preview.UI.Controls.WebParts.WebPartManager. you would need to do the following:

In the WebPartManager in my project change the class being inherited from the standard WebPartManager to Microsoft.Web.Preview.UI.Controls.WebParts.WebPartManager.
Replace the embeded WebPartManager.js file in my project with the one emitted from the Microsoft.Web.Preview.UI.Controls.WebParts.WebPartManager (it is currently a copy of the one emmitted from the standard WebPartManager).
Change the tag mapping to map from the Microsoft.Web.Preview.UI.Controls.WebParts.WebPartManager to the workaround WebPartManager
In your web project use the Microsoft.Web.Preview.UI.Controls.WebParts.WebPartManager (and WebPartZones)

If this does not work my guess would be that the dynamically generated inline script being emitted from the futures WebPartManager is also differant to that of the standard WebPartManager. In this case this inline script would also need to be updated to match (I really don't think that this will be the case).

I will have a more detailed look into this if and when I get a chance.

Cheers

David

Re: Workaround for using Web Parts with AJAX 1.0 UpdatePanel

I tried this solution and it appears to work fairly well for firefox, yet in IE I can only drag and drop a webpart once into another zone, then i cannot drag it into another zone anymore?

Would you know any reason why this would happen?

Re: Workaround for using Web Parts with AJAX 1.0 UpdatePanel

http://www.magicajax.net/

Using the magic ajax update panel requires no work around and works great for using ajax with your webpart page.

Re: Workaround for using Web Parts with AJAX 1.0 UpdatePanel

Are you using the solution I linked to in the first post in this tread?

Have you made any changes to this?

If you are using the solution linked to in the first post, then i would imagine that it should work in IE and not in Firefox.

Have you followed the instructions in the readme of the project? Tag mappings etc.?

My guess is, that the webpart manager you are using is the standard one and not the modified one provided...

Cheers

David

Re: Workaround for using Web Parts with AJAX 1.0 UpdatePanel

matt_cyr

I tried this solution and it appears to work fairly well for firefox, yet in IE I can only drag and drop a webpart once into another zone, then i cannot drag it into another zone anymore?

Would you know any reason why this would happen?

Hi Matt,

Ignore my previous response. I am experiencing the same problem as you with the Futures WebPartManager. The workaround works in Firefox but fails after the first async postback in IE. This proves that the inline dynamic script being emitted from the Futures WebPartManager is differant to that of the standard webpartmanager :(...

The only solution then is to reverse engeneer this script this Manager is producing and update the Script Property on the WebPartManager also.

Re: Workaround for using Web Parts with AJAX 1.0 UpdatePanel

Any clues as to how I could reverse engineer the WebPartManager? I would really love to have this functionality.

Re: Workaround for using Web Parts with AJAX 1.0 UpdatePanel

davior

Hi All,

Some of you will be pleased to know that I have produced a workaround to address the issue of WebPart Drag and Drop (and verb popup menus) not operating correctly inside of an update panel.

Enjoy! [:D]

David

Hi David,
I have followed your instructions and my page works properly.
Unfortunately your solution does not work if I use my page with a masterpage.
It's a pity theat it does not work because your solution could be much profit for me in this moment. [:'(]

Re: Workaround for using Web Parts with AJAX 1.0 UpdatePanel

Hi All,

I have made some changes to the work around so it uses the js file resource embeded in the System.Web assembly (instead of a copy of this file).

I have also corrected some slight issues in the inline javascript (that may have caused script bugs in some circumstances). You can download the updated solution from the same place as before:

Download the Updated Solution

Matt: for information on how to reverse engineer this component checkout, Lutz Roeder's .NET Reflector. It's an awsome Disassembler program ;).

giuseppevitali: The changes I recently made to the project might just fix the issue you are having with Master pages (this was probably caused by the use of an incorrect client side id in the javascript being emitted). This should have been corrected by these changes.

Re: Workaround for using Web Parts with AJAX 1.0 UpdatePanel

Dear Davior

thanks for the effort, i did everything you mentioned in your first post, but still the problem stayed with me i don't know what to do, i copied your solution,build it, added the reference(Sample.Web.UI.WebParts.dll) to it into my project and added the maping in the web.config but still i can't drag and drop web parts, i even made a small project and tried on it the same problem goes, and i don't know what is wrong.

i know this is too much to ask, but can you place a sample downloadable project of how this is done, for further clarification, i would be very greatful, thanks in advance.

Re: Workaround for using Web Parts with AJAX 1.0 UpdatePanel

Hi,

Thanks for this. Have you had a chance to have a look at the futures CTP with cross browser support? I quickly had a look but didn't manage to fix it. If you could have a look at it it would benefit the community tremendously!

Again, many thanks!

Manso

davior

Hi All,

I have made some changes to the work around so it uses the js file resource embeded in the System.Web assembly (instead of a copy of this file).

I have also corrected some slight issues in the inline javascript (that may have caused script bugs in some circumstances). You can download the updated solution from the same place as before:

...

Re: Workaround for using Web Parts with AJAX 1.0 UpdatePanel

Hi Davior:

Your workaround work profectly on IE. But when i test it on FF it is not support well. Could take a look for this issue?

Re: Workaround for using Web Parts with AJAX 1.0 UpdatePanel

FYI, we're planning to support WebParts inside an UpdatePanel in Orcas.

-Mike

Re: Workaround for using Web Parts with AJAX 1.0 UpdatePanel

Alright ... So, I haven't been able to find a solution that works for both, but there is a solution that works on FF but not on IE.

Instead of inheriting from System.Web.UI.WebControls.WebParts.WebPartManager and using the WebParts.js resource from it, use the Microsoft.Web.Preview.UI.Controls.WebParts.WebPartManager instead.

So:

public class WebPartManager : Microsoft.Web.Preview.UI.Controls.WebParts.WebPartManager {


 ...


protected override void RegisterClientScript() {


System.Web.UI.ScriptManager.RegisterClientScriptResource(this, typeof(Microsoft.Web.Preview.UI.Controls.WebParts.WebPartManager), "WebParts.js");


...


}


}

One option might be to create two different controls that works for each and determine at runtime which browser is being used and add the correct WebPartManager. I'm sure there's a much more efficient way to get it to work for both in one control, but I'm not going to put a lot of time into it, so there you have it ...

Re: Workaround for using Web Parts with AJAX 1.0 UpdatePanel

Hi,

Great post!

I have one question how did you reach to the conclusion that WebPartManager is not loading the client scripts? What tools did you use to determine that?