Thursday, March 13, 2008

AJAX in SharePoint 2007

Scenario:
I like to use AJAX Tab control in SharePoint as a web part.
For this I created an ASCX user control that contains the AJAX tab control and test the user control in ASP.Net's ASPX page. After successfully running the AJAX tab control in ASPX page, I use the tab control in Web part (regarding how to use ASCX in Web part, please refer earlier post).


Note: While testing the tab control in ASPX page, I kept the Script Manager element in the ASCX page. Later on while deploying the tab control in SharePoint, I moved the Script Manager element to Master page (mentioned in detail in current article at a later stage).


Steps:



1) Install ASPAJAXExtSetup.msi

C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025



2) Made following changes to site web.config :

Note: In this link it is mentioned in detail ---
http://www.asp.net/ajax/documentation/live/ConfiguringASPNETAJAX.aspx



a) <sectionGroup>



<configuration>
<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,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35">
<section name="scriptResourceHandler"
type="
System.Web.Configuration.ScriptingScriptResourceHandlerSection,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"
requirePermission="false"
allowDefinition="MachineToApplication" />
<sectionGroup name="webServices"
type="System.Web.Configuration.ScriptingWebServicesSectionGroup,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35">
<section name="jsonSerialization"
type="System.Web.Configuration.ScriptingJsonSerializationSection,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"
requirePermission="false"
allowDefinition="Everywhere" />
<section name="profileService"
type="System.Web.Configuration.ScriptingProfileServiceSection,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"
requirePermission="false"
allowDefinition="MachineToApplication" />
<section name="authenticationService"
type="
System.Web.Configuration.ScriptingAuthenticationServiceSection,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"
requirePermission="false"
allowDefinition="MachineToApplication" />
</sectionGroup>
</sectionGroup>
</sectionGroup>

-------
-------

</configSections>

-------
-------

</configuration>




b) <controls>



<pages enableSessionState="false" enableViewState="true"
enableViewStateMac="true" validateRequest="false"
pageParserFilterType="
Microsoft.SharePoint.ApplicationRuntime.SPPageParserFilter,
Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" asyncTimeout="7">

<controls>
<add tagPrefix="asp" namespace="System.Web.UI"
assembly="System.Web.Extensions, Version=1.0.61025.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

</controls>

-----
-----
</pages>




c) <assemblies>



<compilation batch="false" debug="true">
<assemblies>
-----
-----
<add assembly="System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" />
</assemblies>
-----
-----
</compilation>




d) <httpHandlers>


<httpHandlers>

------
------

<add verb="*" path="Reserved.ReportViewerWebControl.axd"
type="Microsoft.Reporting.WebForms.HttpHandler,
Microsoft.ReportViewer.WebForms,
Version=8.0.0.0, Culture=neutral,
PublicKeyToken=b03f5f7f11d50a3a" />
<add verb="*" path="*.asmx" validate="false"
type="System.Web.Script.Services.ScriptHandlerFactory,
System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" />
<add verb="*" path="*_AppService.axd"
validate="false"
type="System.Web.Script.Services.ScriptHandlerFactory,
System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" />
<add verb="GET,HEAD" path="ScriptResource.axd"
type="System.Web.Handlers.ScriptResourceHandler,
System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" validate="false" />

</httpHandlers>




e) <httpModules>



<httpModules>
------
------
<add name="ScriptModule"
type="System.Web.Handlers.ScriptModule, System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" />
</httpModules>



f) <SafeControls>


<SafeControls>
-----
-----
<SafeControl Assembly="System.Web.Extensions, Version=1.0.61025.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TypeName="*"
Safe="True" />

</SafeControls>



g) <system.web.extensions>

<configuration>
------
------
<system.web.extensions>
<scripting>
<webServices>
<!-- Uncomment this line to enable the authentication
service. Include requireSSL="true"
if appropriate. -->
<!--
<authenticationService enabled="true"
requireSSL = "truefalse"/>
-->
<!-- Uncomment these lines to enable the profile service.
To allow profile properties to be retrieved and modified in
ASP.NET AJAX applications, you need to add
each property name to the readAccessProperties and
writeAccessProperties attributes.
-->
<!--
<profileService enabled="true"
readAccessProperties="propertyname1,propertyname2"
writeAccessProperties="propertyname1,propertyname2
" />
-->
</webServices>
<!--
<scriptResourceHandler enableCompression="true"
enableCaching="true" />
-->
</scripting>
</system.web.extensions>

</configuration>




h) <system.webServer>


<configuration>
------
------
<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>

</configuration>




3) Adding a ScriptManager into a SharePoint MasterPage

Note: If you are using custom master page, then directly made required change in that. Otherwise, if you are using the default master page, then open your desired SharePoint site in SharePoint Designer. Open the default.master file located at “http:///_catalogs/masterpage/default.master” in SharePoint designer and made the required change in it.


Add the following into the markup of your page. A recommended location is right beneath the
WebPartManager registration (search for <WebPartPages:SPWebPartManager id="m" runat="Server" />).



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



4) In Web part solution you have to add the reference of System.Web.Extensions.

5) Following is the code of Web part file:



using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

namespace BlastWP
{
[DefaultProperty("Text")]
[ToolboxData("<{0}:SampleAJAXTab runat=server>")]
public class SampleAJAXTab : WebPart
{
private Control _control;

protected override void CreateChildControls()
{
this.EnsureUpdatePanelFixups();

_control = this.Page.LoadControl
(@"~/UserControls/BlastWP/TabbedPhases.ascx");
this.Controls.Add(_control);
}

private void EnsureUpdatePanelFixups()
{
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(SampleAJAXTab), "UpdatePanelFixup",
"_spOriginalFormAction = document.forms[0].action;
_spSuppressFormOnSubmitWrapper=true;", true);
}
}
}




Note: Here there is a hack related to AJAX Update Panel (refer method EnsureUpdatePanelFixups()).



6) After building the Web part solution, you have to follow normal steps like:


a) Strong name the Web part solution.
b) Create a *.webpart file.
c) Register dll in GAC.
d) Make entry of dll in site's config file.
e)Import *.webpart file in SharePoint.




Note: Currently the Tab headers are not coming properly in AJAX tab control.


Sample References:



  1. AJAX Control Toolkit
    http://www.codeplex.com/AtlasControlToolkit

  2. Installing ASP.NET AJAX
    http://www.asp.net/ajax/documentation/live/InstallingASPNETAJAX.aspx

  3. ASP.Net AJAX
    http://asp.net/ajax/default.aspx

  4. Configuring ASP.NET AJAX
    http://www.asp.net/ajax/documentation/live/ConfiguringASPNETAJAX.aspx

  5. Using the AJAX Control Toolkit in SharePoint
    http://weblogs.asp.net/jan/archive/2007/02/26/using-the-ajax-control-toolkit-in-sharepoint.aspx


6 comments:

Anonymous said...

Hi Avinash,
I'm new in Sharepoint & I do not this is right place to post my question or guide me where is better place to ask question regard moss.
my question is, How to populate sharepoint all people & group list, I mean all AD user list that already added in Moss site.
Any idea.
Please response anything ASAP.
Thanks in Advance
Anwarul
email: anwarul.mdh@gmail.com

Avinash said...

Hi Anwarul,

If you want to add/edit/delete User/Group in SharePoint... then refer following two MSDN link:
SPUser

SPGroup


You can search in google with following keywords ... SPUser (for user) and SPGroup (for Group) related operations.

If you are still facing issue... then please describe your problem in details ... and i will try to find its solution.

~ Avinash

Ashwin Gidwani said...

Ya you are right tab headers are not properly shown. Do u have any work around for this?

Anonymous said...

HI,

I have been created an ajax control in asp web application and when i tried it to show in my sharepoint site i am getting an error creating control:tabcontainer
unknow server tag "cc1:tabcontainer"

can u plz help me in sorting this problem.

the tab header problem can be rectified using style sheet.and its working gr8 for me.

Anita said...

Hi,

The reason for getting the "Unknown server tag" error is that you might have missed the control registration part, i.e.

<%@ Register TagPrefix="prefix" TagName="name" Namespace=”FullyQualifiedName” %>

In your case,
<%@ Register TagPrefix="cc1" TagName="tabcontainer" Namespace=”system.web.extensions” %>

In case of AJAX control, we have to follow all the steps mentioned in the current post, so that AJAX controls gets recognized in our SharePoint's application.

Regarding Tab Header, UI problem occurs only in SharePoint based application not in ASPX application. If you know its solution in Sharepoint then please share it.

~ Avinash

Avinash said...

Hi All,
To solve Ajax control toolkit Tab container header display issue with moss refer this link.

The only change that you have to do is to add following style in you webpart:

<style type="text/css">
.ajax__tab_xp .ajax__tab_tab
{
height: 21px;
}
</style>

Google