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

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

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 User Request ASP.NET Engine ASP.NET Pages Refresh Section Request for ASP.NET Page Download full HTML Request for changed content Download only updated HTML

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

6. DEMO 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 jQuery DataTables 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.ready event

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

14. DEMO Demonstration: How to Add a jQueryUI Widget

15. ©2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.