ASP.NET MVC 3 Ajax - Part I
In this blog series ASP.NET MVC3 Ajax we are going to explore about implementing Ajax features in ASP.NET MVC3 Web application and this blog post will cover the basics of ASP.NET MVC3 Ajax.
Ajax Helper Methods are very simple and intuitive to get start with. So, I’ll be covering the Ajax Helper Methods and will cover the jQuery Ajax in the future posts of this blog series.
Ajax Helper Methods
It enables us to implement ajax feature without writing much code. Ajax.ActionLink() is one of the fundamental Ajax helper method that returns a anchor element (<a></a>) with the URL of the action method; When the action link is clicked, the action method in the specified URL is invoked asynchronously and result is sent back to the client. Let us see it in detail by using sample demo application.
- Create a new ASP.NET MVC3 Project “AjaxGettingStarted”
- Select ”Empty” template and ”Razor” as view engine and click ”Ok”
- ASP.NET MVC3 project template shipped with the scripts folder which contains the all the jQuery library files
that are required for doing Ajax and other client side functionalities.
To implement ajax we should use the references of “jQuery” and “jQuery.unobtrusive-ajax” minified js files in our view
- Create a Controller with the name HomeController by right clicking the “Controllers” folder and select “Add” -> “Controller”
- The HomeController.cs file will be created under controllers folder with the following code.
- Then right click inside the Index() Action Method and select “Add View”. Leave the default setting and click “Add”.
- This would create the view “Index.cshtml” under the folder “Views/Home”.
- Add the following action method in HomeController.cs file
- Add the script reference to the “jQuery” and “jQuery.unobtrusive-ajax” minified js files in Index.cshtml file.
Now all the setup in place to implement the basic Ajax functionality using Ajax.ActionLink Helper method. Before seeing this method in action let me explain bit more about this method. There are 12 overloads for this method amoung which the simplest one isAjax.ActionLink(string linkText, string actionName, AjaxOptions ajaxOptions)
The first parameter is the Link text which will be displayed in the view, the second parameter is the name of the action method which should be invoked while clicking the action link and the third parameter is AjaxOptions which defines how the Ajax request/response will take place and used to tell MVC exactly what you want your Ajax call to do.
- AjaxOptions class will have the following properties
- Confirm - Gets or sets the message to display in a confirmation window before a request is submitted.
- HttpMethod - Gets or sets the HTTP request method (“Get” or “Post”).
- InsertionMode - Gets or sets the mode that specifies how to insert the response into the target DOM element
- LoadingElementId - Gets or sets the id attribute of an HTML element that is displayed while the Ajax function is loading.
- UpdateTargetId - Gets or sets the ID of the DOM element to update by using the response from the server.
- URL - Gets or sets the URL to make the request to.
- In our sample demo application we are just going to have a link called “Greet Me”. Upon clicking on that click we are going make Ajax request to GreetMe action method and populate a div tag with the value returned by the action method
- Add the following code in the index.cshtml file. which implements the above step.
In this blog post we have implemented a basic ajax feature using Ajax.ActionLink helper method. In the next blog post of the series we would see how to add some add interactive animation during the ajax request.