How do I trigger 'ajaxStart' and 'ajaxStop' from Html.BeginForm?

Html.BeginForm syntax are used to make different types of requests. Html.BeginForm is used to submit a form and load a new page. The $(document).ajaxStart() and $(document).ajaxStop() methods are triggered when an asynchronous request is made and completed respectively, which is why they work with the jQuery syntax.

To show the wait cursor for Html.BeginForm requests, you can use the jQuery submit() method to intercept the form submission and show the wait cursor. You can add a class to the form that triggers the wait cursor, then remove the class when the form is submitted. Here's an example: 

$(document).ready(function() {
  $('#waitDiv').hide();
  $('form.show-wait-cursor').submit(function() {
    $('#waitDiv').show();
    $(this).removeClass('show-wait-cursor');
  });
});

In Html.BeginForm, add the class show-wait-cursor to the form element: 

@using (Html.BeginForm("BigQuery", "Home", FormMethod.Post, new { @class = "show-wait-cursor" })) {
  // form contents
}

this is going to trigger the submit() method when the form is submitted, which will show the wait cursor and remove the show-wait-cursor class from the form. When the page is loaded after the form is submitted, the wait cursor will be hidden.

Try and see if it works in your case. let me know.

Hello joe,

For all the form please try below approch.

$(document).on('submit', 'form', function() {
        $('#waitDiv').show();
    });

Or you can use ajaxSend method.

 $(document).ajaxSend(function () {
        $('#waitDiv').show();
    });

Thanks

Naimish Makwana

@Naimish Makwana - Can that same ID be used for all of my Views? I have 159 .cshtml Views that I would have to add an ID to. If they are not unique, then the jQuery will need to address each form's Submit routine by ID.

Sorry, but I don't really know how to post a follow-up comment to your answer.

Hi,

You can use Ajax.BeginForm to use ajax functionality on form post. You can check below links for examples

https://www.c-sharpcorner.com/UploadFile/0c1bb2/ajax-beginform-in-Asp-Net-mvc-5/
https://www.aspsnippets.com/Articles/ASPNet-MVC-AjaxBeginForm-Tutorial-with-example.aspx

Regards,
Pasang

Hello Joe,

To show and hide the Wait Cursor with the Html.BeginForm method, you can do the following things.

1. Give ID to you form. Ex : 

@using (Html.BeginForm("BigQuery", "Home", FormMethod.Post, new { id = "frmBigQuery" }))

2. You can do code in jQuery like this:

$(document).ready(function () {
    $('#waitDiv').hide();

    // Listen for the form submit event
    $('#frmbigQuery').submit(function () {
        // Show the Wait Cursor
        $('#waitDiv').show();

        // Return true to allow the form to be submitted
        return true;
    });

    // Listen for the AJAX request to complete
    $(document).ajaxStop(function () {
        // Hide the Wait Cursor
        $('#waitDiv').hide();
    });
});

Thanks

Naimish Makwana