SharePoint provides a great infrastructure for quickly building intranet and Internet applications. ASP.NET AJAX provides a foundation for creating highly productive Web interfaces. Combined they are two great tastes that taste great together! In this session we will cover the basics of working with ASP.NET AJAX inside of SharePoint 2007. We will take a look at how to prepare a Web Application for ASP.NET AJAX, and how to use various ASP.NET AJAX tools such as the JavaScript libraries, JSON-enabled Web services, and UpdatePanels to build add rich interactivity to your SharePoint sites.

2. Session Code: OFC308
Integrating ASP.NET AJAX with
SharePoint 2007
Rob Windsor
ObjectSharp Consulting
rwindsor@objectsharp.com
2

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
3

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 online
http://msmvps.com/windsor
http://twitter.com/robwindsor
https://mvp.support.microsoft.com/profile/Rob.Windsor
4

5. Agenda
AJAX Fundamentals
Using the UpdatePanel
Calling Services from Client Script
ASP.NET AJAX Control Toolkit
5

6. AJAX
Asynchronous JavaScript and XML
Web development technique for creating
interactive applications
Uses a combination of DHTML, JavaScript
and XmlHttp
About improving user experience
Improve perceived performance using partial page
updates done asynchronously
Make use of the browser as an
“Application Platform”
6

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
7

8. ASP.NET AJAX and SharePoint 2007
Generally work well together
AJAX only officially supported with WSS 3.0 SP1
May require some installation
AJAX Extensions
Requires some workarounds
Web.config
ScriptManager
UpdatePanel postbacks
8

9. ASP.NET AJAX Extensions 1.0
Download
only required
for machines
running
ASP.NET 2.0
9

10. VS 2005 Templates and Controls
10

11. VS 2008 Templates and Controls
11

12. Web.config
Several entries are required to enable ASP.NET AJAX
12

13. Web.config and SharePoint
Web.config files in SharePoint Web
applications do not have the entries
required to support ASP.NET AJAX
Use a Feature to update Web.config
Scoped at web application level
Require farm administration to update web.config
Adds required entries when activated,
removes when deactivated
Use SPWebConfigModification to
add/remove entries
13

14. SPWebConfigModification Example
Public Overrides Sub FeatureActivated(ByVal properties As _
SPFeatureReceiverProperties)
Dim modification As New SPWebConfigModification()
modification.Name = quot;add[@name='ScriptModule']“
modification.Path = quot;configuration/system.web/httpModulesquot;
modification.Owner = quot;Ajaxificationquot;
modification.Sequence = 0
modification.Type = SPWebConfigModificationType.EnsureChildNode
modification.Value = quot;<add name=quot;quot;ScriptModulequot;quot;“ + _
type=quot;quot;System.Web.Handlers.ScriptModule, System.Web.Extensions,“ + _
quot;Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35quot;“/>quot;
Dim webApp As SPWebApplication = properties.Feature.Parent
webApp.WebConfigModifications.Add(myModification)
Dim service As SPWebService
service = SPFarm.Local.Services.GetValue(Of SPWebService)()
service.ApplyWebConfigModifications()
End Sub
14

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

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
16

17. ScriptManager and SharePoint
Two options
Add ScriptManager to master pages
This will likely be done by Microsoft in a future version of
SharePoint
Add ScriptManager programmatically
Make 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
17

18. Agenda
AJAX Fundamentals
Using the UpdatePanel
Calling Services from Client Script
ASP.NET AJAX Control Toolkit
18

19. UpdatePanel Control
“Easy” AJAX
Container control that enables “updatable” regions
ASP.NET AJAX provides a XmlHttp-based postback
infrastructure
Process
ASP.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
19

20. Using the Update Panel
<body style=quot;font-size: x-largequot;>
<form id=quot;form1quot; runat=quot;serverquot;>
<asp:ScriptManager ID=quot;ScriptManager1quot; runat=quot;serverquot; />
<div>
<asp:UpdatePanel ID=quot;UpdatePanel1quot; runat=quot;server“
UpdateMode=quot;Conditional“ >
<ContentTemplate>
<uc1:Calculator ID=quot;Calculator1quot; runat=quot;serverquot; />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
20

21. UpdatePanel and SharePoint
May require workaround to address issue with postback
Issue 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(quot;onsubmitquot;)
If formOnSubmitAtt = quot;return _spFormOnSubmitWrapper();quot; Then
Me.Page.Form.Attributes(quot;onsubmitquot;) = quot;_spFormOnSubmitWrapper();quot;
End If
End If
ScriptManager.RegisterStartupScript(Me, Me.GetType(), _
quot;UpdatePanelFixupquot;, quot;_spOriginalFormAction = quot; + _
quot;document.forms[0].action; _spSuppressFormOnSubmitWrapper=true;quot;, _
True)
End Sub
21

22. Using the UpdatePanel
Adding AJAX-like features to a Web Part
22

23. Agenda
AJAX Fundamentals
Using the UpdatePanel
Calling Services from Client Script
ASP.NET AJAX Control Toolkit
23

