Learn your way! Get started

ASP.NET 4 AJAX and jQuery Using Visual C#

with expert Don Kiely


Course at a glance

Included in these subscriptions:

  • Dev & IT Pro Video
  • Dev & IT Pro Power Pack

Release date 4/27/2011
Level Advanced
Runtime 12h 11m
Closed captioning N/A
Transcript N/A
eBooks / courseware Included
Hands-on labs Included
Sample code Included
Exams Included


Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More



Course description

AJAX is based on a collection of open and standards-based technologies that can give Web pages you build a responsiveness that rivals what you get in desktop applications. The course starts out with an exploration of the fundamentals of AJAX. Then you’ll go through a few of the more interesting features in JavaScript that will help you write code that runs in the browser. Next up is an introduction to the five server-side controls that you can use in a Web forms page to reduce the amount of data that has to move between client and server. Then you’ll explore some of the techniques you can use to create applications that give users a good experience with your Web application. Next you’ll look at the AJAX Control Toolkit, a collection of server-side controls and extenders that do a lot of the work that you used to have to write reams of JavaScript code to accomplish.

Prerequisites

This course assumes that you are familiar and experienced with Microsoft’s .NET Framework and ASP.NET development tools. You should be familiar with Web development and understand how HTTP and HTML work to produce Web pages for the user. You should have experience writing applications with ASP.NET 3.5, 4.0, or later Web forms, and be familiar with how ASP.NET processes page requests, and have strong experience with .NET Framework 3.5, 4.0, or later programming. You should have experience with Visual Studio 2008, 2010, or later for building Web application projects. Experience with building database applications using these tools will be helpful, although not strictly necessary. You should also have some experience with writing JavaScript.

Learning Paths

This course is part of the following LearnNowOnline SuccessPaths™:
Building ASP.NET Web Applications

Meet the expert

Don Kiely is a featured instructor on many of our SQL Server and Visual Studio courses. He is a nationally recognized author, instructor, and consultant specializing in Microsoft technologies. Don has many years of teaching experience, is the author or co-author of several programming books, and has spoken at many industry conferences and user groups. In addition, Don is a consultant for a variety of companies that develop distributed applications for public and private organizations.

Course outline



Module 1

Fundamentals (30:45)
  • Introduction (04:59)
  • Solution is Ajax (02:12)
  • XMLHttpRequest (01:55)
  • Demo: XHR (13:48)
  • Web From Processing (01:15)
  • ASP.NET Page Processing (01:27)
  • ASP.NET AJAX Processing (03:45)
  • Ajax & Visual Studio (02:10)
  • Debug and Explore Ajax (02:05)
  • Demo: Postbacks (-03:-26)
  • Summary (00:30)
JavaScript (33:53)
  • Introduction (01:00)
  • JavaScript, the Language (02:11)
  • Object Orentation (02:28)
  • DHTML (00:45)
  • getElementById() (00:57)
  • Arrays (02:04)
  • innerHTML Property (00:45)
  • style Property (01:16)
  • Multi-Browser Support (02:07)
  • JavaScript Object Notation (01:40)
  • JSON Rules (1) (00:57)
  • JSON Rules (2) (01:34)
  • JSON Rules (3) (01:03)
  • Using JSON (01:21)
  • JavaScript Objects (01:32)
  • Enclosures (03:16)
  • Prototype (03:25)
  • Two Faces of ASP.NET AJAX (00:57)
  • Server-Side AJAX (01:53)
  • Client-Side AJAX (01:55)
  • Summary (00:38)

Module 2

Server Side Ajax (14:00)
  • Introduction (01:46)
  • Ajax Server-Side Controls (01:39)
  • ScriptManager (02:12)
  • Demo: ScriptManager (03:22)
  • Property Collections (02:20)
  • ScriptReference (01:37)
  • ServiceReference (00:56)
  • Demo: Script Service (10:25)
  • Debug Mode (-10:-48)
  • Summary (00:27)
Update Panel (38:14)
  • Introduction (01:01)
  • UpdatePanel Default Behavior (06:02)
  • Demo: UpdatePanel (09:51)
  • Triggers (01:50)
  • Demo: Async Trigger (03:38)
  • Other Controls (00:25)
  • ScriptManagerProxy (02:18)
  • UpdateProgress (01:02)
  • Demo: UpdateProgress (06:06)
  • Timer Control (00:46)
  • Demo: Timer (04:42)
  • Summary (00:28)

