Quantcast
Viewing all articles
Browse latest Browse all 17

AJAX with ASP.NET MVC Simplified

What would you do, if you need to update a portion of your web page with the content from the server? Yes, you need Ajax. Let’s get dive into the Asynchronous concept with ASP.NET MVC for some time.

How Ajax conquered the web?

Ajax – abbreviated as Asynchronous Javascript and XML. It is not a programming language rather it is optimum to call it as a Web development technique used on the client side to create asynchronous web applications.
Previously, in initial era of Internet, we just used static HTML web pages and if the user clicks on a particular hyperlink then the browser reloads the whole page content just to update a small piece of content. This technique is not only inefficient but had lot of disadvantages such as:
Image may be NSFW.
Clik here to view.
Ajax in ASP.NET MVC
  • Whole page gets loaded causing an increased bandwidth
  • Frequent hit on the server added heavy loads
  • Badly impacting user experience as page appear and disappear.

Later Microsoft came up with a concept called XMLHttpRequest where it is a JavaScript object sends a partial body update Http request to the server which only updates portion of web page. They developed Outlook mail with this technique which was a huge eye opener.

The term Ajax was introduced by Jesse James Garrett in his article titled as “Ajax: A New Approach to Web Applications”.

ASP.NET MVC & Ajax

ASP.NET MVC provides us all the feasibility to implement Ajax in the web application development. It fetches
data from the server and updates the portions of the existing page i.e. here it could be a PartialView.

MVC provides AJAX Helpers that are used to create AJAX enabled forms and hyperlinks which request data asynchronously. Ajax Helpers are implemented via Razor syntactical format which provides developers an easy way of implementation.

Ajax Helpers are derived from or kind of extension method of AJAXHelper class which resides in System.Web.Mvc dotnet namespace. Let me show you a legacy implementation of Ajax script used to update the DOM elements.Image may be NSFW.
Clik here to view.
AJAX with MVC

The above code creates XHR object, monitors of the status and if the status is OK then do the thing what we like. For instance one can update the DOM elements etc.

Way the ASP.NET MVC implements

Let us consider that we need to update a div element with contact list fetched from the server asynchronously. Following razor code displays the usage of one of the Ajax helper method called ActionLink.

@Ajax.ActionLink(“Load Contacts”, “GetContacts”, new AjaxOptions {UpdateTargetId = “Contacts-DivElement”, HttpMethod = “GET” })

Note : We do have mentioned Ajax options having properties which dictates the framework how the call should behave. We will see more regarding the Ajax options later in this article. So when the above code snippet gets compiled and parsed into HTML it looks something like this:

<a href=”/Home/GetContacts”
data-ajax=”true”
data-ajax-method=”GET”
data-ajax-mode=”replace”
data-ajax-update=”#Contacts-DivElement”>Load Contacts</a>

It’s an unobtrusive javascript rendering of Ajax. You can notice the data attributes holds the Ajax option names and which is easily understandable and readable. This really helps a developer to debug ajax calls.
The HTML code is compatible HTML-5 since it’s been rendered with the extensible attribute keyword “data-“ which makes the code to run in older browsers as well. We already have covered major MVC Concepts in the form of MVC Interview Questions in a separate post.

Turn on Unobtrusive JavaScript mode

Unobtrusive JavaScript mode is turned off by default, purpose is to support the older MVC version (Compatibility). As our main focus is on version MVC 4 and later we are going to make sure whether the unobtrusive mode is turned ON.
It’s just a Boolean value which controls the functionality and resides inside Web.Config file of ASP.NET MVC.Image may be NSFW.
Clik here to view.
UnobstrusiveJavaScriptEnabled

As you can see, it’s turned On in default.

Ajax Helper Configuration

Two main feature of Ajax Helper are:

  • BeginForm() – used for submitting a form using Ajax Helper
  • ActionLink() – used to invoke the Action method
Image may be NSFW.
Clik here to view.
AJAX Loading
Numerous configuration options are available as the properties of AjaxOptions class. Those options are listed below with details.
    • HttpMethod – This property is used to mention the type of HTTP method while establishing an Ajax request.
    • Confirm – Used to display a Pre-dialogue to the user, where if the user clicks on the OK button the Ajax call is made.
    • OnSuccess – When the AJAX call is successful, a JavaScript method is called indicated by OnSuccess.
    • OnFailure – When an AJAX request fails, a JavaScript method is called which is indicated by OnFailure.
  • OnBegin – represents which javaScript method is called on the beginning of the Ajax request.
  • OnComplete – This indicates the javascript method which is called at the end of the Ajax request.
  • Url – as indicates, it’s used to navigate or to which the form is to be submitted.
  • LoadingElementId – This represents a DOM element where some animation is shown to the user until
    data is available. I do remember youtube.com’s video buffering animation.
  • UpdateTargetId – This indicates the DOM element where it is populated with the HTML/Data returned by
    the action method.
  • InsertionMode – In order to control the DOM element specified by UpdateTargetId, InsertionMode is used and its values are InsertAfter, InsertBefore and Replace.

Apart from ActionLink() and BeginForm() there are many other available MVC helpers. You can refer MSDN document for more details here.

Summary
In this article we saw brief about Ajax, how it reigns web technology and how ASP.NET MVC blends
with Ajax using its awesome feature called AjaxHelpers. Kindly let me know if you have any questions?

Top 10 Interview Questions and Answers Series:

The post AJAX with ASP.NET MVC Simplified appeared first on Web Development Tutorial.


Viewing all articles
Browse latest Browse all 17

Trending Articles