24. Server-Centric Programming
Browser ASP.NET Application
Initial Rendering
Pages
Presentation (UI + Behavior)
(HTML/CSS)
Input Data
UI Behavior
Updated UI + Behavior (Managed
Code)
Microsoft AJAX Library ASP.NET
Component/UI Client Page
Application
Framework, Application Framework,
Services
Controls Services Server Controls
24

25. Client-Centric Programming Model
Browser ASP.NET Application
Presentation Initial Rendering
(HTML/CSS) Pages
(UI + Behavior)
ASP.NET AJAX
Service Data
UI Behavior Proxies Web
(Script) Data Services
Microsoft AJAX Library ASP.NET
Component/UI Client Page
Application
Framework, Application Framework,
Services
Controls Services Server Controls
25

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 services
In System.Web.Script.Services
Works with ASP.NET 2.0 and 3.5
Add an endpoint behavior with enableWebScript
in WCF
Project must reference System.ServiceModel.Web
ASP.NET 3.5 only
26

27. Script Service Proxy
27

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 service
This will executed asynchronously
Add JavaScript function to receive return value
and update page
28

29. Calling the Script Service
<asp:ScriptManager ID=quot;ScriptManagerquot; runat=quot;serverquot;>
<Services>
<asp:ServiceReference Path=quot;~/MathService.asmxquot; />
</Services>
</asp:ScriptManagerProxy>
function CallMathService(sender) {
var prefix = GetControlPrefix(sender);
var num1 = document.getElementById(prefix + quot;txtNumber1quot;).value;
var num2 = document.getElementById(prefix + quot;txtNumber2quot;).value;
AjaxDemo.MathService.Add(num1, num2, CallMathServiceComplete,
null, prefix);
}
function CallMathServiceComplete(result, prefix) {
var elem = document.getElementById(prefix + quot;lblSumquot;);
elem.innerText = result;
}
29

30. Script Services and SharePoint
Web Service (asmx) files deployed to 12ISAPI
in SharePoint System Folders
Script (js) files can also go in 12ISAPI
Or they can be embedded resource in assembly
Register Web Service and Script files/resources
with ScriptManager
30

31. Script Services
Calling Web Services in Client-Side
Javascript
31

32. Agenda
AJAX Fundamentals
Using the UpdatePanel
Calling Services from Client Script
ASP.NET AJAX Control Toolkit
32

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 project
Joint effort of Microsoft team members and
external contributors
CodePlex makes everything transparent
Users can download code for any check-in
33

34. Toolkit on CodePlex
34

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.dll
Found in SampleWebSiteBin
Add the controls to the Visual Studio Toolbox
35

36. Using the Control Toolkit
<tr>
<td>
<asp:Label ID=quot;lblNumber1quot; Text=quot;Number 1:quot; runat=quot;serverquot;
Font-Bold=quot;Falsequot; /> </td>
<td>
<asp:TextBox ID=quot;txtNumber1Silderquot; runat=quot;server“ />
<cc1:SliderExtender ID=quot;txtNumber1Slider_Extenderquot; runat=quot;serverquot;
BoundControlID=quot;txtNumber1quot; Enabled=quot;Truequot; Minimum=quot;1quot; Maximum=quot;99quot;
TargetControlID=quot;txtNumber1Silderquot;
BehaviorID=quot;txtNumber1Slider_Behaviorquot; /> </td>
<td>
<asp:TextBox ID=quot;txtNumber1quot; runat=quot;serverquot; EnableViewState=quot;Falsequot;
Width=quot;60pxquot; ReadOnly=quot;Truequot;>1</asp:TextBox>
</td>
</tr>
36

37. Control Toolkit and SharePoint
Control Toolkit assembly must be installed in GAC
Web.config file must be updated
Same additions shown previously
Extender controls must be added to Page in
PreRender event or later
37

38. Control Toolkit
38

39. 39

40. Resources
Inside Windows SharePoint Service 3.0
http://shrinkster.com/y2w
Integrating ASP.NET AJAX with SharePoint
http://sharepoint.microsoft.com/blogs/mike/Lists/Posts/Post.aspx?ID=3
Daniel Larson’s Blog
http://daniellarson.spaces.live.com/default.aspx
40

41. Now extended from
2 to 24 hours after session
for more chance to WIN
Don’t forget to complete
your session feedback forms
via the CommNet terminals
or the Registered Delegate
Pages for your chance to
win a HTC Touch Dual!
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!
http://www.microsoft.com/emea/teched2008/developer/feedback.aspx

42. Your feedback is important to us! Help us
to understand what really matters to you!
Submit your Overall
Conference Feedback via
the CommNet terminals or
the Registered Delegate Pages
for your chance to win an
Inspiron Mini Notebook!
http://www.microsoft.com/emea/teched2008/developer/feedback.aspx

43. Resources for Developers
www.microsoft.com/teched
Tech·Talks Tech·Ed Bloggers
Live Simulcasts Virtual Labs
http://microsoft.com/msdn
Developer’s Kit, Licenses, and MORE!

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.
44

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.
45