2

Integrating ASP.NET AJAX with SharePoint 2007

Rob Windsor

ObjectSharp Consulting

rwindsor@objectsharp.com

Session Code: OFC308

3

Session Prerequisites

Experience developing ASP.NET web applications

Experience developing for Windows SharePoint Services 3.0

No ASP.NET AJAX experience is assumed

Level 300

4

Me.About

Senior Consultant with ObjectSharp Consulting

President of the Toronto VB User Group

Member of the MSDN Canada Speakers Bureau

TechEd Orlando 2007 Speaker Idol Finalist

Visual Basic MVP

Find me onlinehttp://msmvps.com/windsor

http://twitter.com/robwindsorhttps://mvp.support.microsoft.com/profile/Rob.Windsor

5

Agenda

AJAX Fundamentals

Using the UpdatePanel

Calling Services from Client Script

ASP.NET AJAX Control Toolkit

6

AJAX

Asynchronous JavaScript and XMLWeb development technique for creating interactive applications

Uses a combination of DHTML, JavaScript and XmlHttp

About improving user experienceImprove perceived performance using partial page updates done asynchronously

Make use of the browser as an “Application Platform”

7

ASP.NET AJAX

Downloadable add-in for ASP.NET 2.0 and VS 2005

Native support in ASP.NET 3.5 and VS 2008

Works with Internet Explorer, FireFox, Safari Web clients

Delivers ASP.NET AJAX foundation “core”:JavaScript type-system

JavaScript <-->.NET Networking Serialization

JavaScript library of common routines

ASP.NET Server Control Integration

8

ASP.NET AJAX and SharePoint 2007

Generally work well together

AJAX only officially supported with WSS 3.0 SP1

May require some installationAJAX Extensions

Requires some workaroundsWeb.config

ScriptManager

UpdatePanel postbacks

9

ASP.NET AJAX Extensions 1.0

Download only required for machines running ASP.NET 2.0

10

VS 2005 Templates and Controls

11

VS 2008 Templates and Controls

12

Web.config

Several entries are required to enable ASP.NET AJAX

13

Web.config and SharePoint

Web.config files in SharePoint Web applications do not have the entries required to support ASP.NET AJAXUse a Feature to update Web.config

Scoped at web application levelRequire farm administration to update web.config

Adds required entries when activated, removes when deactivated

Use SPWebConfigModification to add/remove entries

14

SPWebConfigModification Example

Public Overrides Sub FeatureActivated(ByVal properties As _ SPFeatureReceiverProperties)

Dim modification As New SPWebConfigModification()modification.Name = "add[@name='ScriptModule']“modification.Path = "configuration/system.web/httpModules"modification.Owner = "Ajaxification"modification.Sequence = 0modification.Type = SPWebConfigModificationType.EnsureChildNodemodification.Value = "<add name=""ScriptModule""“ + _

type=""System.Web.Handlers.ScriptModule, System.Web.Extensions,“ + _ "Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"“/>"

Dim webApp As SPWebApplication = properties.Feature.ParentwebApp.WebConfigModifications.Add(myModification)

Dim service As SPWebServiceservice = SPFarm.Local.Services.GetValue(Of SPWebService)() service.ApplyWebConfigModifications()

End Sub

15

Ajaxification

Feature to update Web.config to support ASP.NET AJAX

16

ScriptManager Control

Required on all pages that use AJAX functionality

Co-ordinates page rendering for the server controls

Generates appropriate script based on type and capabilities of calling browser

17

ScriptManager and SharePoint

Two optionsAdd ScriptManager to master pages

This will likely be done by Microsoft in a future version of SharePoint

Add ScriptManager programmaticallyMake sure not to add more than one

Private Sub EnsureScriptManager()If ScriptManager.GetCurrent(Me.Page) Is Nothing Then

Me.Controls.Add(New ScriptManager())End If

End Sub

18

Agenda

AJAX Fundamentals

Using the UpdatePanel

Calling Services from Client Script

ASP.NET AJAX Control Toolkit

19

UpdatePanel Control

“Easy” AJAX

Container control that enables “updatable” regions

ASP.NET AJAX provides a XmlHttp-based postbackinfrastructure

ProcessASP.NET AJAX hooks post-back submit actions on client

Uses XMLHttp to fire postback action to server

Postback events fire like normal on server

Only content of UpdatePanel regions returned

Changed UpdatePanel regions replaced on client

20

Using the Update Panel

<body style="font-size: x-large"><form id="form1" runat="server">

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

<asp:UpdatePanel ID="UpdatePanel1" runat="server“ UpdateMode="Conditional“ ><ContentTemplate>

<uc1:Calculator ID="Calculator1" runat="server" /></ContentTemplate>

</asp:UpdatePanel></div>

</form></body>

21

UpdatePanel and SharePoint

May require workaround to address issue with postbackIssue addressed with WSS 3.0 SP1

Wrapping built-in functionality may produce unexpected results

Need to be aware of potential issues when multiple UpdatePanels are on a page

Private Sub EnsureUpdatePanelFixups()If Me.Page.Form IsNot Nothing Then

Dim formOnSubmitAtt As String = Me.Page.Form.Attributes("onsubmit")If formOnSubmitAtt = "return _spFormOnSubmitWrapper();" Then

Me.Page.Form.Attributes("onsubmit") = "_spFormOnSubmitWrapper();"End If

End IfScriptManager.RegisterStartupScript(Me, Me.GetType(), _

"UpdatePanelFixup", "_spOriginalFormAction = " + _"document.forms[0].action; _spSuppressFormOnSubmitWrapper=true;", _ True)

End Sub

