AJAX Implementation in Share Point

Satyam Computer Services Ltd.
Portfolio Management Information

Ajax Implementation
Version 1.0
Portfolio Management Information Version: 1.0
Ajax Implementation Date: 03-Dec-2007
DD05
Revision History
Date Version Description Author
03-Dec-2007 1.0a First Draft Satyam
Confidential Satyam Computer Services Ltd, 2008 Page 2 of 12

DD05
Table of Contents
AJAX Implementation in MOSS 2007 SP1 4
Modifications to be done in the MOSS 2007 Server SP1 4
1. Automated Installation (Solution Deployment) 8
2. Manual Installation 9
3. Optional: Add an assembly reference in the web.config 10

DD05
Purpose
According to Plumtree to SharePoint migration for PMI we needs to cover all possible functionality plus
interactivity at user interface side, and currently PT PMI has Ajax implementation to control some of UI
and going forward in SharePoint we are trying to achieve same interactivity and use experience on UI
side, we are going to use Ajax implementation in PMI SharePoint site
AJAX Implementation in MOSS 2007 SP1

Although lot of AJAX applications are available over internet, we preferred to use the Microsoft’s ASP.NET
2.0 AJAX extensions 1.0 which can be downloaded from Microsoft site
http://www.microsoft.com/downloads/details.aspx?FamilyID=ca9d90fa-e8c9-42e3-aa19-
08e2c027f5d6&displaylang=en
Detailed information about AJAX Extensions 1.0 can be found http://asp.net/ajax/Default.aspx.
Modifications to be done in the MOSS 2007 Server SP1

1. We require modifications in the web.config of the SharePoint site say if your application falls
under http://<localhost>:1111/ modify the web.config of this site which will usually reside under
C:\inetpub\wwwroot\wss\VirtualDirectories\PortalNumber in our case it is 1111.
Add the following part under: <configSections>

<sectionGroup name="system.web.extensions"
type="System.Web.Configuration.SystemWebExtensionsSectionGroup,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35">
<sectionGroup name="scripting"
type="System.Web.Configuration.ScriptingSectionGroup,
<section name="scriptResourceHandler"
type="System.Web.Configuration.ScriptingScriptResourceHandlerSection,
PublicKeyToken=31bf3856ad364e35" requirePermission="false"
allowDefinition="MachineToApplication"/>
<sectionGroup name="webServices"
type="System.Web.Configuration.ScriptingWebServicesSectionGroup,
<section name="jsonSerialization"
type="System.Web.Configuration.ScriptingJsonSerializationSection,
allowDefinition="Everywhere" />
<section name="profileService"
type="System.Web.Configuration.ScriptingProfileServiceSection,

DD05

allowDefinition="MachineToApplication" />
<section name="authenticationService"
type="System.Web.Configuration.ScriptingAuthenticationServiceSection,
allowDefinition="MachineToApplication" />
</sectionGroup>
</sectionGroup>
</sectionGroup>
2. Add the following part under: <pages>

<controls>
<add tagPrefix="asp" namespace="System.Web.UI"
assembly="System.Web.Extensions, Version=1.0.61025.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
</controls>
3. Add the following part under : <compilation><assemblies>

<add assembly="System.Web.Extensions, Version=1.0.61025.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
4. Add the following part under: <httpHandlers>

<add verb="*" path="*.asmx" validate="false"
type="System.Web.Script.Services.ScriptHandlerFactory,
PublicKeyToken=31bf3856ad364e35"/>
<add verb="*" path="*_AppService.axd" validate="false"

<add verb="GET,HEAD" path="ScriptResource.axd"

type="System.Web.Handlers.ScriptResourceHandler,
PublicKeyToken=31bf3856ad364e35" validate="false"/>

DD05
5. Add the following part under: <httpModules>

<add name="ScriptModule" type="System.Web.Handlers.ScriptModule,
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,
</modules>
<handlers>
<remove name="WebServiceHandlerFactory-Integrated" />
<add name="ScriptHandlerFactory" verb="*" path="*.asmx"
preCondition="integratedMode"

DD05
<add name="ScriptHandlerFactoryAppServices"
verb="*" path="*_AppService.axd" preCondition="integratedMode"
<add name="ScriptResource" preCondition="integratedMode"

verb="GET,HEAD" path="ScriptResource.axd"
type="System.Web.Handlers.ScriptResourceHandler,
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>
<SafeControl Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TypeName="*"
Safe="True" />
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:
<form runat="server" onsubmit="return _spFormOnSubmitWrapper();">
<WebPartPages:SPWebPartManager id="m" runat="Server" />
<asp:ScriptManager runat="server" ID="ScriptManager1">
</asp:ScriptManager>

