Activating loading animation by Html.BeginForm sub

Question

I want to display loading animation when the user clicks on submit button. Simple gif will do the job. This is my code:

@using (Html.BeginForm("SData","Crawl"))
{
    <p>
        Enter Starting URL:<input class="txt" type="text" id="sUrl" name="sUrl" title="Enter Starting URL"/>
    </p>

    <p>
        Enter Number of Threads:<input class="txt" type="text" id="Nbt" name="Nbt" title="Enter number of threads"/>
    </p>

    <p>
        <input class="button" id="submit" type="submit" value="Submit" />
   </p>   
}

Answer 1

Edit

I mistakenly thought the question concerned the AJAX helper. Here's how you could do it using the HtmlHelper.

First, add an ID to the form so you can grab it using JQuery:

@using (Html.BeginForm("SData", "Crawl", FormMethod.Post, new { id = "myform" }))
{
    // the form
}

Next, add a Javascript event handler to intercept the form submission and display the loading GIF.

$("#myform").submit(function(e) {
    $("#myLoadingElement").show();
});

---

(Original answer follows...)

Use the AjaxOptions class to set a LoadingElementId, and the Ajax helper will display that element while waiting for the response from the server:

@using (Html.BeginForm("SData","Crawl", new AjaxOptions() {
    LoadingElementId="myLoadingElement"
}))
{
    // form
}

Then simply place your gif wherever you want it to display (hide it initially):

<div id="myLoadingElement" style="display: none;">
    <img src="loading.gif" alt="Loading..." />
</div>

Answer 2

Hello I just read your post here and it worked fine for me in .net core 2.1 using Microsoft.AspNetCore.Mvc:

@using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post, new {id="UpdateForm"})) {@Html.AntiForgeryToken() <div>your inputs here...</div> }

then the HTML script:

$("#UpdateForm").submit(function(e){$("#your loader gif here..")}

if you have problems you might want to debug your Action Method and see if it breaks inside the statement.... @Dr Freeman: you are able to redirect to any view as follows:

return RedirectToAction("ActionName", new {@id=id});

Hope this help