22

Using the UpdatePanel

Adding AJAX-like features to a Web Part

23

Agenda

AJAX Fundamentals

Using the UpdatePanel

Calling Services from Client Script

ASP.NET AJAX Control Toolkit

24

Server-Centric Programming

ASP.NET

Application

Services

Page

Framework,

Server Controls

Microsoft AJAX Library

Client

Application

Services

Component/UI

Framework,

Controls

Browser

Presentation

(HTML/CSS)

ASP.NET Application

Pages

UI Behavior

(Managed

Code)

Input Data

Updated UI + Behavior

Initial Rendering

(UI + Behavior)

25

Client-Centric Programming Model

Browser

Presentation

(HTML/CSS)

ASP.NET AJAX

Service

ProxiesUI Behavior

(Script)

ASP.NET

Application

Services

Page

Framework,

Server Controls

ASP.NET Application

Pages

Web

Services

Microsoft AJAX Library

Client

Application

Services

Component/UI

Framework,

Controls

Initial Rendering

(UI + Behavior)

Data

Data

26

Script Services

Web services that can auto-generate ASP.NET AJAX compatible JavaScript proxy

Append “/js” to endpoint address to get proxy code

Use ScriptService attribute on ASMX web servicesIn System.Web.Script.Services

Works with ASP.NET 2.0 and 3.5

Add an endpoint behavior with enableWebScriptin WCF

Project must reference System.ServiceModel.Web

ASP.NET 3.5 only

27

Script Service Proxy

28

Consuming Script Services

Add a reference to the service via the ScriptManager

Declare client-side event handler(s) for appropriate control(s)

Add JavaScript function to call serviceThis will executed asynchronously

Add JavaScript function to receive return value and update page

29

Calling the Script Service

function CallMathService(sender) {var prefix = GetControlPrefix(sender); var num1 = document.getElementById(prefix + "txtNumber1").value; var num2 = document.getElementById(prefix + "txtNumber2").value;AjaxDemo.MathService.Add(num1, num2, CallMathServiceComplete,

null, prefix);}

function CallMathServiceComplete(result, prefix) {var elem = document.getElementById(prefix + "lblSum"); elem.innerText = result;

}

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

<asp:ServiceReference Path="~/MathService.asmx" /></Services>

</asp:ScriptManagerProxy>

30

Script Services and SharePoint

Web Service (asmx) files deployed to \12\ISAPI in SharePoint System Folders

Script (js) files can also go in \12\ISAPIOr they can be embedded resource in assembly

Register Web Service and Script files/resources with ScriptManager

31

Script Services

Calling Web Services in Client-Side Javascript

32

Agenda

AJAX Fundamentals

Using the UpdatePanel

Calling Services from Client Script

ASP.NET AJAX Control Toolkit

33

What is the Control Toolkit?

A set of components designed to allow ASP.NET developers to easily improve client side UI

A framework for building and deploying AJAX-enabled components and controls

A Shared-Source projectJoint effort of Microsoft team members and external contributors

CodePlex makes everything transparent

Users can download code for any check-in

34

Toolkit on CodePlex

35

Getting the Control Toolkit

http://www.codeplex.com/AjaxControlToolkit

Download the release appropriate to the version of .NET and ASP.NET AJAX you are targeting

Expand the ZIP file

Add a reference to AjaxControlToolkit.dllFound in \SampleWebSite\Bin

Add the controls to the Visual Studio Toolbox

36

Using the Control Toolkit

<tr><td>

<asp:Label ID="lblNumber1" Text="Number 1:" runat="server" Font-Bold="False" /> </td>

<td><asp:TextBox ID="txtNumber1Silder" runat="server“ /><cc1:SliderExtender ID="txtNumber1Slider_Extender" runat="server"

BoundControlID="txtNumber1" Enabled="True" Minimum="1" Maximum="99" TargetControlID="txtNumber1Silder" BehaviorID="txtNumber1Slider_Behavior" /> </td>

<td><asp:TextBox ID="txtNumber1" runat="server" EnableViewState="False"

Width="60px" ReadOnly="True">1</asp:TextBox></td>

</tr>

37

Control Toolkit and SharePoint

Control Toolkit assembly must be installed in GAC

Web.config file must be updatedSame additions shown previously

Extender controls must be added to Page in PreRender event or later

38

Control Toolkit

39

40

Resources

Inside Windows SharePoint Service 3.0http://shrinkster.com/y2w

Integrating ASP.NET AJAX with SharePointhttp://sharepoint.microsoft.com/blogs/mike/Lists/Posts/Post.aspx?ID=3

Daniel Larson’s Bloghttp://daniellarson.spaces.live.com/default.aspx

With an amazing line up of international speakers, there are even more chances to win an evaluation prize! So make sure you submit feedback for all the sessions you attend!

Don’t forget to completeyour session feedback forms via the CommNet terminalsor the Registered Delegate

Pages for your chance towin a HTC Touch Dual!

Now extended from2 to 24 hours after session

for more chance to WIN

http://www.microsoft.com/emea/teched2008/developer/feedback.aspx

Your feedback is important to us! Help us to understand what really matters to you!

Submit your Overall Conference Feedback via

the CommNet terminals orthe Registered Delegate Pages

for your chance to win an Inspiron Mini Notebook!

http://www.microsoft.com/emea/teched2008/developer/feedback.aspx

www.microsoft.com/techedTech·Talks Tech·Ed BloggersLive Simulcasts Virtual Labs

http://microsoft.com/msdn

Developer’s Kit, Licenses, and MORE!

Resources for Developers

44

© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS,

IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

45

© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS,

IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.