Module 1: Creating Responsive Pages with Ajax Creating Partial-Page Updates by Using AJAX Scripting Actions on the Web Client

Lesson: Creating Partial-Page Updates by Using AJAX What are Partial-Page Updates? Discussion: Applications for Partial-Page Updates The ASP.NET AJAX Controls Implementing Partial-Page Updates Demonstration: Partial-Page Updates The ASP.NET AJAX Control Toolkit

What are Partial-Page Updates? Initial download is the whole page Parts of the page can refresh while the rest of the page remains static

Discussion: Applications for Partial-Page Updates Scenario: A small page that displays brief details about a single product. Scenario: A page that displays brief details about many products. Scenario: A page that displays brief details about share prices.

The ASP.NET AJAX Controls ScriptManager Manages script libraries and script files, partial-page rendering, and other functions. UpdatePanel Enables sections of a page to be partially rendered without a page postback. UpdateProgress Provides visual feedback on the browser when the contents on UpdatePanel controls refresh. Timer Performs partial-page updates at defined intervals.

Creating the ScriptManager Control: Implementing Partial-Page Updates <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:ScriptManager ID="ScriptManager1" runat="server" /> Creating an Update Panel and Adding Controls: <asp:GridView ID=GridView1 datasourceid=MyDataSource autogeneratecolumns=true allowpaging=false runat=server> <asp:Button ID=UpdateButton Text=Refresh the Grid runat=server /> <asp:GridView ID=GridView1 datasourceid=MyDataSource autogeneratecolumns=true allowpaging=false runat=server> <asp:Button ID=UpdateButton Text=Refresh the Grid runat=server />

The ASP.NET AJAX Control Toolkit Shared source project between Microsoft and the ASP.NET AJAX community Downloadable from Contains a collection of templates and controls Provides an infrastructure to write reusable and extensible ASP.NET AJAX controls

Lesson: Scripting Actions on the Web Client Improving Responsiveness by Creating Client- Side Scripts Creating Server-Side AJAX Services Calling Services from Client-Side Scripts Best Practices for Client-Side Scripting and AJAX

Improving Responsiveness by Creating Client-Side Scripts

Creating Server-Side AJAX Services Implementing a Server-Side Service as an ASP.NET Web Service Implementing a Server-Side Service as Page Methods Formats for Service Messages

Calling Services From Client-Side Scripts Adding Service References and Client-Side Script: <asp:ScriptManager ID="ScriptManager1" runat="server"> <asp:ServiceReference Path=NewsWebService.asmx" /> <asp:ScriptReference Path=NewsClientScript.js" /> <asp:ScriptManager ID="ScriptManager1" runat="server"> <asp:ServiceReference Path=NewsWebService.asmx" /> <asp:ScriptReference Path=NewsClientScript.js" /> Calling a Service Function: function GetNews() AdventureWorks.NewsWebService.GetNews(Succeeded) function GetNews() AdventureWorks.NewsWebService.GetNews(Succeeded)

Best Practices for Client-Side Scripting and AJAX Consider using AJAX whenever a small portion of a large page must refresh. Use the UpdatePanel to enable partial page updates without custom JavaScript code. Use the UpdateProgress control to reassure users when a partial page update takes time. Register client-side scripts with the AJAX client-side library to make use of AJAX extensions to JavaScript. Use AJAX services and custom JavaScript for optimum performance. Prevent use of the GET request verb in AJAX requests for increased security.

Lab: Creating Responsive Pages by Using Client-Side Technologies Exercise 1: Implementing Partial-Page Updates by Using AJAX Controls Exercise 2: Accessing a Web Service by Using a Client Side Script Estimated time: 60 minutes