Most of the web applications nowadays prefer to be an AJAX enabled application. Ajax enabled applications is basically eliminates those annoying flickers occurred when a page is refreshed. This articles shows on how we are going make our webparts to be an ajax enabled one.

Introduction:

Most of the web applications nowadays prefer to be an AJAX enabled application. Ajax enabled applications is basically eliminates those annoying flickers occurred when a page is refreshed.

This articles shows on how we are going make our webparts to be an ajax enabled one.

 

Below are the steps in creating an Ajax enabled application.

 

1. Open Visual Studio 2005 and Create new Website
2. Select ASP.NET AJAX-Enabled Web Site then press OK (See Figure A)

 

 

Figure A

 

3. As what you have notice, the ScriptManager Control is automatically added to your page. ScriptManager handles the Ajax functionality like the WebPartManager.
4. Drag Updatepanel control below the ScriptManager (See Figure B)

 

       Figure B

 

5. Drag a WebPartManger inside the Updatepanel control
6. Drag two WebPartZone below the WebPartManager (See Figure C)

 

Figure C

 

7. Drag a TextBox control in the WebpartZone
8. Compile the Appication and Run the Website
9. Drag a webpart in different zones and observe what happens

 

As what you have noticed, you can drag and drop a webpart only once and if you would try to drag it again it will just highlight the header of the webpart that you are trying to drag. Basically by default, webparts do not support updatepanel control but they provide a workaround on how to move webparts and supported in updatepanel control.

 

The Problem

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

           

Why it 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.

 

The Workaround

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. To achieve this, follow the steps below:

 

1. Right click on the Project and Add a Reference (See Figure D)

 

Figure D

 

2. Click the Add Reference. You should be able to see the add reference window.
3. Click on the Browse Tab (See Figure E)

 

 

Figure E

 

4. Browse the Sample.Web.UI.WebParts.dll file. You can download it at said Url below:

AjaxEnabledWebpart.zip– I attached the dll together with this file

 

5. 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> 

6. Compile the Application and Run again.
7. The result can be seen in the screen shot below:

 

      Figure F

As what you have notice now, you can drag and drop webparts in different zones without flicker or without refreshes the entire page.

 

[Download Sample]

 

About the Author:

 

Vincent Maverick S. Durano
Software Development Engineer (Web)

R&D Engineering Department - (ACS) Advance Checkout Solution

NCR Cebu Development Center, Inc.

Cebu City Philippines 6000

email:vmsdurano@gmail.com