CS 3870/CS 5870 AJAX Prog8

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

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!

AJAX Extensions VS.NET ToolBox ScriptManager UpdatePanel ScriptManagerProxy Timer UpdateProgress

ScriptManager One on each page the master page the content pages

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

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

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

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

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>

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

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" />

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

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" />

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

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" />

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

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

More Controls Add textbox txtDouble Add Button2 Add UpdatePanel2

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 = “”

Multiple UpdatePanels txtSqrt Trigger: Button1 UpdatePanel2 txtDouble Trigger: Button2

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

UpdateMode Always (Default) Conditional Apply Conditional to both UpdatePanels

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 />

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