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 has lot of disadvantages such as:
- The whole page gets loaded causing an increased bandwidth
- Frequent hit on the server added heavy loads
- Badly impacting user experience as page appears and disappears.
Later, Microsoft came up with a concept called XMLHttpRequest where 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 provide 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 .NET namespace. Let me show you a legacy implementation of Ajax script used to update the DOM elements.
The above code creates XHR object, monitors the status and if the status is OK then do the thing that 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 methods called ActionLink.
@Ajax.ActionLink("Load Contacts", "GetContacts",
new AjaxOptions {UpdateTargetId = "Contacts-DivElement", HttpMethod = "GET" })
Note: We have mentioned Ajax options having properties which dictates the framework about 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 hold 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 run in older browsers as well. We have already 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 that 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.
As you can see, it’s turned On in default.
Ajax Helper Configuration
Two main features of Ajax Helper are:
BeginForm() – used for submitting a form using Ajax HelperActionLink() – used to invoke the Action method
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 at the beginning of the Ajax request.OnComplete – This indicates the JavaScript method which is called at the end of the Ajax request.Url – As indicated, 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 to the MSDN document for more details here.
Summary
In this article, we saw briefly about how Ajax 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.
