MVC3 - Ajax加载图标

Question

我想展示一个AJAX加载图标，在执行需要几秒钟处理的ActionResult请求期间。最好的方法是什么？

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

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

- mp3duck

---

这里有一个不错的小插件 https://github.com/bstaley/ajax-auto-loading/blob/master/ajax.auto.loading.js 它会自动为每个ajax调用显示和隐藏加载图像。 - Brandon.Staley

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

- Chris

---

@Chirs，感谢您的回复。对我来说不太适用。

1. 当我按提交按钮时，我没有看到旋转图标。
2. 当我从ActionResult返回用户到页面时，它会在我的URL末尾添加“?Length=10”？

我使用了您的第二个示例。 - mp3duck

@Crhis编辑：我在路由值属性中添加了"null"，这样就停止了"?Length=10"的部分。 所以，现在只是不显示图标的问题吗？ - mp3duck

它对我来说无法工作。有人可以帮忙或提供替代方案吗？ - Gelásio

Answer 2

将图片放置在一个像这样的div标签中：

< / p>

<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" }))

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

- Tom Chantler

Answer 3

我的个人看法：

Chris发布的解决方案是有效的，并且可以工作，但是您必须添加下面两个JavaScript库的引用。请注意顺序很重要：

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

当您创建一个预装了打包和所有这些nu-get软件包的MVC应用程序时，这可能不会成为问题，但如果您像我一样创建了一个空的ASP.NET MVC应用程序，则可能会遇到问题。

- Denys Wessels