DD05
<TABLE class="ms-main" CELLPADDING=0 CELLSPACING=0 BORDER=0
WIDTH="100%" HEIGHT="100%">
Usage of SmartPart
The SmartPart has been created to improve the productivity of SharePoint web part developers by
leveraging the ASP.NET techniques and skills they normally master. As mentioned in the introduction, it
builds on Patrick Tisseghem’s article last year introducing a technique of leveraging the use of ASP.NET
user controls making up the body of web parts. Jan Tielens, together with Fons Sonnemans, and with the
help of many people within the SharePoint community (including Maxim Karpov and others) have created
the SmartPart.
The SmartPart allows developers to create ASP.NET Web user controls and use these controls in
SharePoint development. ASP.NET web user controls can be created by using the familiar designers
available within Visual Studio .NET. So you can actually drag-and-drop controls, double-click to add event
handlers. In summary, all the things you would expect in your development cycle. Developers using the
SmartPart can again focus on their business code and don’t need to be experts in SharePoint. They can
leverage their ASP.NET skills and in many cases, using the SmartPart, reuse existing user controls within
the SharePoint sites very quickly
SmartPart for SharePoint - ASP.NET AJAX Support
you can create a Web User Control (ASCX) with the Visual Studio Designer, that uses the ASP.NET AJAX
extensions and run that user control as a SharePoint web part. At this point in time, it's still a beta version,
you can get it from the GotDotNet workspace (releases section). How do you get started? First of all you
need to download and install the ASP.NET AJAX Extensions. Next you need to extend your SharePoint
site with these extensions(Please refer “Settings in Shatrepoint server for Ajax’ topic in the “Ajax.doc”).
Now you can install the SmartPart .
Return of SmartPart Installation Guide

Welcome to the Installation Guide for the Return of the SmartPart. To install the Return of the SmartPart
you can choose between two installation options: the automated (solution deployment) or the manual
way. For production servers it’s recommended to go for the automated way. After the installation there is
one optional step which is necessary when you are using advanced user controls, such as connectable
user controls.
We can download the “Returnofthesmartpart” from the below URLs.

http://www.codeplex.com/smartpart/Release/ProjectReleases.aspx?ReleaseId=2007
http://www.smartpart.info/default.aspx
1.Automated Installation (Solution Deployment)

The automated installation will make use of the Solutions framework of SharePoint 2007 to deploy the
Return of the SmartPart. Step number 3 and 4 can also be done from the SharePoint 3.0 Central
Administration site. For more information about the Solutions Framework see
http://msdn2.microsoft.com/en-us/library/aa543214.aspx.

DD05
1. Extract the contents of the ReturnOfSmartPart.zip and copy the file ReturnOfSmartPart.wsp to
a folder on your server, for example c:\smartpartinstall
2. Add the Solution (wsp) to your SharePoint Server Farm: execute the following statement in a
command prompt. The location of the STSADM tool is C:\Program Files\Common
Files\Microsoft Shared\web server extensions\12\BIN, you should type everything on one
single line.
stsadm.exe -o addSolution -filename

c:\smartpartinstall\ReturnOfSmartPartv1_2.wsp
3. Deploy the solution to your SharePoint server, execute following statement in a command prompt:
stsadm.exe -o deploySolution -name ReturnOfSmartPartv1_2.wsp

-allcontenturls -local -allowGacDeployment
4. Activate the feature on your SharePoint Site Collection: execute the following statement in a
command prompt:
stsadm.exe -o activatefeature -n ReturnOfSmartPart -url http://server
2.Manual Installation
The manual installation will deploy the Return of the SmartPart to a single SharePoint server by copying
the files manually to their destinations.
1. Extract the contents of the ReturnOfSmartPart.zip to a folder on your server, for example
c:\smartpartinstall
2. Deploy the ReturnOfSmart.dll to the Global Assembly Cache (GAC): open a second Explorer
window and browse to C:\WINDOWS\assembly, drag and drop the ReturnOfSmartPart.dll to
this second window.
Alternatively you can make use of the following statement which you can enter in a command
prompt:
gacutil /i c:\smartpartinstall\ReturnOfSmartPart.dll
3. Change the web.config of your SharePoint site, so the Return of the SmartPart is marked as a
safe control. Add the following line to the SafeControls section:
<SafeControl Assembly="ReturnOfSmartPart, Version=1.2.0.0, Culture=neutral,
PublicKeyToken=9f4da00116c38ec5" Namespace="SmartPart" TypeName="SmartPart"
Safe="True" />
4. Upload the SmartPart web part to the Web Parts gallery of your SharePoint site: open your top
level SharePoint site, click Site Actions  Site Settings. In the Galleries section, click Web
Parts. Click on the Upload button in the toolbar, select the file
c:\smartpartinstall\SmartPartv3.dwp to upload, click OK. Confirm the settings by clicking OK.

