Use of Ajax.BeginForm in ASP.NET MVC C#

If you are a programmer and have started learning Asp.NET MVC using C#, there would be several occasion when you would like to send form data without loading(refreshing) the page again, and that is where we need Ajax.BeginForm in MVC, which allows us to submit form in MVC C#, without re-loading complete page.

Also, you can have one option is to send form data using jQuery Ajax(which is not secure and not recommended to use) and second(recommended way) is to use Razor Ajax helper Ajax.BeginForm, before we begin you must have basic knowledge of Asp.NET MVC.

What is Ajax.BeginForm and how to use it?

Ajax.BeginForm is the extension method of the ASP.NET MVC Ajax helper class, with the help of which you can send data to the controller without loading your page, hence making your web-application more user -friendly.

To work Ajax.BeginForm functionality properly, we need to add the reference of jquery.unobtrusive-ajax library.

The Ajax.BeginForm takes the following parameters

• actionName
• controllerName
• routeValues
• ajaxOptions
• htmlAttributes

actionName: parameter defines the ActionMethod name

ControllerName: used to specify Controller name

routeValues: you can send route values using this field(if needed), Can be properly defined as, an object that contains the parameters for a route. The parameters are retrieved through reflection by examining the properties of the object. This object is typically created by using object initializer syntax.

• Url: Gets or sets the URL to make the request to.
• HttpMethod: used to define the form submit method such as POST, GET 
• Confirm: Used to show the message to display in a confirmation window before a request is submitted.
• UpdateTargetId: Gets or sets the ID of the DOM element to update by using the response from the server, such as, if we specify the DIV tag id then only that particular DIV portion will get updated.
• OnSuccess: Gets or sets the JavaScript function to call after the page is successfully updated.
• OnFailure: Gets or sets the JavaScript function to call if the page update fails.
• OnComplete: Gets or sets the JavaScript function to call when response data has been instantiated but before the page is updated.
• OnBegin: This property is used to define the JavaScript function to call immediately before the page is updated.
• 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: boolean property which decides whether to allow cache or not.
• LoadingElementId: Gets or sets a value, in milliseconds, that controls the duration of the animation when showing or hiding the loading element.
• LoadingElementDuration: This property is used to define the duration in mileSeconds for loading symbol.

Ajax.Beginform Example :

@using (Ajax.BeginForm("ActionMethod",
    new AjaxOptions { OnSuccess = "OnSuccess", OnFailure = "OnFailure" }))
{
    <fieldset>
        @Html.LabelFor(m => m.EmailAddress)
        @Html.TextBoxFor(m => m.EmailAddress)
        @Html.ValidationMessageFor(m => m.EmailAddress)
        <input type="submit" value="Submit" class="btn btn-primary" />
    </fieldset>
}

<script type="text/javascript">

//Called on Successfully completing Ajax Form request
    function OnSuccess(response) {
        alert(response);
    }
//Called when there is some error
    function OnFailure(response) {
        alert("Error");
    }

</script>

Note: You need to install jquery.unobtrusive-ajax library before using Ajax.BeginForm. You can install it in your Solution using the package manager console and below code:

Install-Package Microsoft.jQuery.Unobtrusive.Ajax -Version 3.2.3

The code above also demonstrates that client-side validation still works for forms created with Ajax.BeginForm(). Just make sure you include the appropriate JavaScript files.

Usage Of Ajax.BeginForm in Real World applications: 

1. Use Ajax.Beginform to Update shopping cart in your Asp.Net MVC e-commerce project.
2. Use it when you want to validate/submit form in Bootstrap Pop-up modal.
3. It can be used when you have more than two forms in single page and you want to submit data to controller without reloading the complete page.
4. In single page application(SPA) to collect users data/contact details

That's it, please share your comment using Facebook comments section or login/register to provide your valuable comments on this post or ask a question related to this post or MVC C#, thank you.

You might also like to read:

File uploading using DropZone js & HTML5 in MVC

Validate Pop Up Modal using Ajax.Beginform in C# MVC

Ajax.Beginform is posting form values twice in MVC?