Module 3

Rich Ajax Applications (19:17)
  • Introduction (01:33)
  • Demo: UpdateMode (04:02)
  • Nesting UpdatePanels (01:07)
  • Demo: Nesting (03:41)
  • Minimizing Data Transfer (03:41)
  • Using Page Methods (02:49)
  • Demo: Web Service Call (09:48)
  • Server-Side Page Method (00:57)
  • Demo: Page Method (-09:-04)
  • Summary (00:39)
Ajax History (19:42)
  • Introduction (00:44)
  • Browser Back Button (00:42)
  • Demo: Browser History (02:10)
  • Use Ajax History (01:06)
  • Demo: Ajax History (14:40)
  • Summary (00:16)

Module 4

Ajax Control ToolKit (30:55)
  • Introduction (01:20)
  • Control Extenders (02:06)
  • Control vs. Extender (01:22)
  • Server and Client Controls (01:37)
  • Server or Client Controls? (01:47)
  • Add Ajax Control Toolkit (03:37)
  • Toolkit Controls and Extenders (00:32)
  • Accordion Control (03:37)
  • AlwaysVisibleControlExtender (01:23)
  • Demo: Always Visible Extender (13:27)
  • Summary (00:02)
More Toolkit Controls (41:06)
  • Introduction (00:15)
  • AutoCompleteExtender (00:41)
  • Demo: Auto Complete (11:22)
  • FilteredTextBoxExtender (00:23)
  • Demo: Filtered TextBox (02:02)
  • ListSearchExtender (01:36)
  • Demo: List Search (07:37)
  • MaskedEditExtender (01:12)
  • Demo: Masked Edit (04:04)
  • PagingBulletedListExtender (00:36)
  • Demo: Paging Bulleted List (04:24)
  • TextBoxWatermarkExtender (00:46)
  • Demo: TextBox Watermark (01:30)
  • PasswordStrength Control (00:33)
  • Demo: PasswordStrength (03:20)
  • Summary (00:39)
Toolkit Script Manager (36:36)
  • Introduction (01:47)
  • Overview (01:00)
  • Demo: ScriptManager (02:22)
  • Demo: UpdatePanel Animation (04:05)
  • Demo: ScriptResources (01:49)
  • Demo: ToolkitScriptManager (06:26)
  • Demo: Combined Scripts (18:47)
  • Summary (00:17)

Module 5

Intro to jQuery (39:20)
  • Introduction (02:50)
  • The Microsoft Ajax Library (02:16)
  • Ajax Library Components (03:22)
  • The jQuery Library (04:37)
  • Benefits of jQuery (06:56)
  • Which Version (03:31)
  • Progressive Enhancement (04:30)
  • Delivering jQuery to the Browser (01:04)
  • Hosted on Your Site (02:00)
  • Use a Content Delivery Network (01:57)
  • Using a CDN (02:36)
  • Compressed & Uncompressed jQuery (01:11)
  • Demo: Versions of jQuery (02:13)
  • Summary (00:12)
Using jQuery (26:22)
  • Introduction (00:48)
  • Demo: Intro to jQuery (03:43)
  • Demo: Review the Code (04:25)
  • A jQuery Statement (02:17)
  • The jQuery Function (04:05)
  • Waiting for the Page to Load (02:14)
  • Demo: Positioning the Script (08:31)
  • Summary (00:16)
Selectors Wrapped Sets Chains (01:00:54)
  • Introduction (00:58)
  • Demo: Selectors Test Page (03:28)
  • Demo: Selectors Source Code (03:17)
  • Using jQuery Selectors (03:12)
  • Simple Selectors (00:32)
  • Demo: Selectors (09:20)
  • Demo: Selector Flexability (08:50)
  • Attribute Value Selectors (02:02)
  • Demo: Selector Alt Tags (10:04)
  • jQuery Filters (00:57)
  • Demo: Filters (09:35)
  • Demo: Filter Images (02:39)
  • Other Filters (01:41)
  • Wrapped Sets and Chaining (03:37)
  • Summary (00:35)

