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>