Scribd Logo
Upload

Welcome to Scribd!

  • 41 views

    Implementing Advanced Ajax in A Web Application

    Uploaded by

    Guadalupe Santiago
    This document covers implementing advanced Ajax techniques in an ASP.NET MVC web application, including using the Microsoft Ajax and jQuery libraries to make asynchronous calls, and handling Ajax events. It includes lessons on using specific jQuery methods like load, get, and post for Ajax calls, and event handlers like ajaxSend, ajaxComplete, and ajaxError. The document concludes with a lab scenario to apply these skills to an example application.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd

    Implementing Advanced Ajax in A Web Application

    Uploaded by

    Guadalupe Santiago
    41 views19 pages
    This document covers implementing advanced Ajax techniques in an ASP.NET MVC web application, including using the Microsoft Ajax and jQuery libraries to make asynchronous calls, and handling Ajax events. It includes lessons on using specific jQuery methods like load, get, and post for Ajax calls, and event handlers like ajaxSend, ajaxComplete, and ajaxError. The document concludes with a lab scenario to apply these skills to an example application.

    Original Description:

    Original Title

    10264A_13.ppt

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document covers implementing advanced Ajax techniques in an ASP.NET MVC web application, including using the Microsoft Ajax and jQuery libraries to make asynchronous calls, and handling Ajax events. It includes lessons on using specific jQuery methods like load, get, and post for Ajax calls, and event handlers like ajaxSend, ajaxComplete, and ajaxError. The document concludes with a lab scenario to apply these skills to an example application.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    41 views19 pages

    Implementing Advanced Ajax in A Web Application

    Uploaded by

    Guadalupe Santiago
    This document covers implementing advanced Ajax techniques in an ASP.NET MVC web application, including using the Microsoft Ajax and jQuery libraries to make asynchronous calls, and handling Ajax events. It includes lessons on using specific jQuery methods like load, get, and post for Ajax calls, and event handlers like ajaxSend, ajaxComplete, and ajaxError. The document concludes with a lab scenario to apply these skills to an example application.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    of 19

    Module 13

    Implementing 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


    Lesson 1: Implementing Ajax in ASP.NET MVC
    Pages Using Microsoft Ajax
    • Benefits of Using the Microsoft Ajax Library in MVC Pages

    • How to Use the Microsoft Ajax Library in MVC Pages


    Benefits of Using the Microsoft Ajax Library 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 Library in MVC
    Pages
    • Referencing the Microsoft Ajax Libraries

    • Using the MVC Ajax helper library function Ajax.ActionLink

    • Using the MVC Ajax helper library function Ajax.BeginForm


    Lesson 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 HTML into an
    area of the page.

    $('#result').load('ajax/test.html #container');

    • This is the simplest of all of the jQuery Ajax methods.


    jQuery.get Method
    • The jQuery.get method is used to make an asynchronous
    GET request to the server
    • Like the other jQuery Ajax methods, jQuery.get takes a
    URL, 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);
    }
    );
    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);
    }
    );
    jQuery.ajax Method
    • Low 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.
    Lesson 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

    jQuery Ajax Event Handlers

    .ajaxSend

    .ajaxComplete

    .ajaxError
    Lab: 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

    Logon information
    Virtual machine 10264A-GEN-DEV
    User name Student
    Password Pa$$w0rd

    Estimated time: 60 minutes


    Scenario
    Lab 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

    You might also like