Lesson 11:
jQuery

Introduction

This week in Chapter 11: jQuery you will learn about one of the most popular JavaScript libraries, jQuery. jQuery fills a lot of gaps as your author will explain. I first started using it years ago, primarily to do a lot of the things now possible with CSS3. Prior to recent developments within the CSS3 working group at the W3C, animation and advanced page styling like alternating row colors in a table were only available using libraries like jQuery. It still makes many Web development tasks all a lot simpler especially when comes to programmatic selection of elements within a page for dynamically altering their content or format based on user input.

I hope you will find this assignment intriguing as it demonstrates the power and simplicity that is jQuery. You will again modify your ContactForm user control to spiff it up with a little animation and to add unobtrusive JavaScript Validation. There is an area of confusion that you may encounter when developing this weeks updates to your site, which is that by following the steps in the first Try It Out on page 390 you will use the NuGet package manager to install (copy) the most recent versions of jQuery to the Scripts folder off the root of your site - problem is that the most recent version is different than the version shown in your text book. What this means to you is that you need to remember to replace any code references to the actual jQuery file with the the jQuery filename in your Scripts folder.

Image of my scripts folder with the newer versions of jQuery.
Figure 1: This image shows the Scripts folder after using NuGet package Manager to install jQuery for the Planet Wrox site.

For example in figure 1 you will see my Scripts folder. The version that was installed when I completed this assignment is jquery-2.1.0 That means the filename I need to type in any src or path references used to refer to the name of the jQuery file should be jquery-2.1.0.min.js. Don't worry about the file differences right now - the min version will work best for this assignment. Notice the addition of the jQuery intellisense file -very cool!

Image of the jQuery reference used in your text book.
Figure 2: This image displays the jQuery filename reference used by your text book - you will need to change this to match the name of the file your site is using. Using the example from figure 1 it should be, Path = "~/Script/jquery-2.1.0.min.js"

Assignment

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

  • Read all of Chapter 11: jQuery in your text book to learn to use NuGet to add the jQuery JavaScript library to your site and how to use jQuery to enhance the aesthetics and interactivity of your Contact page.
  • Add the jQuery JavaScript library to your Scripts folder off the root of your Planet Wrox Web site using the NuGet package installer.
  • Add a ScriptReference control to the Frontend.master file in the MasterPages folder off the root of your site.
  • Add an additional ContentPlaceHolder control with the ID of cpClientScript to the Frontend.master page in the MasterPages folder off the root of your site.
  • Add the .Attention  rule to the style sheets for your two themes.
  • Add two animations to your Contact.aspx file in your About folder off the root of your site.
  • Add a Global.asax file to the root of your Web site to register jQuery for your entire Planet Wrox application (Web site) in order to facilitate the addition of unobtrusive JavaScript validation to your Contact.aspx page.
  • Publish the following to your student folder on the Student Web server:
    • The DarkGrey.css and Monochrome.css files from their corresponding App_Theme folder off the root of your site.
    • The Scripts folder from 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 ContactForm.ascx file in the Controls folder off the root of your site.
    • The Frontend.master file in your MasterPages folder off the root of your site.
    • The Global.asax file in the root of your site.
    • The Web.config file in 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 the Contact user control along with the Please Wait . . . spinning GIF image slide up after clicking the Send button in your control in either IE (works in 11), Apple Safari, or Firefox - I have not been able to get the animated Message Sent box to work in Google Chrome or Opera. The form slide up does not appear to work in Opera - but does slide up in Chrome.
  • 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 Using NuGet to Install Packages on page 374 - 375 to do the following:

  • Add the jQuery JavaScript library to your Scripts folder off the root of your Planet Wrox Web site using the NuGet package installer.

Step 2 Complete step1 and step 2 in the Try It Out Your First jQuery Page on page 377 to do the following:

  • Add a ScriptReference control to the Frontend.master file in the MasterPages folder off the root of your site.

Step 3 Complete steps 1, 2, and 3 in the Try It Out Using Basic Selectors on pages 383 - 384 to do the following:

  • Add an additional ContentPlaceHolder control with the ID of cpClientScript to the Frontend.master page in the MasterPages folder off the root of your site.

Step 4 Complete all the steps in the Try It Out Animating the Contact Form on pages 395 - 397 to do the following:

  • Add two animations to your Contact.aspx file in your About folder off the root of your site.

Step 5 Complete all the steps in the Try It Out Enabling Unobtrusive JavaScript Validation on page 399 - 401 to do the following:

  • To register jQuery for your entire Planet Wrox application (Web site) in order to enable unobtrusive JavaScript validation in your Contact.aspx page.

Step 6 Publish the following to your student folder on the Student Web server.

  • The DarkGrey.css and Monochrome.css files from their corresponding App_Theme folder off the root of your site.
  • The Scripts folder from 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 ContactForm.ascx file in the Controls folder off the root of your site.
  • The Frontend.master file in your MasterPages folder off the root of your site.
  • The Global.asax file in the root of your site.
  • The Web.config file in the root of your site.

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

Step 7 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; the entire ContactForm control and the spinning Please Wait . . . GIF image should slide up to the top of the Contact.aspx page with the form disappearing and only the spinning GIF image remaining. Once the email submission is complete you should see an animated Message Sent box appear on the screen as shown in figure 1.

Image of the Animated Message Sent box.
Figure 1: The animated Message Sent box that should appear after the email is finished sending.

Step 8 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 ContactForm user control and try to send its contents via email using the Send button on your Contact Web form. The send email step must complete successfully, meaning: the Please Wait . . . GIF and the ContactForm.ascx user control must slide to the top of the Contact.aspx page with the form control disappearing - leaving only the Please Wait . . . animated GIF image behind until it disappears and is replaced by the animated Message Sent box which must also animate correctly (width value changes) for you to get full credit for this assignment!

Please remember to delete your eml file when you are done testing your assignment. Use the instructions below to delete your eml file.

Please email me if you have any questions at all!

⇑Table of Contents

Lesson Summary

In this lesson you learned how to:

  • Use jQuery to enhance your web pages including adding rich visual effects and animations
  • Use NuGet to add new packages to your website
  • Leverage jQuery to enhance the ASP.NET validation framework

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

⇑Table of Contents