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

ScriptManagerManages script libraries and script files, partial-page rendering, and other functions.

UpdatePanelEnables sections of a page to be partially rendered without a page postback.

UpdateProgressProvides 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:UpdatePanel ID="UpdatePanel1” runat="server"> <asp:GridView ID=“GridView1” datasourceid=“MyDataSource”

autogeneratecolumns=“true” allowpaging=“false” runat=“server”> </asp:GridView> <asp:Button ID=“UpdateButton”

Text=“Refresh the Grid” runat=“server” /></asp:UpdatePanel>

<asp:UpdatePanel ID="UpdatePanel1” runat="server"> <asp:GridView ID=“GridView1” datasourceid=“MyDataSource”

autogeneratecolumns=“true” allowpaging=“false” runat=“server”> </asp:GridView> <asp:Button ID=“UpdateButton”

Text=“Refresh the Grid” runat=“server” /></asp:UpdatePanel>

The ASP.NET AJAX Control Toolkit

•Shared source project between Microsoft and the ASP.NET AJAX community

•Downloadable from http://www.codeplex.com

•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"> <Services>

<asp:ServiceReference Path=“NewsWebService.asmx" />

</Services><Scripts>

<asp:ScriptReference Path=“NewsClientScript.js" />

</Scripts></asp:ScriptManager>

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

<asp:ServiceReference Path=“NewsWebService.asmx" />

</Services><Scripts>

<asp:ScriptReference Path=“NewsClientScript.js" />

</Scripts></asp:ScriptManager>

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