Ajax.BeginForm In ASP.NET MVC 5

Background

Today, working with modern web applications is one of the most challenging tasks in terms of implementing user-friendly faster response times and consuming fewer resources. This is due to the client or user's high expectations. To solve these problems, there are lots of technologies on the market, but again, it's a challenge for 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. To begin 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
• route values
• ajaxOptions
• HTML attributes

actionName

This parameter is used to define the action name for which the action will be executed.

controllerName

This is the parameter used to define the controller name.

route values

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 a 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 that will fire after the successful Ajax request.
• OnFailure: This property is used to define the JavaScript file that 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 that will fire after completing the Ajax request.
• InsertionMode: This property is used to specify how the response will be inserted into the DOM element. It has InsertAfter, InsertBefore, and Replace modes.
• AllowCache: This is the boolean property that 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 milliseconds for the loading symbol.

HTML attributes

This parameter is used to define the HTML attributes such as CSS class, id, etc for HTML elements.

Syntax

@using (Ajax.BeginForm("EmployeeMaster", "Home", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divEmp" }))

Note. To work Ajax. To 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 the NuGet package manager, you can install a library and reference into the project.
• Right-click on the created MVC project and find the Nuget Package manager option,
  
• Now the following window will appear and search for the jQuery unobtrusive Ajax as below.
  

Choose the appropriate version and click on the Install button. It will install the jQuery UI library to your project and the library script file will get added to the script folder of the created project which you can add as a reference to the project,

• Use the CDN library provided by Microsoft, jQuery, Google, or any other that requires an active internet connection.
• Download the library using NuGet and reference it in the project.

The library will look as follows after adding it to 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>

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.

Read more MVC articles,

• Post Data To Controller Without Page Refresh In ASP.NET MVC
• Paging Sorting Searching In ASP.NET MVC 5
• Disable jQuery UI Calendar Past And Future Date In ASP.NET MVC
• Manage Controller Specific Session In ASP.NET MVC 5

Read more articles on ASP.NET MVC.