Session Code: OFC308




    Integrating ASP.NET AJAX with
    SharePoint 2007

    Rob Windsor
    ObjectSharp Consulting...
Session Prerequisites
     Experience developing ASP.NET web applications
     Experience developing for Windows SharePoin...
Me.About
     Senior Consultant with ObjectSharp Consulting
     President of the Toronto VB User Group
     Member of the...
Agenda
     AJAX Fundamentals
     Using the UpdatePanel
     Calling Services from Client Script
     ASP.NET AJAX Contro...
AJAX
     Asynchronous JavaScript and XML
       Web development technique for creating
       interactive applications
  ...
ASP.NET AJAX
     Downloadable add-in for ASP.NET 2.0
     and VS 2005
     Native support in ASP.NET 3.5 and VS 2008
    ...
ASP.NET AJAX and SharePoint 2007
     Generally work well together
     AJAX only officially supported with WSS 3.0 SP1
  ...
ASP.NET AJAX Extensions 1.0
                            Download
                            only required
               ...
VS 2005 Templates and Controls




10
VS 2008 Templates and Controls




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




12
Web.config and SharePoint
      Web.config files in SharePoint Web
      applications do not have the entries
      requir...
SPWebConfigModification Example
     Public Overrides Sub FeatureActivated(ByVal properties As _
       SPFeatureReceiverP...
Ajaxification


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




15
ScriptManager Control
      Required on all pages that use AJAX functionality
      Co-ordinates page rendering for the se...
ScriptManager and SharePoint
      Two options
         Add ScriptManager to master pages
            This will likely be ...
Agenda
      AJAX Fundamentals
      Using the UpdatePanel
      Calling Services from Client Script
      ASP.NET AJAX Co...
UpdatePanel Control
      “Easy” AJAX
      Container control that enables “updatable” regions
      ASP.NET AJAX provides...
Using the Update Panel
     <body style=quot;font-size: x-largequot;>
        <form id=quot;form1quot; runat=quot;serverqu...
UpdatePanel and SharePoint
      May require workaround to address issue with postback
          Issue addressed with WSS ...
Using the UpdatePanel


     Adding AJAX-like features to a Web Part




22
Agenda
      AJAX Fundamentals
      Using the UpdatePanel
      Calling Services from Client Script
      ASP.NET AJAX Co...
Server-Centric Programming
             Browser                                            ASP.NET Application

          ...
Client-Centric Programming Model
             Browser                                            ASP.NET Application

    ...
Script Services
       Web services that can auto-generate ASP.NET AJAX
       compatible JavaScript proxy
       Append “...
Script Service Proxy




27
Consuming Script Services
      Add a reference to the service via the
      ScriptManager
      Declare client-side event...
Calling the Script Service
      <asp:ScriptManager ID=quot;ScriptManagerquot; runat=quot;serverquot;>
          <Services...
Script Services and SharePoint
      Web Service (asmx) files deployed to 12ISAPI
      in SharePoint System Folders
     ...
Script Services


     Calling Web Services in Client-Side
     Javascript




31
Agenda
      AJAX Fundamentals
      Using the UpdatePanel
      Calling Services from Client Script
      ASP.NET AJAX Co...
What is the Control Toolkit?
      A set of components designed to allow ASP.NET
      developers to easily improve client...
Toolkit on CodePlex




34
Getting the Control Toolkit
       http://www.codeplex.com/AjaxControlToolkit
      Download the release appropriate to th...
Using the Control Toolkit


     <tr>
       <td>
         <asp:Label ID=quot;lblNumber1quot; Text=quot;Number 1:quot; run...
Control Toolkit and SharePoint
      Control Toolkit assembly must be installed in GAC
      Web.config file must be updat...
Control Toolkit




38
39
Resources
      Inside Windows SharePoint Service 3.0
        http://shrinkster.com/y2w
      Integrating ASP.NET AJAX wit...
Now extended from
                                         2 to 24 hours after session
                                   ...
Your feedback is important to us! Help us
   to understand what really matters to you!


                                 ...
Resources for Developers


  www.microsoft.com/teched
  Tech·Talks        Tech·Ed Bloggers
  Live Simulcasts   Virtual Lab...
© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be...
© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be...
Integrating ASP.NET AJAX with SharePoint
Upcoming SlideShare
Loading in...5
×

Integrating ASP.NET AJAX with SharePoint

14,109

Published on

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.

Published in: Technology
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
14,109
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

Integrating ASP.NET AJAX with SharePoint

  1. 1. Session Code: OFC308 Integrating ASP.NET AJAX with SharePoint 2007 Rob Windsor ObjectSharp Consulting rwindsor@objectsharp.com 2
  2. 2. 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
  3. 3. 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
  4. 4. Agenda AJAX Fundamentals Using the UpdatePanel Calling Services from Client Script ASP.NET AJAX Control Toolkit 5
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. ASP.NET AJAX Extensions 1.0 Download only required for machines running ASP.NET 2.0 9
  9. 9. VS 2005 Templates and Controls 10
  10. 10. VS 2008 Templates and Controls 11
  11. 11. Web.config Several entries are required to enable ASP.NET AJAX 12
  12. 12. 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
  13. 13. 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
  14. 14. Ajaxification Feature to update Web.config to support ASP.NET AJAX 15
  15. 15. 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
  16. 16. 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
  17. 17. Agenda AJAX Fundamentals Using the UpdatePanel Calling Services from Client Script ASP.NET AJAX Control Toolkit 18
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. Using the UpdatePanel Adding AJAX-like features to a Web Part 22
  22. 22. Agenda AJAX Fundamentals Using the UpdatePanel Calling Services from Client Script ASP.NET AJAX Control Toolkit 23
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. Script Service Proxy 27
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. Script Services Calling Web Services in Client-Side Javascript 31
  31. 31. Agenda AJAX Fundamentals Using the UpdatePanel Calling Services from Client Script ASP.NET AJAX Control Toolkit 32
  32. 32. 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
  33. 33. Toolkit on CodePlex 34
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. Control Toolkit 38
  38. 38. 39
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. 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!
  43. 43. © 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
  44. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×