1. Social Media And Global Computing Managing MVC With jQuery and AJAX

2. Why jQuery
Webpages that are filled with many controls and special areas on the webpage are often in need of changes to a single control or a single area of the webpage, and doing the update should not require the entire page to be reloaded. You can do these types of updates with Javascript, but it is often difficult to work through all of the Javascript Document Object Model (DOM).

3. Why jQuery
jQuery is a set of Javascript libraries that makes it much simpler to make changes to objects and areas on a webpage without requiring an update for the entire page.

4. Possible jQuery Modifications

5. jQuery Functions Function Usage Example Description css(style, value)
css('background', '#ff0000');
Apply a CSS style to an element
hide()
$('div').hide();
Hide all DIV elements on the page (display:none)
show()
$('div').show();
Show all DIV elements on the page (display:block)
prev()
$('div').prev();
Go to previous child, placed side by side in current parent
next()
$('div').next();
Go to next child within the current parent
parent()
$('div').parent();
Go to the parent of the currently selected element
html()
$('div').html('<p>new</p>');
Replace the actual HTML content of an element
text()
$('div').text('new text');
Replace the text within an element
animate()
$('div').animate({backgroundColor: "#ff0000"}, 1000);
Animate background color to red i

6. Why AJAX
Before MVC, when using WebForms the controls on the webpage would use “Postback” functions in Javascript to avoid having to reload the entire page when small changes were made on a page that required getting data from the server. But with MVC, the WebForm controls and their “Postback” functions are no longer being used. AJAX provides another way of producing the same WebForms functionality and more.

7. Why AJAX
AJAX is a set of libraries that allows you to get data from the server and present it into the webpage without having to reload the entire page.
Ajax.ActionLink() renders a link tag, similar to Html.ActionLink(). When clicked it fetches and injects new content into the existing HTML page.
Ajax.BeginForm() renders a HTML form, similar to Html.BeginForm(). When submitted it fetches and injects new content into the existing HTML page.

8. Why AJAX
The following is a general AJAX function call to load a response from a URL (aka MVC function call), while sending it data as name/value pairs. If the call is a success or a failure different code is run for that result:
$.ajax({
type: "GET",
url: '/Home/Function',
data: { varname: varvalue },
success: function (response) {
// What to do with response; },
error: function (e) {
alert('Error: ' + e.responseText); }
});

9. jQuery and AJAX Libraries
To use jQuery and AJAX you need to call these libraries in the header of your HTML file, so it makes sense to put these calls into the Site Master Templates:
<script src="/Scripts/jquery js" type="text/javascript"></script>
<script src="/Scripts/ jquery.unobtrusive-ajax.js" type="text/javascript"></script>