Lesson 10:
ASP.NET AJAX

Introduction

This week in Chapter 10: ASP.NET AJAX you will learn how to use ASP.NET server controls to generate asynchronous calls to a Web server in order to unobtrusively update content on the client with flicker-free postbacks. Those of you who have completed the CSIS 125A Web Development - Level 2 course will recall that JavaScript is the primary client-scripting language used in modern-day Web pages. You might also recall from Chapter 1 of your text book and/or completion of CSIS 115a Web Development - Level 1 that HTTP, the protocol used by Web browsers and Web servers to communicate with each other, is a stateless protocol. Meaning that as soon as the Web server completes the client's request it disconnects and remembers nothing about the client or the transaction that just took place. A technology known as asynchronous JavaScript and XML (AJAX) solves this problem in a very simple yet elegant manner as you will see in this week's hands-on assignment.

Assignment

In order to receive full credit for this week's assignment you must complete the following:

  • Read all of Chapter 10: ASP.NET AJAX in your text book to learn to use ASP.NET to add AJAX features to your Web forms and/or controls.
  • Add an UpdatePanel control and an UpdateProgess control to your ContactForm.ascx control in the Controls folder off the root of your Website.
  • Add a ScriptManager control to your site's FrontEnd.master page.
  • Add an animated GIF image and a new CSS rule to your Monochrome and DarkGrey themes.
  • Publish to the following to your student folder on the IA.MSJC.EDU Web server:
    • The Controls folder from the root of your site
    • The App_Themes folders off the root of your site
    • The Contact.aspx file in your About folder off the root of your site with its code behind file.
    • The Frontend.master file in your MasterPages folder off the root of your site.
  • Verify that your Contact user control can email its form values to the SMTP server (the IA.MSJC.EDU/Email folder) and that Please Wait . . . spinning GIF image displays after clicking the Send button in your control in either Microsoft Edge, Google Chrome, Apple Safari, Opera, or Firefox.
  • Post the URL for the Contact.aspx Web form in your Website's About folder to Canvas for scoring by the due date listed in the Syllabus.

Instructions

Use the following step-by-step instructions for completing this week's assignment. Remember to use C# when copying code snippets from your text book.

Step 1 Complete all the steps in the Try It Out Flicker-free Pages - Putting It All Together on pages 346 - 348 to do the following:

  • Add an UpdatePanel control and an UpdateProgess control to your ContactForm.ascx control in the Controls folder off the root of your Website.
  • Add a ScriptManager control to your site's FrontEnd.master page.
  • Add an animated GIF image and a new CSS rule to your Monochrome and DarkGrey themes.

Step 2 Publish the following to your student folder on the Application("StudentWebServerName").

  • The Controls folder from the root of your site
  • The App_Themes folders off the root of your site
  • The Contact.aspx file in your About folder off the root of your site with its code behind file.
  • The Frontend.master file in your MasterPages folder off the root of your site.

Don't publish any other files or folders at this time.

Step 3 Using a Web browser on your computer, verify that you can still send email using your Contact form and that the spinning Please Wait . . . GIF image displays after you click the Send button and before the Message sent text appears.

e.g. type http://ia.msjc.edu/7-digit student ID number/About/Contact.aspx into your Web browser. Try sending your form, it should display a spinning Please Wait . . . GIF image like this one Image of the Please Wait . . . GIF. before you see the Message Sent  text.

Step 4 Post the URL for your updated Contact.aspx form to Canvas for scoring by the due date listed in the Syllabus.

Important - Please Read: When I test your submitted URLs for this assignment the first thing I will do is delete any files I find in the ia.msjc.edu/email folder, then I will complete your Contact Web form and try to send its contents via email using the Send button on your Contact Web form. The send email step must complete successfully and the Please Wait . . . GIF must display correctly for you to get full credit for this assignment!

Please email me if you have any questions at all!

⇑Table of Contents

Lesson Summary

In this lesson you learned how to:

  • Use the UpdatePanel control to avoid page flicker
  • Use the ScriptManager control that enables AJAX functionality
  • Use the UpdateProgress control to notify users about progress of an Ajax operation
  • Create WCF services that are accessible by your client-side

Congratulations, that's it for this assignment. You can get a head start on your next lesson by reading chapter 11 in your textbook.

⇑Table of Contents