jQuery 在 ASP .NET MVC 中调用 Action 方法时在页面中心显示加载动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/807408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Showing loading animation in center of page while making a call to Action method in ASP .NET MVC
提问by Draco
My application makes several calls to an Action method (ASP .NET MVC) which returns a Json object. When the application is waiting for this method to return its data I want to display a loading animation in the center of the page. How would I accomplish this? I know that I should use JQuery but that's all I know.
我的应用程序多次调用返回一个 Json 对象的 Action 方法 (ASP .NET MVC)。当应用程序等待此方法返回其数据时，我想在页面中央显示加载动画。我将如何做到这一点？我知道我应该使用 JQuery 但这就是我所知道的。
回答by Dmitry44
I defined two functions in Site.Master:
我在 Site.Master 中定义了两个函数：
<script type="text/javascript">
var spinnerVisible = false;
function showProgress() {
if (!spinnerVisible) {
$("div#spinner").fadeIn("fast");
spinnerVisible = true;
}
};
function hideProgress() {
if (spinnerVisible) {
var spinner = $("div#spinner");
spinner.stop();
spinner.fadeOut("fast");
spinnerVisible = false;
}
};
</script>
And special section:
和特殊部分：
<div id="spinner">
Loading...
</div>
Visual style is defined in CSS:
视觉样式在 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;
}
回答by John Foster
You can do this by displaying a div (if you want to do it in a modal manner you could use blockUI- or one of the many other modal dialog plugins out there) prior to the request then just waiting until the call back succeeds as a quick example you can you $.getJSON as follows (you might want to use .ajax if you want to add proper error handling)
您可以通过在请求之前显示一个 div（如果您想以模态方式进行操作，您可以使用blockUI- 或许多其他模态对话框插件之一）来完成此操作，然后等待回调成功作为快速示例，您可以按如下方式使用 $.getJSON（如果您想添加适当的错误处理，您可能需要使用 .ajax）
$("#ajaxLoader").show(); //Or whatever you want to do
$.getJSON("/AJson/Call/ThatTakes/Ages", function(result) {
//Process your response
$("#ajaxLoader").hide();
});
If you do this several times in your app and want to centralise the behaviour for all ajax calls you can make use of the global AJAX events:-
如果您在应用程序中多次执行此操作并希望集中所有 ajax 调用的行为，您可以使用全局 AJAX 事件：-
$("#ajaxLoader").ajaxStart(function() { $(this).show(); })
.ajaxStop(function() { $(this).hide(); });
Using blockUI is similar for example with mark up like:-
使用 blockUI 与例如标记类似：-
<a href="/Path/ToYourJson/Action" id="jsonLink">Get JSON</a>
<div id="resultContainer" style="display:none">
And the answer is:-
<p id="result"></p>
</div>
<div id="ajaxLoader" style="display:none">
<h2>Please wait</h2>
<p>I'm getting my AJAX on!</p>
</div>
And using jQuery:-
并使用 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();
});
});
回答by Sparker73
Another solution that it is similar to those already exposed here is this one. Just before the closing body tag place this html:
另一个与这里已经公开的解决方案类似的解决方案是这个。就在结束 body 标签之前放置这个 html：
<div id="resultLoading" style="display: none; width: 100%; height: 100%; position: fixed; z-index: 10000; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto;">
<div style="width: 340px; height: 200px; text-align: center; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; z-index: 10; color: rgb(255, 255, 255);">
<div class="uil-default-css">
<img src="/images/loading-animation1.gif" style="max-width: 150px; max-height: 150px; display: block; margin-left: auto; margin-right: auto;" />
</div>
<div class="loader-text" style="display: block; font-size: 18px; font-weight: 300;"> </div>
</div>
<div style="background: rgb(0, 0, 0); opacity: 0.6; width: 100%; height: 100%; position: absolute; top: 0px;"></div>
</div>
Finally, replace .loader-text element'scontent on the fly on every navigation event and turn on the #resultloadingdiv, note that it is initially hidden.
最后，.loader-text element's在每个导航事件中动态替换内容并打开#resultloadingdiv，注意它最初是隐藏的。
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...');
});
});
This can be applied to any html based project with jQuery where you don't know which pages of your administration area will take too long to finish loading.
这可以应用于任何带有 jQuery 的基于 html 的项目，在这些项目中，您不知道管理区域的哪些页面需要很长时间才能完成加载。
The gif image is 176x176px but you can use any transparent gif animation, please take into account that the image size is not important as it will be maxed to 150x150px.
gif 图像为 176x176 像素，但您可以使用任何透明的 gif 动画，请注意图像大小并不重要，因为它会最大为 150x150 像素。
Also, the function showLoader can be called on an element's click to perform an action that will further redirect the page, that is why it is provided ad an individual function. i hope this can also help anyone.
此外，可以在单击元素时调用函数 showLoader 以执行进一步重定向页面的操作，这就是为它提供单独函数的原因。我希望这也可以帮助任何人。
回答by Manik
This is how did it works like a charm.
这就是它的魅力所在。
CSS
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);
}
in _layout file inside body tag but outside the container div. Every time page loads it shows loading. Once page is loaded JS fadeout(second)
在 body 标签内但在容器 div 外的 _layout 文件中。每次页面加载时都会显示正在加载。页面加载后JS淡出（第二次）
<div id="loader">
</div>
JS at the bottom of _layout file
_layout 文件底部的 JS
<script type="text/javascript">
// With the element initially shown, we can hide it slowly:
$("#loader").fadeOut(1000);
</script>
