загрузка GIF в MVC

Question

У меня есть метод в моем контроллере, как это

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

У меня есть кнопка HTML на странице просмотра, и когда я нажимаю на нее, я хочу, чтобы изображение загрузочного gif появлялось, а затем исчезало через 2000 мс. Ниже мой HTML

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

Как я могу вызвать метод контроллера. Я видел Html.ActionLink, но я хочу это по нажатию кнопки, а не по гиперссылке.

Пожалуйста, помогите

Answer 1

Первое изменение на UpdateResource метод. Теперь он возвращает ActionResult:

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

Нам нужно скрыть изображение при загрузке документа, поэтому мы меняем тег изображения на:

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

Мы добавили style="display:none".

Тогда мы используем 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>

Когда документ загружен, мы настраиваем действие нажатия для вашей кнопки. Он показывает прогресс, а затем использует ajax для получения ActionResult. Когда ActionResult возвращается, мы скрываем прогресс и устанавливаем содержимое #result div с возвращенными данными.