Scribd
Upload
19 views22 pages

Microsoft Official Course: Using Javascript and Jquery For Responsive MVC 4 Web Applications

Uploaded by

humiss545
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
19 views22 pages

Microsoft Official Course: Using Javascript and Jquery For Responsive MVC 4 Web Applications

Uploaded by

humiss545
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

Microsoft Official

Course
Module10

Using JavaScript and jQuery for


Responsive MVC 4 Web
Applications
Module Overview

Rendering and Executing JavaScript Code


• Using jQuery and jQueryUI
Lesson 1: Rendering and Executing
JavaScript Code

Adding JavaScript Files


Calling JavaScript Procedures
JavaScript Libraries
Using Content Delivery Networks for
JavaScript Libraries
Using the NuGet Tool to Add Packages
• Demonstration: How to Use NuGet to Add a
JavaScript Library
Adding JavaScript Files

• You can add JavaScript code to add interactive


functionalities to webpages
<script type="text/javascript">
function HelloWorld() {
alert('Hello World');
}
</script>

• Adding JavaScript code involves:


• Adding 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
Calling JavaScript Procedures

• You can call JavaScript functions by using script


blocks:
• Define the JavaScript function in a script block
• Reference the JavaScript file in HTML pages
<script type="text/javascript">
HelloWorld()
</script>

• You can also use events to trigger JavaScript


functions:
• Use the onclick event to initiate the JavaScript
<input type="button" value="Hello" onclick="HelloWorld();" />
function assigned to an HTML file
JavaScript Libraries

JavaScript libraries:
• Help reduce the amount of code you need to
write
• Help reduce the time taken to debug an
application
• Help make web applications more interactive

Some commonly used JavaScript libraries


include:
• jQuery
• jQuery UI
• jQuery Mobile
• jQuery Validation
• jQuery Cycle
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
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
Demonstration: How to Use NuGet to Add
a JavaScript Library

In this demonstration, you will see how to:


1. Install the jQueryUI package by using NuGet
Package Manager
2. Locate the supporting files for the package in
your application
3. Link to a script file in a template view
Lesson 2: Using jQuery and jQueryUI

Introduction to jQuery
Linking to jQuery Libraries
Accessing HTML Elements by Using jQuery
Modifying HTML Elements by Using jQuery
Calling a Web Service by Using jQuery
Introduction to jQueryUI
• Demonstration: How to Add a jQueryUI
Widget
Introduction to jQuery

• Characteristics of jQuery:
• It is a cross-browser JavaScript library
• It includes two companion modules—jQuery UI
and jQuery Mobile

• Benefits of using jQuery:


• It reduces the amount of code that you need to
write
• It reduces the development time of application
Linking to jQuery Libraries

Features of jQuery Libraries:


• jQuery Original Version:
• Is the uncompressed version of jQuery
• Is optimized for development and debugging

• jQuery Minified Version:


• Is the compressed version of jQuery
• Is optimized for production

• Bundling:
• Combines multiple JavaScript libraries into a single
HTTP request
•Minification:
• Compresses code in JavaScript files
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(event)
$("#HelloButton").click(function respond
{ to
eventsalert("Hello World");
});

• Place the jQuery code in the


Modifying HTML Elements by Using jQuery

jQuery functions include:

• The val function:


o Allows to get or set the value of an HTML element

• The css function:


o Allows to get or set the inline CSS style
associated with an HTML element

• The addclass function:


o Assigns the CSS class to an HTML element
Calling a Web Service by Using jQuery

The ajax function:

• Helps perform calls to web services

• Helps obtain the data returned from web


services

• Includes parameters such as type, url,


data, and contentType
Using the ajax Function

$.ajax({
type: "POST",
dataType: "json",
url: "Customer.asmx/GetCustomerInfo",
data: "{'ID': '123'}",
contentType: "application/json;" +
"charset=utf-8",
success: function (msg) {
alert("Data Saved: " + msg);
},
failure: function (msg) {
alert(msg);
}
});
Introduction to jQueryUI

jQuery UI is a library that contains widgets,


effects, and utilities:
• jQuery Widgets:
o UsingjQuery functions, you can add widgets such as
auto-complete boxes, buttons, date-pickers, dialog
boxes, and menus to your webpage

• jQuery Effects:
o Using jQuery functions, you can add effects such as
color animations, class animations, appear, slide down,
toggle, and hide and show

• jQuery Utilities:
o Using
the Position jQuery functions, you align your
webpage content
Demonstration: How to Add a jQueryUI
Widget

In this demonstration, you will see how to:


1. Use jQueryUI widgets in an MVC view
2. Use the Accordion widget to create an
interactive display
Lab: Using JavaScript and jQuery for
Responsive MVC 4 Web Applications

Exercise 1: Creating and Animating the


Slideshow View
• Exercise 2: Optional—Adding a jQueryUI
ProgressBar Widget
Logon Information
Virtual Machine: 20486B-SEA-DEV11
User name: Admin
Password: Pa$$w0rd

Note: In Hyper-V Manager, start the MSL-


TMG1 virtual machine if it is not already
running.
Estimated Time: 40 minutes
Lab Scenario

You have been asked to add a slideshow page to the web


application that will show all the photos in the database.
Unlike the All Photos gallery, which shows thumbnail
images, the slideshow will display each photo in a large size.
However, the slideshow will display only one photo at a time,
and cycle through all the photos in the order of ID.
You want to use jQuery to create this slideshow because you
want to cycle through the photos in the browser, without
reloading the page each time. You also want to animate slide
transitions and show a progress bar that illustrates the
position of the current photo in the complete list. You will use
jQueryUI to generate the progress bar.
Begin by importing a partially complete view that will display
all photos simultaneously in the correct format. Then, change
styles and add jQuery code to the application to create your
Lab Review

What is the use of adding the two links to the


_MainLayout.cshtml file in Task 1 of Exercise
2?
• You added <script> tags to the
_MainTemplate.cshtml file to enable
jQueryUI. Is this the optimal location for this
link?
Module Review and Takeaways

• Review Question(s)

You might also like