.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> JQuery >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Ajax with jQuery

Posted By:Manning       Posted Date: November 24, 2011    Points: 200    Category: JQuery    URL: http://www.dotnetspark.com  

In this article author discuss the basics of using jQuery and how it can be used to make asynchronous calls to the server that can be processed by ASP.NET MVC.
 



jQuery has quickly become one of the most popular JavaScript libraries due to its simple yet powerful mechanisms for interacting with the HTML DOM. In this article, based on chapter 12 of ASP.NET MVC 3 in Action, the authors discuss the basics of using jQuery and how it can be used to make asynchronous calls to the server that can be processed by ASP.NET MVC.


Get 
40% off any version of 
ASP.NET MVC 3 in Action with the checkout code dnspark40. Offer is only valid through www.manning.com.


Working with JavaScript in web applications is becoming increasingly important because of the increased focus on having a rich-client experience. Unfortunately, working with raw JavaScript can be a demanding process. Different browsers have different features and limitations that can make writing cross-browser JavaScript a fairly involved process (for example, Internet Explorer uses a different mechanism for attaching events to elements than other browsers). In addition to this, navigating and manipulating the HTML DOM1 can be verbose and complex. This is where JavaScript libraries come in.


There are many popular JavaScript libraries today (including jQuery, Prototype, MooTools, and Dojo) all of which aim to make working with JavaScript easier and help to normalize cross-browser JavaScript functionality. For related examples, we'll be using the open-source jQuery library (http://jquery.com) that was initially released by John Resig in 2006.

jQuery has quickly become one of the most popular JavaScript libraries due to its simple yet powerful mechanisms for interacting with the HTML DOM. In fact, jQuery has become so popular that Microsoft have contributed several features to its codebase and provide official support for it as well as shipping as part of ASP.NET MVC's default project template.

In this article, we'll first look at the basics of using jQuery and how it can be used to make asynchronous calls

to the server that can be processed by ASP.NET MVC. We'll then look at how progressive enhancement can be used to ensure clients without enabled scripting can still use our site. Finally, we'll see how jQuery can be used to submit form data back to the server in an asynchronous fashion.
 
jQuery Primer

When working with jQuery, you mainly work with the jQuery object (primarily using the $ alias) that can perform a variety of different operations depending on its context. For example, to use jQuery to find all of the
elements on a page and add a CSS class to each one, we could use the following line of code:

$('div').addClass('foo');



When you pass a string to the $ function, jQuery will treat it as a CSS selector and attempt to find any elements in the page that match this selector. In this case, it will find all the
elements in the page. Likewise, calling
 
1 DOM stands for "Document Object Model" and is a hierarchy of objects that represents all of the elements in a page.
 
 
$('#foo') would find the element whose ID is foo, while a call to $('table.grid td') would find all of the
elements nested within tables that have a class of grid.

The result of calling this function is another instance of the jQuery object that wraps the underlying DOM elements that matched the selector. Because it returns another jQuery instance, you can continue to chain calls to jQuery methods that in turn allow you to perform complex operations on DOM elements in a very succinct manner. In this case, we call the addClass method, which adds the specified CSS class to each element contained in the wrapped set (in this case, all of the
elements in the page).

You can also attach events to elements in a similar fashion. If we wanted to show a message box when a button
is clicked, one approach could be to place the JavaScript inline in an onclick event:



The downside of this approach is that it mixes code with markup. This can impact the maintainability of your application and make the logic difficult to follow. Using jQuery, we can attach an event handler to the button's click event externally.

 


This time, we introduce a script element within the page to contain our JavaScript code and tell jQuery to find any

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend