asp.net-mvc - 在mvc中加载gif

Question

我的 Controller 中有一个像这样的方法

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

我的 View 页面中有一个 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>

如何调用 Controller 方法。我已经看到了 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 的内容。