Module 6

Work with Page Elements (01:02:16)
  • Introduction (01:44)
  • Work with Page Elements (01:52)
  • Demo: Modifying CSS (22:02)
  • Hiding and Showing Elements (00:29)
  • Demo: Hiding/Showing Elements (02:09)
  • Demo: Hiding Elements Code (06:26)
  • Changing Element Content (02:09)
  • Demo: Changing Content (08:27)
  • Adding and Removing Elements (03:12)
  • Demo: Handling Disabled JS (13:18)
  • Summary (00:23)
Use Animation and Effects (42:15)
  • Introduction (02:14)
  • Hovering Effects (03:37)
  • Demo: Hovering Effects (01:22)
  • Demo: Reviewing the Code (05:57)
  • Hiding and Showing Content (01:02)
  • Demo: Simple Animations (02:24)
  • Demo: Alt Show Hide Method (04:54)
  • Demo: Multiple Animations (02:53)
  • The Animate Method (02:18)
  • Forms of animate() (01:58)
  • Limitations to animate() (01:40)
  • Demo: The animate Method (11:23)
  • Summary (00:28)
The jQuery UI Library (37:00)
  • Introduction (01:38)
  • jQuery User Interface Library (02:47)
  • Downloading the jQuery UI Library (00:38)
  • Demo: The jQuery Website (06:44)
  • Demo: Using the UI Lib (00:44)
  • Creating a jQuery UI Lib Theme (01:08)
  • Demo: Creating a UI Lib Theme (07:59)
  • Building a jQuery UI Page (01:17)
  • Demo: Building a jQuery UI Page (13:18)
  • Summary (00:43)

Module 7

Ajax Made Simple with jQuery (37:41)
  • Introduction (01:56)
  • Server Side of Ajax (01:13)
  • Demo: Ajax Services (04:56)
  • Ajax Made Simple with jQuery (00:51)
  • The load Method (02:43)
  • Content From HTML Files (00:37)
  • Demo: Content from HTML Files (06:56)
  • Demo: All.html (04:54)
  • Content From a Web Service (00:44)
  • Demo: Content from Web Service (12:21)
  • Summary (00:27)
Gets Posts and the Ajax Method (38:43)
  • Introduction (00:58)
  • GET versus POST in load method (00:59)
  • Demo: GET versus POST (02:20)
  • The get and post Methods (00:53)
  • Demo: get and post Methods (03:42)
  • Taking Full Control: ajax Method (02:22)
  • Demo: ajax Method (07:53)
  • Setting Global ajax Method Options (01:21)
  • Demo: ajaxSetup (03:08)
  • Ajax Local and Global Events (02:57)
  • Demo: Ajax Events (11:34)
  • Summary (00:30)

Module 8

Replacing the Ajax Method (31:30)
  • Introduction (01:44)
  • The Ajax Control Toolkit (03:06)
  • Watermarking (01:01)
  • Demo: Watermarking (05:23)
  • Rounded Corners (00:55)
  • Demo: Rounded Corners (03:18)
  • Color Picker (00:52)
  • Demo: Color Picker (07:35)
  • Rich Text Editor (01:14)
  • Demo: Rich Text Editor (05:22)
  • Summary (00:55)
Microsoft Extensions (42:08)
  • Introduction (00:28)
  • Microsoft Extensions (01:34)
  • jQuery Templates (02:17)
  • Demo: jQuery Templates (11:52)
  • jQuery Data Link (01:48)
  • The Data Link Plugin (01:35)
  • Demo: jQuery Data Link (08:18)
  • jQuery Global (00:59)
  • Demo: jQuery Global (12:48)
  • Summary (00:25)
Validation & Custom Extensions (48:35)
  • Introduction (01:46)
  • Demo: jQuery Validation (13:04)
  • Building Your Own Extensions (01:15)
  • Plugin Conventions (03:18)
  • Demo: Building Your Own Extension (07:04)
  • Plugin Framework (00:53)
  • Plugin Framework Structure (02:35)
  • Demo: Basic Plugin (09:39)
  • Demo: Customizable Plugin (08:33)
  • Summary (00:25)