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.

In that case, you can have one option is to send form data using jQuery Ajax and second 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.

 ajaxOptions: An object that provides options for the asynchronous request, ajaxOptions has the following properties.
 
  • 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.
 htmlAttributes: This parameter is used to define the HTML attributes such as css class , id etc for html element.

Syntax:

@using (Ajax.BeginForm("SaveNewComment", new AjaxOptions()
 {                  
 OnSuccess = "Success",
 OnFailure = "OnFailure"
 }))

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.

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