Activate loading animation by Html.BeginForm view

Question

I want to display loading animation when the user clicks the submit button. A 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 was about the AJAX assistant. Here you can do it with HtmlHelper.

First add the id to the form so that you can capture it using jQuery:

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

Then add a Javascript event handler to intercept the form submission and display the loaded GIF.

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

---

(The original answer follows ...)

Use the AjaxOptions class to set the LoadingElementId , and the Ajax helper will display this element, awaiting a response from the server:

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

Then just put your gif wherever you want to display it (hide it first):

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