Ajax.BeginForm In ASP.NET MVC 5

Vithal Wadje
8y
313k
0
6

Article

Background

Today, working with modern web applications is the one of the most challenging tasks in terms of implementing user-friendly faster response times and consuming fewer resources. This is due to client or user high expectations. To solve these problems, there are lots of technologies on the market, but again, it's a challenge to the developer or architect to choose suitable technology and implement it properly.

One of the problems in today's web applications is that they are full of page postbacks, so we will learn about Ajax.beginForm, 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 postback. 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:

Use of Ajax.BeginForm

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> v

From the above explanation, we have learned about the Ajax.BeginForm.

Summary

I hope this article was useful for all readers. If you have a suggestion then please contact me.