Question

我想在ActionResult请求期间显示一个ajax加载图标，可能需要几秒钟才能处理。

完成此任务的最佳方法是什么？

我只想在构建验证通过后显示图标（我使用的是MVC3，EF Code First，因此验证会自动放在页面上）。

在ActionResult期间可能会有进一步的验证/异常，在这种情况下会向用户显示一条消息，然后我想让加载图标再次消失。

谢谢！

Answer 1

将您的链接定义为Ajax操作链接，并在页面的某处指定旋转GIF的ID。

<div id="result"></div>
<img id="spinner" src="../content/ajaxspinner.gif" style="display: none;">
@Ajax.ActionLink("Link Text", "ActionName", "ControllerName", null, new AjaxOptions{UpdateTargetId = "result", LoadingElementId = "spinner"}, null)

或如果是表格：

@using(Ajax.BeginForm("Action", "Controller", null, new AjaxOptions{UpdateTargetId = "result", LoadingElementId = "spinner"}, null))
{
   @Html.TextBox("Data")<br/>
   <input type="submit" value="Submit" />
}

Answer 2

将图像放在div标签中，如下所示：

<div id="busydiv" style="display:none;"><img src="busything.gif" /></div>

然后创建如下链接：

@Ajax.ActionLink("Link Text", "ActionName", "ControllerName", null, new AjaxOptions { LoadingElementDuration = 1000, LoadingElementId = "busyDiv", HttpMethod = "Post", UpdateTargetId = "targetDiv", OnFailure = "PostFailure", OnSuccess = "PostSuccess", OnComplete = "PostOnComplete" }, null)

或以表格形式执行此操作：

@using (Ajax.BeginForm("TestAjax", new AjaxOptions { LoadingElementDuration=1000, LoadingElementId="dave", HttpMethod = "Post", UpdateTargetId = "targetDiv", OnFailure = "PostFailure", OnSuccess = "PostSuccess", OnComplete = "PostOnComplete" }))

显然省略了您不需要的AjaxOptions，根据此处的文档：http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.aspx

Answer 3

只是我的两分钱：

Chris发布的解决方案是有效的，并且可以正常工作但是您必须添加对以下两个javascript库的引用。请注意，订单很重要：

<script src="~/scripts/jquery-1.8.0.js"></script>
<script src="~/scripts/jquery.unobtrusive-ajax.js"></script>

当你创建一个预先加载捆绑的MVC应用程序和所有这些nu-get包时，这可能不是你的问题，但如果你像我一样并创建了一个空的ASP.NET MVC应用程序，你可能会遇到问题

MVC3 - Ajax加载图标

3 个答案: