ASP.net显示＆QUOT;装载＆QUOT;像每次code执行时 [英] ASP.net Display "loading" image every time code executes

问题描述

必须有一个非常简单的方法来做到这一点，但我一直没能找到答案。

There must be a very simple way to do this, but I haven't been able to find the answer.

我写的作品与加载数据的应用程序，它基本上是一帮的，与数据这样或那样的工作控件的Web窗体。无论如何，我有从5-15秒的任何地方加载时间，我想，使其更明显，他们的请求正在处理该用户。

The application I've written works with a loads of data, it's basically a webform with a bunch of controls that work with data in one way or another. Anyway, I have loading times of anywhere from 5-15 seconds and I'd like to make it more obvious to the user that their request is being processed.

我想要做的就是添加一些将要显示随时后端code正在执行的加载图像。更妙的是，当显示后端code已超过几秒钟执行加载图像。

What I'd like to do is add a loading image of some kind that will be displayed anytime backend code is executing. Even better, display the loading image when backend code has been executing for more than a few seconds.

道歉，如果这个问题不清楚，noobish或已经有了答案。我是那种一个新的开发者，也是新的StackOverflow。 ：）

Apologies if this question is unclear, noobish or has already been answered. I'm kind of a new developer and also new to StackOverflow. :)

推荐答案

您可以使用jQuery BlockUI这一点。链接至演示。这应该适用于所有的情况下，（完全回发和局部回传）。

You can use jquery BlockUI for this. Link to Demo. This should work for all your cases (full postback and partial postback).

添加事件处理程序的BeginRequest 和 endRequest 的 PageRequestManager 。
在 BeginRequestHandler 你就可以开始你的自定义设置，并在 EndRequestHandler 隐藏加载指示灯显示负载指示。如果你不希望阻止整个页面那么这个插件有选项来显示一个元素负载指示（例如在网页专区内，请参阅演示页）

Add event handlers for beginRequest and endRequest of PageRequestManager. In the BeginRequestHandler you can start displaying the loading indicator with your customized settings and in the EndRequestHandler you hide the loading indicator. If you don't want to block the whole page then this plugin has option to show the loading indicator for an element (eg. within a div in the page, refer the demo page)

<script type="text/javascript">
    function pageLoad(sender, args) {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_beginRequest(BeginRequestHandler);
        prm.add_endRequest(EndRequestHandler);
    }

    function BeginRequestHandler(sender, args) {
        showLoadingUI();
    }

    function EndRequestHandler(sender, args) {
        $.unblockUI();
    }

    function showLoadingUI() {
        $.blockUI({
            message: '<h3><img src="../images/ajax-loader.gif" /> <br /> <span style="font-family: Tahoma,Verdana,Arial, Sans-Serif; font-size: 12px; color: #1390c6;"> Loading...</span></h3>',
            showOverlay: true,
            css: {
                width: '130px', height: '110px',
                border: 'none',
                padding: '10px',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                opacity: .9
            }
        });
    }
</script>

还记得引用了jQuery和blockui插件无论从CDN或从本地应用程序的脚本。

Also remember to reference the jquery and the blockui plugin scripts from either CDN or from your local application.

<script type="text/javascript" src="jquery1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.blockUI.js"></script>

这篇关于ASP.net显示＆QUOT;装载＆QUOT;像每次code执行时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！