Activating loading animation by Html.BeginForm submission

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>   
}

Solution

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>

Comments

[Dr_Freeman]

I tested your code with no success. I'm calling SData action method which will return different view when it's done. The idea is to display loading gif until SData makes redirection to another view. Am I missing something?

[McGarnagle]

@JasminPvvlovic sorry about that, I totally spaced. Thought you were using the Ajax helper. Please see my updated answer.

[paaone]

This solution didnt work for me. The ajaxOptions isn't an element in Html.BeginForm. It is throwing an error.