DD05
3.Optional: Add an assembly reference in the web.config

If you want to run User Controls that contain a reference to the ReturnOfSmartPart.dll (for example
connectable user controls), you will need to add an assembly reference in the web.config of your
SharePoint site. Open the web.config and add following element in the assemblies node under the
compilation node:
<add assembly="ReturnOfSmartPart, Version=1.2.0.0, Culture=neutral,

PublicKeyToken=9f4da00116c38ec5" />
The compilation node should look like this:
<compilation batch="false" debug="false">
<assemblies>
<add assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" />
<add assembly="ReturnOfSmartPart, Version=1.2.0.0, Culture=neutral,
PublicKeyToken=9f4da00116c38ec5" />
</assemblies>
...
</compilation>
You can see the vedio for deploying smartpart from below.
Watch the screencast with Windows Media Player
Starting with ReturnOfSmartPart

1. Create new ASP .Net Ajax Extesnions website.
2. Inthat solution create new usercontrols.
3. Use ASP.Net Ajax Extensions Tool kit.
4. Create new folder with name “Usercontrols” here
C:\Inetpub\wwwroot\wss\VirtualDirectories\ourPort
5. Copy the usercontrols (.ascx & .ascx.cs) pages into the “UserControls” folder
C:\Inetpub\wwwroot\wss\VirtualDirectories\ourPort\ UserControls
6. Go to the site and add “smartpart” or “smartpart with ajax” webpart from the Miscellaneous
section.
7. Click on “Open tool pane” link and select the required usercontrol.
8. Give the required name for that webpart.
9. Click “Ok”, then we can see the webpart with the functionality
You can see the video for demos from below.

Just watch the demos .
WebPart Communication through “ReturnOfSmartPart” with ASP.Net Ajax Extensions
Connectable web parts are web parts that can exchange data. Think for example about a web part which
displays a list of invoices, and another one that displays a list of invoice lines. If you select an invoice in

DD05
the first one, the second one can display the lines of the selected invoice. So with connectable web parts
you can create those typical parent/child and parent/details relationships. You can create connectable
web parts in SharePoint 2003 and in ASP.NET 2.0/SharePoint 2007, so it's not a new functionality.
So why are the connections in the new version of the SmartPart (Return of SmartPart v1.2 BETA) so
special? Well if you combine web part connections with a little bit of AJAX-magic you have web parts that
can exchange data without postbacks! Think about selecting the invoice and displaying the corresponding
invoice lines in another web part, all without postbacks. Actually you could do that trick without this new
version, but I've added some helper and wrapper classes to make your life as a web part developer a little
bit easier!
Example:
Let's start with a really basic example: the DemoProvider and the DemoConsumer user controls. The first
one has an UpdatePanel (the ASP.NET AJAX control handling the partial-page rendering), a TextBox and
a Button. The second one just has an UpdatePanel and a TextBox. The scenario should be like this: the
user enters some text in the first text box, clicks the button and the text is transferred to the second text
box, all without postbacks.
DemoProvider.ascx.cs
public partial class DemoProvider : System.Web.UI.UserControl,

SmartPart.IConnectionProviderControl
{
protected void Page_Load(object sender, EventArgs e)
{ }
public string ProviderMenuLabel

{
get { return "Send test data to" }
}
public object GetProviderData()

{
return new SmartPart.AJAXConnectionData(
TextBox1.Text, Button1, "Click");
}
}
The code above is the code for the DemoProvider user control, notice that the class implements the
IConnectionProviderControl interface of the SmartPart which is also used for normal connections. The
special thing happens on the GetProviderData method; a new instance of the AJAXConnectioNData class
is created. This object contains first of all the value that should be send to the consumer (TextBox1.Text).
The second parameter is the control that will cause the UpdatePanel to refresh, the third parameter is the
name of the control's event which will cause the refresh. (This constructor can only have one control as a
trigger control, but the class can hold more than one.) The ProviderMenuLabel property returns the value

