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:
To use your bundle in View:
Execute the jQuery script when all elements in HTML are loaded –

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

var myname=$(‘#myname’).val();
One way to achieve “unobstrusive” –
(1) In event-handler.js: has the javascript file defined
(2) In HTML, include the js file:
Working with Ajax
Page 118
@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?”,
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.
(2) Outside of that DIV tag, add another DIV that can be used to display images/text during the async process.
(3) Change the Html form to Ajax Form; also add options for the Ajax Form:
(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)
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,
(3) View – Display the Ajax Link
(4) Link is displayed
(5) When clicked, (the posting URL is /Pet/GetPhoto/Hydrangeas), 
(6) This is the View of GetPhoto – an HTML markup for image
(7) In the browser, the HTML return replaces anything inside the DIV tag  thus the images is displayed.
Page 124
Implementing Ajax Callback
Flow of an Ajax call and Ajax Option/Functions available:
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.
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)
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 –
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
(2) Create a new Link in View
(3) Add the javascript
So now you can get the image using MVC Ajax or jQuery Ajax
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:
Caution: Do not return JSON in GET method!!! Limit it for POST method.

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


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