在ASP .NET MVC中调用Action方法时显示在页面中心加载动画
我的应用程序对Action方法（ASP .NET MVC）进行了多次调用，该方法返回一个Json对象。 当应用程序等待此方法返回其数据时，我想在页面中心显示加载动画。 我怎么做到这一点？ 我知道我应该使用JQuery，但这就是我所知道的。
我在Site.Master中定义了两个函数：
特节：
Loading...
视觉样式在CSS中定义：
div#spinner { display: none; width:100px; height: 100px; position: fixed; top: 50%; left: 50%; background:url(spinner.gif) no-repeat center #fff; text-align:center; padding:10px; font:normal 16px Tahoma, Geneva, sans-serif; border:1px solid #666; margin-left: -50px; margin-top: -50px; z-index:2; overflow: auto; }
您可以通过显示div（如果您想以模态方式执行此操作，您可以在请求之前使用blockUI – 或许多其他模式对话框插件之一）来执行此操作，然后等待回调成功作为你可以通过以下快速示例$ .getJSON（如果你想添加正确的error handling，你可能想使用.ajax）
$("#ajaxLoader").show(); //Or whatever you want to do $.getJSON("/AJson/Call/ThatTakes/Ages", function(result) { //Process your response $("#ajaxLoader").hide(); });
如果您在应用程序中多次执行此操作并希望集中所有ajax调用的行为，则可以使用全局AJAX事件： –
$("#ajaxLoader").ajaxStart(function() { $(this).show(); }) .ajaxStop(function() { $(this).hide(); });
使用blockUI类似于标记，例如： –
Get JSON
并使用jQuery： –
$(function() { $("#jsonLink").click(function(e) { $.post(this.href, function(result) { $("#resultContainer").fadeIn(); $("#result").text(result.Answer); }, "json"); return false; }); $("#ajaxLoader").ajaxStart(function() { $.blockUI({ message: $("#ajaxLoader") }); }) .ajaxStop(function() { $.unblockUI(); }); });
这就是它的魅力所在。
CSS
#loader { position:fixed; left:1px; top:1px; width: 100%; height: 100%; z-index: 9999; background: url('../images/ajax-loader100X100.gif') 50% 50% no-repeat rgb(249,249,249); }
在body标签内的_layout文件中，但在容器div之外。 每次加载页面时都显示加载。 页面加载后JS淡出（第二个）
JS位于_layout文件的底部
与此处已经暴露的类似的另一个解决方案就是这个。 就在关闭body标签之前放置这个html：
最后，在每个导航事件中动态替换.loader-text element's内容并打开#resultloading div，注意它最初是隐藏的。
var showLoader = function (text) { $('#resultLoading').show(); $('#resultLoading').find('.loader-text').html(text); }; jQuery(document).ready(function () { jQuery(window).on("beforeunload ", function () { showLoader('Loading, please wait...'); }); });
这可以应用于任何基于html的项目，使用jQuery，您不知道管理区域的哪些页面需要很长时间才能完成加载。
gif图像是176×176像素但你可以使用任何透明的gif动画，请考虑到图像尺寸并不重要，因为它最大可达150x150px。
此外，可以在元素的单击上调用showLoader函数以执行将进一步重定向页面的操作，这就是为什么它提供给单个函数的原因。 我希望这也可以帮助任何人。