Using Ajax.beginForm In ASP.NET MVC 5

One of the problems in today's web applications is that they are full of page post backs,  so we will learn about Ajax.begin Form, which is the extension method of the Ajax helper class. By using it, we can post the request to the server without the whole page post back. So let's learn about it from scratch.
What Is Ajax.BeginForm
Ajax.BeginForm is the extension method of the ASP.NET MVC Ajax helper class, which is used to submit form data to the server without whole page postback.
To work Ajax.BeginForm functionality properly, we need to add the reference of jquery.unobtrusive-ajax library; there are many ways to add the reference of jQuery library into our project. To learn how to use and install jquery.unobtrusive-ajax  please refer to my following article:
The Ajax.BeginForm takes the following parameters
  • actionName
  • controllerName
  • routeValues
  • ajaxOptions
  • htmlAttributes
actionName
This parameter is used to define the action name for which action will be executed.
controllerName 
 This is parameter used to define the controller name.
 routeValues
This parameter is used to pass the object which contains the route parameters.
 ajaxOptions
This parameter is used to pass the properties for Ajax requests which makes the request to the server asynchronously . ajaxOptions has the following properties.
  • Url: This property is used to get and set the url.
  • HttpMethod: This property is used to define the form submit method such as POST, GET , PUT , Delete etc.
  • Confirm: This property is used to display the confirmation box before sending request to the server.
  • UpdateTargetId: This property is used to specify the DOM element id for which part to be updated; such as, if we specify the DIV tag id then only that particular DIV portion will get updated.
  • OnSuccess: This property is used to define the JavaScript file which will fire after the successful Ajax request.
  • OnFailure: This property is used to define the JavaScript file which will fire after the failed Ajax request.
  • OnComplete: This property is used to define the JavaScript file which will fire after the complete Ajax request.
  • OnBegin: This property is used to define the JavaScript file which will fire after the completing the Ajax request.
  • InsertionMode: This property is used to specify the how the response will be inserted into the DOM element. It has InsertAfter, InsertBefore and
    Replace modes.         
  • AllowCache: This is the boolean property which decides whether to allow cache or not.
  • LoadingElementId: This property is used to display the loading symbol for long running requests.
  • LoadingElementDuration: This property is used to define the duration in mileSeconds for loading symbol.
 htmlAttributes
This parameter is used to define the html attributes such as css class , id etc for html element.
Syntax
@using (Ajax.BeginForm("EmployeeMaster", "Home", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divEmp" }))
Note
To work Ajax.BeginForm functionality properly we need to add the reference of jquery.unobtrusive-ajax library, there are many ways to add the reference of jQuery library into our project. The following are some methods:
  • Using NuGet package manager, you can install library and reference into the project.
Right click on created MVC project and find Nuget Package manager option,



Now the following window will appear and search for the jQuery unobtrusive ajax as below:


Choosethe appropriate version and click on Install button. It will install jQuery UI library to your project and library script file will get added into the script folder of the created project which you can add as a reference into the project,
  • Use CDN library provided by Microsoft, jQuery, Google or any other which requires active internet connection.
  • Download library using NuGet and reference into the project.
The library will be look as follows after adding it in the script folder.



To work Ajax.BeginForm functionality properly don't forget to add the reference of the following jQuery library as below:
<script src="~/Scripts/jquery-1.10.2.js"></script>    
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> 
Summary
I hope this article was useful for all readers. If you have a suggestion then please contact me. 

Post a Comment

www.CodeNirvana.in

Protected by Copyscape
Copyright © Compilemode