How do I trigger 'ajaxStart' and 'ajaxStop' from ASP.NET MVC 5 Html.BeginForm?

Question

I am working on a corporate ASP.NET MVC 5 website that has 159 *.cshtml View pages.

I am trying to incorporate a Wait Cursor to display whenever a query is run.

Some pages have queries that are called with jQuery/Ajax calls:

$.get("@Url.Action("SomeQuery", "ControllerN"));`

By adding the below div tag and jQuery to the Shared_ConsoleLayout.cshtml file, the Wait Cursor will show and hide anytime jQuery makes one of the Ajax calls:

<div id="waitDiv" style="position:fixed; top: 50%; left: 50%">
    <p style="text-align: center">
        Loading...<br />
        <img src="~/Images/wait.gif" /><br />
        Please Wait.
    </p>
</div>
...
$(document).ready(function () {
    $('#waitDiv').hide();
    $(document).ajaxStart(function () {
        $('#waitDiv').show();
    })
    $(document).ajaxStop(function () {
        $('#waitDiv').hide();
    });
});

But, I don't know how to show and hide the div using the ASP.NET MVC 5 Html.BeginForm syntax, and they account for over 90% of the calls on the corporate website.

@using (Html.BeginForm("SomeQuery", "ControllerN", FormMethod.Post))`

What can I do to allow the Wait Cursor to show and hide with the ASP.NET MVC 5 Html.BeginForm techniques?

Unless you stop the default action of a form submit then it's going to reload the page and stop the script execution. Each one of your forms would need to use a button of type button so it doesn't submit the form or add an event listener to the form `onsubmit` event and call `event.preventDefault()` - [javascript-code-to-stop-form-submission](https://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission), then show your loader before posting the form to the backend. — Ryan Wilson, Feb 16 '23 at 20:11

score 1 · Accepted Answer · answered Feb 19 '23 at 18:55

The Html.BeginForm is just a syntax wrapper on the "form" tag. Submitting a form operates synchronously, and there are no such events. You can handle the submit event to show some indicator, which will be automatically hidden (overridden) within a new page HTML.

If you need to implement asynchronous data posting, you can modify your existing jQuery code - for example, use the jQuery ajax plugin instead and specify the request data manually (I guess this is why you are looking for a form usage). Otherwise, use the Ajax.BeginForm instead, which have the necessary events (similar to the jQuery get/ajax plugin): How to use Simple Ajax Beginform in Asp.net MVC 4?

That's probably the answer, too. I was hoping there was an overload in one of the Html.BeginForm methods that would allow it to tie in to jQuery to handle client side events. I'll have to read up on the links you provided. I'm not really sure if there is any benefit to Html.BeginForm over Ajax.BeginForm. I only learned of the later a few days back. — , Feb 20 '23 at 00:47

How do I trigger 'ajaxStart' and 'ajaxStop' from ASP.NET MVC 5 Html.BeginForm?

1 Answers1