在MVC加载GIF [英] loading gif in mvc

问题描述

我有一个方法在我的控制器这样

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());
}

我有一个HTML按钮在我看来页面，当我点击我想要加载gif图片，显示后2000毫秒后消失。下面是我的HTML

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>

我如何可以调用控制器方法。我所看到的 Html.ActionLink ，但我想这个按钮点击，而不是一个超链接。

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

请帮忙

推荐答案

首先进入 UpdateResource 方法。现在它返回的ActionResult：

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;" />

我们已经添加 =风格显示：无

然后我们使用jQuery的：

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>

当加载文档中，我们设置的点击动作的按钮。它显示进度，然后使用Ajax获得的ActionResult。当的ActionResult回来，我们都躲在进步和设置#result DIV的内容与返回的数据。

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.

这篇关于在MVC加载GIF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！