Jon Galloway | Tech Evangelist Christopher Harrison | Head Geek

1. 05 | Integrating JavaScript and MVC 4 Jon Galloway | Tech Evangelist Christopher Harrison | Head Geek

2. Module Overview • Using Ajax and Partial Page Updates • Rendering and Executing JavaScript Code

3. Lesson 1: Using AJAX and Partial Page Updates • Why Use Partial Page Updates? Using AJAX in an MVC 4 Web Application

4. Why Use Partial Page Updates? • Partial page updates: • Allow updates of individual sections of a webpage, during postback • Increase the responsiveness of a web application Request for ASP.NET Page User Request ASP.NET Engine Download full HTML ASP.NET Pages Request for changed content Refresh Section Download only updated HTML

5. Using AJAX in an MVC 4 Web Application To implement AJAX in your web application: • Create your web application without AJAX • Add or modify views, to render only the specific sections that you want to update on the webpage • Update the ViewController class to return the PartialView class

6. Partial Page Update Form

7. Lesson 2: Rendering and Executing JavaScript Code • Adding JavaScript Files Using Content Delivery Networks for JavaScript Libraries Using the NuGet Tool to Add Packages Introduction to jQuery • Accessing HTML Elements by Using jQuery • Introduction to jQueryUI

8. Adding JavaScript Files • Add the JavaScript code to HTML • Defining the JavaScript code in JavaScript files: • You can define JavaScript code in a JavaScript file • Reference the JavaScript file in multiple HTML files

9. Using Content Delivery Networks for JavaScript Libraries Content Delivery Network (CDN): • Is a group of geographically distributed servers • Helps host contents for web applications Microsoft Ajax CDN hosts popular libraries such as: • jQuery • jQuery UI • jQuery Mobile • jQuery Validation • jQuery Cycle • jQueryDataTables • Ajax Control Toolkit • ASP.NET Ajax • ASP.NET MVC JavaScript Files

10. Using the NuGet Tool to Add Packages • NuGet packages help add JavaScript libraries to your web application • While using Microsoft Visual Studio 2012, you can: • Search for a NuGet package in the NuGet Store • Select the package that you want to use • On the Manage NuGet Packages page, click Install

11. Introduction to jQuery Characteristics of jQuery: • It is a cross-browser JavaScript library Benefits of using jQuery: • It reduces the amount of code that you need to write • It reduces the development time of application

12. Accessing HTML Elements by Using jQuery You can use the following selector to select elements by element name, id, or CSS class: $(element name|#id|.class) After accessing the HTML elements: • Modify the attributes on the elements • Define event handlers to respond to events • Place the jQuery code in the document.readyevent

13. Introduction to jQueryUI • jQuery UI is a library that contains widgets, effects, and utilities: • jQueryUIWidgets: • Using jQueryUIfunctions, you can add widgets such as auto-complete boxes, buttons, date-pickers, dialog boxes, and menus to your webpage • jQueryUIEffects: • Using jQueryUI functions, you can add effects such as color animations, class animations, appear, slide down, toggle, and hide and show • jQueryUIUtilities: • Using the Position jQueryUIfunctions, you align your webpage content

14. Demonstration: How to Add a jQueryUI Widget