DD05
which will be displayed in the web UI of SharePoint when the connection is made. That's it! Now let's take
a look at the code for the DemoConsumer user control:
DemoConsumer.ascx.cs
public partial class DemoConsumer : System.Web.UI.UserControl,

SmartPart.IConnectionConsumerControl
{
protected void Page_Load(object sender, EventArgs e)
{ }
public string ConsumerMenuLabel

{
get { return "Receives test data from" }
}
public void SetConsumerData(object data)

{
SmartPart.AJAXConnectionData ajaxData = data as
SmartPart.AJAXConnectionData;
if (ajaxData != null)
{
ajaxData.RegisterTriggerControls(UpdatePanel1);
if (ajaxData.Data != null)
TextBox1.Text = ajaxData.Data.ToString();
}
}
}
The class implements the normal IConnectionConsumer control of the SmartPart and once again the
special thing happens in the SetConsumerDate method. This method receives the instance of the
AJAXConnectionData class which was constructed by the provider. First the code checks if the data
received is an AJAXConnectionData instance, if so the RegisterTriggerControls method is called with the
UpdatePanel to use as a parameter. This method will add every control of the AJAXConnectionData
instance as a trigger control for the UpdatePanel, so the two UpdatePanels of the two user controls can
trigger eachother. You could do this manually as well, but I provided this functionality since it will be the
same for in like 99% of all the cases. Finally the Data property is used to fill the TextBox's Text property.
Done

AJAX Implementation in Share Point

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

AJAX Implementation in Share Point

Transféré par

Droits d'auteur :

Formats disponibles

Satyam Computer Services Ltd.

Portfolio Management Information

Confidential Satyam Computer Services Ltd, 2008 Page 2 of 12

Modifications to be done in the MOSS 2007 Server SP1 4

1. Automated Installation (Solution Deployment) 8

3. Optional: Add an assembly reference in the web.config 10

Confidential Satyam Computer Services Ltd, 2008 Page 3 of 12

AJAX Implementation in MOSS 2007 SP1

Modifications to be done in the MOSS 2007 Server SP1

Add the following part under: <configSections>

Confidential Satyam Computer Services Ltd, 2008 Page 4 of 12

System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,

2. Add the following part under: <pages>

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

4. Add the following part under: <httpHandlers>

<add verb="*" path="*_AppService.axd" validate="false"

<add verb="GET,HEAD" path="ScriptResource.axd"

Confidential Satyam Computer Services Ltd, 2008 Page 5 of 12

5. Add the following part under: <httpModules>

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

Confidential Satyam Computer Services Ltd, 2008 Page 6 of 12

<add name="ScriptResource" preCondition="integratedMode"

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

<form runat="server" onsubmit="return _spFormOnSubmitWrapper();">

<WebPartPages:SPWebPartManager id="m" runat="Server" />

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

Confidential Satyam Computer Services Ltd, 2008 Page 7 of 12

<TABLE class="ms-main" CELLPADDING=0 CELLSPACING=0 BORDER=0

Return of SmartPart Installation Guide

We can download the “Returnofthesmartpart” from the below URLs.

1.Automated Installation (Solution Deployment)

Confidential Satyam Computer Services Ltd, 2008 Page 8 of 12

stsadm.exe -o addSolution -filename

stsadm.exe -o deploySolution -name ReturnOfSmartPartv1_2.wsp

stsadm.exe -o activatefeature -n ReturnOfSmartPart -url http://server

Confidential Satyam Computer Services Ltd, 2008 Page 9 of 12

3.Optional: Add an assembly reference in the web.config

<add assembly="ReturnOfSmartPart, Version=1.2.0.0, Culture=neutral,

Starting with ReturnOfSmartPart

2. Inthat solution create new usercontrols.

3. Use ASP.Net Ajax Extensions Tool kit.

4. Create new folder with name “Usercontrols” here

8. Give the required name for that webpart.

You can see the video for demos from below.

WebPart Communication through “ReturnOfSmartPart” with ASP.Net Ajax Extensions

Confidential Satyam Computer Services Ltd, 2008 Page 10 of 12

public partial class DemoProvider : System.Web.UI.UserControl,

public string ProviderMenuLabel

public object GetProviderData()

Confidential Satyam Computer Services Ltd, 2008 Page 11 of 12

public partial class DemoConsumer : System.Web.UI.UserControl,

public string ConsumerMenuLabel

public void SetConsumerData(object data)

Confidential Satyam Computer Services Ltd, 2008 Page 12 of 12

Vous aimerez peut-être aussi

<add verb="" path="_AppService.axd" validate="false"