Module 13

mplementing Advanced
Ajax in a Web Application
Module Overview
- Implementing Ajax in ASP.NET MVC Pages Using Microsoft
Ajax
- Implementing Ajax in ASP.NET MVC Pages Using jQuery
- Working with jQuery and Ajax Events
esson 1: Implementing Ajax in ASP.NET MVC
Pages Using Microsoft Ajax
- Benefits of Using the Microsoft Ajax ibrary in MVC Pages
- How to Use the Microsoft Ajax ibrary in MVC Pages
Benefits of Using the Microsoft Ajax ibrary in
MVC Pages
- Performance - Enables developers to build high-
performance, data-driven websites
- Interoperability - Allows developers to use it with any
server platform, and alongside jQuery
- Extensibility - Enables developers to build on top of the
library with ease
How to Use the Microsoft Ajax ibrary in MVC
Pages
- Referencing the Microsoft Ajax ibraries
- Using the MVC Ajax helper library function Ajax.Actionink
- Using the MVC Ajax helper library function Ajax.BeginForm
esson 2: Implementing Ajax in Asp.Net MVC
Pages Using jQuery
jQuery.load method
jQuery.get method
jQuery.post method
jQuery.ajax method
jQuery.load Method
- This method calls the server and loads the HTM into an
area of the page.
- This is the simplest of all of the jQuery Ajax methods.
$('#result').load('ajax/test.html #container'); $('#result').load('ajax/test.html #container');
jQuery.get Method
- The jQuery.get method is used to make an asynchronous
GET request to the server
- ike the other jQuery Ajax methods, jQuery.get takes a
UR, the object representing the data to pass with the
request, and the success callback
$.get("server/test ",
{ employeeId: 123, name: "John" },
function(data){
alert("Data Loaded: " + data);
}
);
$.get("server/test ",
{ employeeId: 123, name: "John" },
function(data){
alert("Data Loaded: " + data);
}
);
jQuery.post Method
- The POST verb is typically used to indicate that the
request is changing data on the server
- POST requests are never cached, unlike GET requests
$.post("/server/test ",
{ some: 'data', for: 'the request'},
function(data){
alert("Data Loaded: " + data);
}
);
$.post("/server/test ",
{ some: 'data', for: 'the request'},
function(data){
alert("Data Loaded: " + data);
}
);
jQuery.ajax Method
- ow level method used by all other Ajax methods in
jQuery.
- Takes a hash of parameters.
- url, type, data, and success are the most commonly used
parameters.
- The error parameter can also be used to create a custom
error handler.
esson 3: Working with jQuery and Ajax Events
- jQuery.ajaxSend Event Handler
- jQuery.ajaxComplete Event Handler
- jQuery.ajaxError Event Handler
- Demonstration: Working with jQuery Ajax Event Handlers
Using the jQuery.ajaxSend() Event Handler
- Users expect Feedback from the user interface (UI).
- Browsers do not provide feedback.
- It is up to the page developer to update the UI during an
Ajax request.
- The jQuery.ajaxSend event handler is typically used to
handle updates to the UI during an Ajax request.
Using the jQuery.ajaxComplete Event Handler
- The ajax.Complete event is raised when an Ajax request
has completed.
- This event is a good place to clean up any UI messages
that were displayed during the Ajax request.
Using the jQuery.ajaxError Event Handler
- A lot can go wrong when using Ajax to communicate with
the server:
Network errors
Server failure
Buggy code
- The jQuery.ajaxError event handler is where you should
provide error handlers.
Demonstration: Working with jQuery Ajax Event
Handlers
.ajaxSend .ajaxSend
.ajaxComplete .ajaxComplete
jQuery Ajax Event Handlers
.ajaxError .ajaxError
Notes Page Over-flow Slide. Do Not Print Slide.
See Notes pane.
Notes Page Over-flow Slide. Do Not Print Slide.
See Notes pane.
Notes Page Over-flow Slide. Do Not Print Slide.
See Notes pane.
Notes Page Over-flow Slide. Do Not Print Slide.
See Notes pane.
ab: Implementing Advanced Ajax for the
AdventureWorks Web Application
- Exercise 1: Using Microsoft Ajax in an MVC Page
- Exercise 2: Using jQuery in an MVC View
- Exercise 3: Handling Events
ogon information
Virtual machine 10264A-GEN-DEV
User name Student
Password
Pa$$w0rd
Estimated time: 60 minutes
Scenario
ab Review
- Why did you add the Ajax libraries to the Site.Master
master page?
- Why did you create a div element with an ID value of
featured-products?
Module Review and Takeaways
- Review Questions
- Common Issues and Troubleshooting Tips
- Real-world Issues and Scenarios
- Best Practices
- Tools