1. Open Visual Studio 2005 and Create new Website
2. Select ASP.NET AJAX-Enabled Web Site then press OK (See Figure A)
2. Select ASP.NET AJAX-Enabled Web Site then press OK (See Figure A)
Figure A
3. As what you have noticed, the ScriptManager Control is automatically added to your page. ScriptManager handles the Ajax functionality in the ASP.NET page.
4. Drag Updatepanel control below the ScriptManager (See Figure B)
4. Drag Updatepanel control below the ScriptManager (See Figure B)
Figure B.
5. From the Visual Studio Toolbox ,drag a WebPartManger inside the Updatepanel control
6. Drag two WebPartZone below the WebPartManager (See Figure C)
6. Drag two WebPartZone below the WebPartManager (See Figure C)
Figure C.
7. Drag and placed 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 drag and drop functionality does not supported in UpdatPanel control but they (ASP.NET team) provided a workaround on how to move webparts within UpdatPanel control.
Note: This workaround provided will ONLY work for IE browser.You need to use Visual studio 2008 / VWD 2008 with latest version of the Microsoft ASPNET Futures (AJAX Control Toolkit 3.5) in order for you to make the drag and drop feature work for all major browsers. See this link below: http://geekswithblogs.net/dotNETvinz/archive/2008/09/12/ajax-enabled-webparts-and-firefox-drag-and-drop.aspx
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 drag and drop functionality does not supported in UpdatPanel control but they (ASP.NET team) provided a workaround on how to move webparts within UpdatPanel control.
Note: This workaround provided will ONLY work for IE browser.You need to use Visual studio 2008 / VWD 2008 with latest version of the Microsoft ASPNET Futures (AJAX Control Toolkit 3.5) in order for you to make the drag and drop feature work for all major browsers. See this link below: http://geekswithblogs.net/dotNETvinz/archive/2008/09/12/ajax-enabled-webparts-and-firefox-drag-and-drop.aspx
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)
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)
3. Click on the Browse Tab (See Figure E)
Figure E.
4. Browse the Sample.Web.UI.WebParts.dll file. I have attached a zipped file together with this article for the dll.
5. Add the following Tag Mapping to the specified section of your web.config
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:
As what you have notice now, you can drag and drop webparts in different WebPartZones without refreshing the page.
7. The result can be seen in the screen shot below:
As what you have notice now, you can drag and drop webparts in different WebPartZones without refreshing the page.
No comments:
Post a Comment