Mahdi Abdulhamid : Microsoft Office SharePoint 2007 and ASP.NET 2.0 AJAX 1.0

Software Development Technologies and Solutions
SharePoint | .NET | MCMS | MS SQL | Office

Let's share our experiences
Home
Search
Downloads
About me

Contact me

Microsoft Office SharePoint 2007 and ASP.NET 2.0 AJAX 1.0

Wednesday, May 09, 2007

Hello again, since the release of MOSS 2007, I had the intention for developing a SharePoint web part which supports ASP.NET AJAX, and yesterday I’ve started the mission, I’ve read some useful posts from Microsoft and interested guys which helped me much to achieve the job.
Software needed:

SharePoint Portal Server 2007 (installed with site collection created on port: 80)
Visual Studio 2005
WSS 3.0 Extensions for Visual Studio 2005
ASP.NET 2.0 AJAX 1.0

First you need to configure your SharePoint Portal to support AJAX, to do this, it is better to open new AJAX web site in Visual Studio to pick a copy from configuration sections in web.config, or you can copy from here, so let‘s start:

1- Add the following part under: <configSections>

2- Add the following part under: <pages >

3- Add the following part under : <compilation><assemblies>

4- Add the following part under: <httpHandlers>

5- Add the following part under: <httpModules>

6- At the end of web.config add the following part under: <configuration>

<system.web.extensions>
    <scripting>
      <webServices>
      
      
      
      
      </webServices>
      
    </scripting>
</system.web.extensions>
<system.webServer>
    <validation validateIntegratedModeConfiguration="false"/>
    <modules>
      <add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
    </modules>
    <handlers>
      <remove name="WebServiceHandlerFactory-Integrated" />
      <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode"
           type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
    </handlers>
</system.webServer>

7- Before closing web.config we should add the AJAX controls dll to SharePoint Safe Controls, so copy the following part under: <SafeControls>

8- It is time to include the AJAX script Manager to the master page, in my case I’ve included the script manager control in the default.master located in the following path:
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\GLOBAL
So, according to your portal template; locate the right master page file or you can open the master page from the SharePoint Designer under _catalogs folder.
After you locate the master page file open the file then put the following line inside the top of <form> tag

<asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>

As shown below:

9- Now it is time to write our code, open a new web part project in Visual studio 2005 then add reference of System.Web.Extensions to the project and write the following code to web part code file:

Note: There is a SharePoint Script included for changing the form action which may stop the form submission, so I included the FixFormAction method which will reset the form action again

using System;
using System.Runtime.InteropServices;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Serialization;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using Microsoft.SharePoint.WebPartPages;

namespace AjaxWebPart
{
    [Guid("733ee261-6e34-49cf-ae29-e8aeb4df4563")]
    public class AjaxWebPart : System.Web.UI.WebControls.WebParts.WebPart
    {
        public AjaxWebPart()
        {
            this.ExportMode = WebPartExportMode.All;
        }
        // ASP.NET Controls declaration
        private Label label;
        private Label label2;
        private Label label3;

private TextBox textBox1;
private TextBox textBox2;

        // ASP.NET AJAX Controls declaration
        protected UpdatePanel udatePanel;
        protected UpdateProgress updateProgress;

protected override void CreateChildControls()
{

base.CreateChildControls();

// Fix Form Action
this.FixFormAction();

udatePanel = new UpdatePanel();
updateProgress = new UpdateProgress();

udatePanel.ID = "_UpdatePanel";
updateProgress.ID = "_UpdateProgress";

//Create Update Progress Template
string templateHTML = "<div><img alt=\"Loading...\" src=\"/_layouts/images/loader.gif\"/>Loading...</div>";

updateProgress.ProgressTemplate = new ProgressTemplate(templateHTML);

            updateProgress.AssociatedUpdatePanelID = udatePanel.ClientID;

            udatePanel.UpdateMode = UpdatePanelUpdateMode.Conditional;

            this.Controls.Add(udatePanel);

            this.label = new Label();
            this.label2 = new Label();
            this.label3 = new Label();

            this.label.Text = "Enter 1st Number: ";
            this.label2.Text = "Enter 2nd Number: ";

            this.textBox1 = new TextBox();
            this.textBox1.ID = "TextBox1";

this.textBox2 = new TextBox();
this.textBox2.ID = "TextBox2";

           //Adding Controls
            udatePanel.ContentTemplateContainer.Controls.Add(this.label);
            udatePanel.ContentTemplateContainer.Controls.Add(this.textBox1);
            udatePanel.ContentTemplateContainer.Controls.Add(new LiteralControl("<br />"));

udatePanel.ContentTemplateContainer.Controls.Add(this.label2);
udatePanel.ContentTemplateContainer.Controls.Add(this.textBox2);

            udatePanel.ContentTemplateContainer.Controls.Add(new LiteralControl("<br /><br />"));

            Button button = new Button();
            button.Text = "Calculate";

button.Click += new EventHandler(HandleButtonClick);
udatePanel.ContentTemplateContainer.Controls.Add(button);

udatePanel.ContentTemplateContainer.Controls.Add(new LiteralControl("  "));

udatePanel.ContentTemplateContainer.Controls.Add(this.label3);

udatePanel.ContentTemplateContainer.Controls.Add(updateProgress);
}

        private void HandleButtonClick(object sender, EventArgs eventArgs)
        {
            //Just wait to see the progress loader working
            System.Threading.Thread.Sleep(1000);

this.label3.Text = Convert.ToString(int.Parse(textBox1.Text) + int.Parse(textBox2.Text));

}

        //Fixing Form Action
        private void FixFormAction ()
        {
            if (this.Page.Form != null)
            {
                string formOnSubmitAtt = this.Page.Form.Attributes["onsubmit"];
                if (formOnSubmitAtt == "return _spFormOnSubmitWrapper();")
                {
                    this.Page.Form.Attributes["onsubmit"] = "_spFormOnSubmitWrapper();";
                }
            }
            ScriptManager.RegisterStartupScript(this, typeof(AjaxWebPart), "UpdatePanelFixup", "_spOriginalFormAction = document.forms[0].action; _spSuppressFormOnSubmitWrapper=true;", true);
        }
    }

    //Class for Building progress tempales
    public class ProgressTemplate : ITemplate
    {
        private string template;

        public ProgressTemplate(string temp)
        {
            template = temp;
        }

        public void InstantiateIn(Control container)
        {
            LiteralControl ltr = new LiteralControl(this.template);
            container.Controls.Add(ltr);
        }
    }
}

Then build and deploy the web part, as you see it is a simple web part to calculate summation of two integers.

Download Source Code

Posted By Mahdi Abdulhamid At 6:30 PM • Comments (2) Trackbacks (32)

Trackbacks :
http://www.devexpert.net/blog/pt/blog/track.aspx?id=14

great info, but what about the blocked script?

Comment By Jack Sanders At 5/10/2007 7:21 AM

It is a workaround from SharePoint guys to ensure that URL containing 'double byte' characters is served.

Comment By Mahdi Abdulhamid At 5/10/2007 9:08 AM

Comments :

Name :

Email :

URL :
Remember Info?

Comments :

Allowed Tags : <A>, <B>, <I>, <BLOCKQUOTE>

Contact | Search | About

Disclaimer:
The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way. All posts and codes provided here with no warranties.