Lab 5 – CS 3340, Spring 2016

Lab Objective:

  1. Use .NET controls to apply Ajax to a page.

There are 7 stages to complete Lab 5.

Stage / Description
1 / Create Lab 5 Home Page
2 / Add Ajax to a Page
3 / Handle a Slow Ajax Call
4 / Add Postback Behavior
5 / Add a Trigger
6 / Use a Timer Control
7 / Wrapping Up and Posting to Lucius

Follow the directions below to complete the lab. The completed Lab should work like this:

Stage 1 – Create Lab 5 Home Page

  1. Create a Web Site named Lab5.
  1. Create Lab5 folder on a flash (or hard) drive.
  2. Open VS and choose: File, New Website, navigate to Lab5 folder.
  1. Add a Web Form.VS should be open and you should have a Lab5 web site in the Solution Explorer.
  1. Add a web form named Default.aspx.
  2. Add the HTML title: “Lab 5 – FirstName LastName”, substituting your name.
  3. Write a level 2 header that reads: “Lab 5 – FirstName LastName”

You might choose to do the next two steps (d and e) at the very end when you have posted to Lucius.
  1. Make the text “FirstName LastName” a link to your course homepage.
  2. Open your course home page. Add the text, “Lab 5” to the page and make it a link to your Lab 5 home page.

  1. View your page on local host (Right-click page and choose: View in Browser)

Stage 2 – Add Ajax to a Page

  1. Build an Ajax Example.
  1. Make sure your page is in Design view.
  2. Open the Toolbox and expand the Ajax Extensions group
  3. Add a ScriptManagercontrol to the page. At design-time, it will look as shown on the right. At run-time, it does not appear. We will call controls like this, components. Components do not have a visual presence at run-time. This component provides the infrastructure needed to use Ajax.
  1. Add an UpdatePanel Found in the Ajax Extensions group. At design-time, it will appear as shown on the right. We will put the controls we want to use AJAX with inside the UpdatePanel. This is the region where partial-page updates occur.

  1. Design your page so that it looks as shown on the right.
  1. Add the text (does not need to be inside the UpdatePanel).
  2. Add two ListBoxes inside the UpdatePanel. Give them a meaningful ID, add some names, set AutoPostBack to true for both.
  3. Add event handlers so that when the user selects a name in either list, it will move the name to the other list. Hint: be sure and set the SelectedIndex for both ListBoxes to -1 upon completion of move.

Challenge (optional): Can you do this with just one event handler? Hint: use the sender argument to determine which ListBox triggered the event.

  1. View the Source of your page and make sure the ListBoxes are inside the UpdatePanel (and inside the ContentTemplate) as shown on the right.
  1. Run and Test (Ctrl+Shift B, Ctrl+F5). You should not see the tab flicker when a name is selected. This tells us that Ajax is being used.

Stage 3– Handle a Slow Ajax Call

We use the Ajax UpdateProgress control to handle the situation where an Ajax calls takes a “long” time. This control just displays a message of your choice after the call has taken more than a certain number of seconds, which you specify.

  1. Add an UpdateProgress Control
  1. Add an UpdateProgress control to the page (found in the Ajax Extentions group). It will appear as shown on right (ignore the “Lab 4” title). It does not have to be in the UpdatePanel
  1. Add the text as shown in the UpdateProgress panel as shown on the right. (To make the text red, select it and choose: Format, Foreground Color).
  1. Select the UpdatePanel (click the tag at the top of the region). Note that the DisplayAfter property is set to 500 (0.5 seconds). This means that this message will be displayed if the Ajax call takes longer than 0.5 seconds.
  2. Add an artificial delay in the method(s) that move the name. Add this line at the top of your event handlers:

System.Threading.Thread.Sleep(3000);

  1. Run and Test (Ctrl+Shift B, Ctrl+F5). You should see the message appear when you move a name and the tab should not flicker.

Stage 4 – Add PostBack Behavior

Here, we will add a Button that causes the first item in the left list to be moved. And, it will accomplish this through a postback, not Ajax.

  1. Create GUI
  1. Add a Button but make sure it is outside the UpdatePanel. Supply the Text shown on the right, “Move First”. The Source should show that the Button is outside the UpdatePanel:

</asp:UpdatePanel// Ends UpdatePanel

asp:ButtonID="btnMoveFirst"runat="server"

OnClick="btnMoveFirst_Click"Text="MoveFirst"/>

</div

  1. Add a click event handler that moves the first item in the left ListBox to the right ListBox. Thus, repeatedly pressing the button will move the names over to the right one-at-a-time.
  1. Run and Test (Ctrl+Shift B, Ctrl+F5). You should see the tab flicker when the event is fired and there will still be a delay of 3 seconds, but the UpdateProgress from Stage 3 will not be shown. The flicker of the tab shows that the button is not using Ajax.

Stage 5 – Add a Trigger

Next, we will change the post-back button (which is outside the UpdatePanel) to use Ajax to call the click event. We do this by defining a trigger.

  1. Make Button use Ajax
  1. Select the UpdatePanel (click the tag at the top of the panel).
  2. Choose the Triggers property and the dialog shown on the right will appear.
  3. Choose: Add from the bottom left, and then supply the values shown on the right and click OK.
  1. Run and Test (Ctrl+Shift B, Ctrl+F5). Now, you should not see the tab flicker. The Button outside the UpdatePanel is triggering an Ajax call to the click event-handler.

Stage 6 – Use the Timer Control

The Timer is an Ajax control that is used to call a method (the Tick event) on the server on a periodic basis, say every 2 seconds. Here, we will use it to display and update the time every 2 seconds.

  1. Add a Timer Control
  1. Inside the UpdatePanel, just above the two ListBoxes, add a Label (as shown on the right) and give it the ID: lblTime.
  2. Add a Timer from the Ajax Extensions group in the Toolbox (no need to change the ID). The Timer is a component and is not shown at runtime.
  3. Set the Interval property for the Timer to 2000 (which represents 2 seconds).
  4. In Design view, double-click the Timer to create the Tick event handler. This event will be called every 2 seconds (as specified in the Interval from the last step). The event will update the time. Supply the code shown below:

protectedvoid Timer1_Tick(object sender, EventArgs e)

{

lblTime.Text = DateTime.Now.ToLongTimeString();

}

  1. Run and Test (Ctrl+Shift B, Ctrl+F5). Make sure the time is updating and everything else works.

Stage 7 – Wrapping Up and Posting to Lucius

  1. Upload to Lucius
  1. RDP to Lucius.
  2. Copy your local Lab5folder to your root folder on Lucius (c:\students\yourID).
  1. Test
  1. Open a browser that is NOT on Lucius and pull up your page (lucius.valdosta.edu/yourID/lab5). Test thoroughly.
  2. Do you have a link (that works) from your course home page to the home page for Lab 5?
  3. Do you have a link (that works) from your home page for Lab 5 to your course home page?
  1. Log off Lucius

You’re done!

1