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}\", DateTim         


        

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.