loading gif in mvc

Question

I have a method in my controller like this

public string UpdateResource()
{
    Thread.Sleep(2000);
    return string.Format("Current time is {0}", DateTime.Now.ToShortTimeString());
}

I have a html button in my view page and when I click on that I want a loading gif image to appear and then disappear after 2000ms. Below is my html

<input type="button" id="btnUpdate" value="Update" />
<img id="loading" src="/Images/ajax-loader.gif" alt="Updating ..." /> 
<div id="result"></div>

How can I call the controller method. I have seen Html.ActionLink but I want this on button click and not a hyperlink.

Please help

Answer 1

First change to UpdateResource method. Now it returns ActionResult:

public ActionResult UpdateResource()
{
    Thread.Sleep(5000);
    return Content(string.Format("Current time is {0}", DateTime.Now.ToShortTimeString()));
}

We have to hide image when document is loaded so we change image tag to:

<img id="loading" src="../../Content/progress.gif" alt="Updating ..." style="display: none;" />

We have added style="display:none".

Then we are using jQuery:

<script type="text/javascript">
    $(document).ready(
        function() {
            $('#btnUpdate').click(
                function() {
                    $('#loading').show();
                    $.get('<%= Url.Action("UpdateResource") %>', {},
                        function(data) {
                            $('#result').html(data);
                            $('#loading').hide();
                        });
                }
            );
        }
    );
</script>

When document is loaded, we are setting click action to your button. It shows progress and then uses ajax to get ActionResult. When ActionResult comes back, we are hiding progress and setting content of #result div with returned data.