1. CS 3870/CS 5870
AJAX
Prog8

2. ASP.NET and AJAX Processing of dynamic pages
Generate entire page on each request
Extra processing
Extra network load
AJAX: to make dynamic pages the same as Windows forms
Update only the controls that changed

3. ASP.NET AJAX Asynchronous JavaScript And XML
Partial Page Updates with ASP.NET AJAX
A JavaScript library sent to client
Calls made by the library sent back to the server
The page is updated partially by the library
The browser does not know it at all!
The browser does not know it at all!

4. AJAX Extensions VS.NET ToolBox ScriptManager UpdatePanel
ScriptManagerProxy
Timer
UpdateProgress

5. ScriptManager
One on each page
the master page
the content pages

6. UpdatePanel One or more UpdatePanels on each page Properties
ContentTemplate
Containing all the controls to be updated partially
Triggers
Containing all controls with the events that will trigger partial update
UpdateMode
Always (default)
Conditional

7. Example Create a folder Prog8 Add a page Default.aspx
Add two textboxes and one button
txtInput
txtSqrt
Button1
No AJAX controls yet

8. Computing Square Root Protected Sub Button1_Click(…) Handles . . .
txtSqrt.Text =
FormatNumber(Math.Sqrt(txtInput.Text), 2)
End Sub

9. Full Page Update Go to other page and back
Compute three times with input 5 50
500
Click Back and Forward on the browser
Each computation re-displayed
Full page update

10. Adding AJAX Controls
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtSqrt" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:TextBox ID="txtInput" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>

11. Partial Page Update Go to other page and back
Compute three times with input 5 50
500
Click Back and Forward on the browser
Go back to the other page
Partial page update

12. Button1 is Outside of UpdatePanel
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtSqrt" runat="server"></asp:TextBox>
<asp:TextBox ID="txtInput" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" Text="Button" />

13. Button1 is Out Side of UpdatePanel
Go to other page and back
Compute three times with input 5 50
500
Click Back and Forward on the browser
Full page update

14. Adding Trigger
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtSqrt" runat="server"></asp:TextBox>
<asp:TextBox ID="txtInput" runat="server"></asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1"
EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" Text="Button" />

15. Button1 is Out Side of UpdatePanel wit Trigger
Go to other page and back
Compute three times with input 5 50
500
Click Back and Forward on the browser
Partial page update

16. txtInput is Outside of UpdatePanel
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtSqrt" runat="server"></asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1"
EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:TextBox ID="txtInput" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />

17. Textbox txtInput is out side of UpdatePanel
Partial page update
User input is always passed back to server

18. Clear the Input Not cleared
Protected Sub Button1_Click(…) Handles . . .
txtSqrt.Text =
FormatNumber(Math.Sqrt(txtInput.Text), 2)
txtInpt.Text = “”
End Sub
Not cleared
Partial page update and txtInput is excluded

19. More Controls
Add textbox txtDouble
Add Button2
Add UpdatePanel2

20. Button Click Events Protected Sub Button1_Click(…) Handles . . .
txtSqrt.Text =
FormatNumber(Math.Sqrt(txtInput.Text), 2)
txtDouble.Text = “”
End Sub
Protected Sub Button2_Click(…) Handles . . .
txtDouble.Text = 2 * txtInput.Text
txtSqrt.Text = “”

21. Multiple UpdatePanels
txtSqrt
Trigger: Button1
UpdatePanel2
txtDouble
Trigger: Button2

22. Add Triggers Select UpdatePanel2 Properties Windows
Triggers (Collection)
Add
ControlID: Button1
EventName: click

23. UpdateMode Always (Default) Conditional
Apply Conditional to both UpdatePanels

24. Control Position
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtSqrt" runat="server"></asp:TextBox>
<asp:TextBox ID="txtInput" runat="server“
style="position: relative; top: 120px ></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" Text="Button"
style="position: relative; top: -60px />

25. Test 3 Thursday, Dec 8 Web application using AJAX Membership No Roles
Create users
Allow and deny users access
No Roles