Question

185

Activating loading animation by Html.BeginForm submission

rated 0 times [ 187] [ 2] / answers: 1 / hits: 32228 / 12 Years ago, tue, november 6, 2012, 12:00:00

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>   

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

finn

Add To Favorites

Follow

Total Points: 154

Total Questions: 88

Total Answers: 82

Location: Lithuania

Member since Mon, Nov 16, 2020

4 Years ago

answered 12 Years ago jaredsages · Accepted Answer

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>