APRess ASP.NET MVC 4 (3)

Chapter 8: Ajax and jQuery
Use ScriptBundle and StyleBundle to bundle scripts/styles into one single file. (Include() method)
Bundles are added in the BundleConfig class in the app_start/BundleConfig.cs:
image
image
To use your bundle in View:
image
Execute the jQuery script when all elements in HTML are loaded –
$(document).ready(handler)
or
$().ready(handler)
or
$(handler)
or
$(document).ready(function(){
…..
});
or
$(function(){
…..
});

jQuery selector
$(‘#menu’): id
$(‘.selected’): class
$(‘h1’): tag
$(‘#menu ul’): descendants

var myname=$(‘#myname’).val();
alert(myname);
image
One way to achieve “unobstrusive” –
(1) In event-handler.js: has the javascript file defined
image
(2) In HTML, include the js file:
image
Working with Ajax
image
Page 118
AjaxHelper
@Html and @Ajax methods are very similar except that @Ajax are async.
This is a regular link
@Html.ActionLink(“This is a regular link”, “actionName”,”controllerName”)
This is an async link
@Ajax.ActionLink(“This an Ajax Link”,”actionName”,”controllerName”,
new AjaxOptions {
Confirm = “Are you sure?”,
HttpMethod=”Post”,
UpdateTargetId = “resultDiv”,
InsertionMode = InsertionMode.Replace
}))

Other options include: OnBegin, OnComplete, OnSuccess and OnFailure.
LoadingElementId and LoadingElementDuration are images displayed while process in ongoing.
To change a form to use Ajax/Async processing: (using the Send email form as an example)
(1) In your View, add a DIV tag around your form. The return result (a partial view) will completely replace this form.
image
(2) Outside of that DIV tag, add another DIV that can be used to display images/text during the async process.
image
(3) Change the Html form to Ajax Form; also add options for the Ajax Form:
image
(4) Change the controller so partial view (not full view) is returned. (Because in Ajax Form, we’re only replacing part of the screen with returned results)
image
Creating Ajax ActionLinks
Step by step (create an Ajax Action link, so when clicked, an image displays)
(1) You access the site by this URL:
http://localhost:50619/AjaxMessage/Send/Hydrangeas in which Hydrangeas is the paramater (id=Hydrangeas). You see the Send form with a link at the bottom
(2) In /AjaxMessage/Send controller,
image
(3) View – Display the Ajax Link
image
(4) Link is displayed
image
(5) When clicked, (the posting URL is /Pet/GetPhoto/Hydrangeas), 
image
(6) This is the View of GetPhoto – an HTML markup for image
image
(7) In the browser, the HTML return replaces anything inside the DIV tag  thus the images is displayed.
image
Page 124
Implementing Ajax Callback
Flow of an Ajax call and Ajax Option/Functions available:
image
Now, use these callback functions to prevent user clicking on the button multiple times!!!!!

In your Ajax Form, add two more ajax options using OnBegin and OnComplete.
image
At the end of the View file, add these two function to hide the while form (and hiding the button too). The form will be displayed again once the request is completed (but before OnSuccess or OnFailure)
image
The above is using MVC’s Ajax Helper to create a form that uses Ajax to send request – which is pretty straight forward and easy to handle. Next, using jQuery to make Ajax request. (Actually, MVC’s Ajax.Begin Form and Ajax.ActionLink() are translated into jQuery Ajax calls!! The information in the AjaxOptions provide everything jQuery needs to know to make an ajax call)
in jQuery, you can use $.ajax(), $.post() or $.get() to make ajax call.
But it’s better to use just one of them so it’s easier to remember –
$.ajax({
url: ‘”……”, // URL to which the request is sent ==> AjaxOptions.Url
type: “……”, // Post, Get, Delete, Put ==> AjaxOptions.HttpMethod
data: “……”, // data sent ==> Form fields
dataType: “……”, // data expected from the server; xml, json, jsonp, script, text or html
beforeSend: handlername, ==> AjaxOptions.OnBegin
complete: handlername, ==> AjaxOptions.OnComplete
success: handlername, ==> AjaxOptions.OnSuccess
error: handlername ==> AjaxOptions.OnFailure
});

Now create a link that use jQuery to download the pic –
(1) Add a new image file to your folder
image
(2) Create a new Link in View
image
(3) Add the javascript
image
So now you can get the image using MVC Ajax or jQuery Ajax
image
Working with JSON
Using Action to return method is simple –
(1) Set action method return type to JsonResult
(2) Create the object, and return it using Json(object)
For example:
image
Caution: Do not return JSON in GET method!!! Limit it for POST method.

If you must use GET, add a second parameter
image
Page 129

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s