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
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:
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,
To work Ajax.BeginForm functionality properly don't forget to add the reference of the following jQuery library as below:
Summary
I hope this article was useful for all readers. If you have a suggestion then please contact me.
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
This parameter is used to define the action name for which action will be executed.
controllerName
controllerName
This is parameter used to define the controller name.
routeValues
This parameter is used to pass the object which contains the route parameters.routeValues
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 andReplace 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
Syntax
@using (Ajax.BeginForm("EmployeeMaster", "Home", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divEmp" }))
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.
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.
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>
I hope this article was useful for all readers. If you have a suggestion then please contact me.
Post a Comment