在gridview上显示进度img答案

【问题标题】：Show progress img over gridview在gridview上显示进度img
【发布时间】：2011-07-12 10:47:01
【问题描述】：

我想在 GridView 执行某些操作时显示进度图像。什么时候，我点击 GridView 的更新链接。我在代码隐藏中编写了一些代码，这需要一些时间同时，我想显示进度图像 OVER GridView 以通知用户正在执行某些操作。进度图像应覆盖 GridView 的全尺寸。如何做到这一点？

示例代码：

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div style="background-color:Gray">
            <div>
                <asp:GridView ID="GridView1" runat="server">
                </asp:GridView>
            </div>
            <div style="position:absolute;">
                <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                    <ProgressTemplate>
                        <img id="imgProgress" src="loading.gif" />
                    </ProgressTemplate>
                </asp:UpdateProgress>
            </div>
        </div>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
    </ContentTemplate>
</asp:UpdatePanel>

【问题讨论】：

标签： asp.net ajax gridview updatepanel progress-bar

【解决方案1】：

使用Sys.WebForms.PageRequestManager。

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args)
{
   //show a busy modal
}
function EndRequestHandler(sender, args)
{
   //hide the busy modal
}

【讨论】：

【解决方案2】：

进度条/图片加载示例：

.aspx 代码：

<asp:Button ID="btnSubmit" runat="server" Text="Load Customers" OnClick="btnSubmit_Click" />
<hr />
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="CustomerId" HeaderText="Customer Id" />
        <asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
        <asp:BoundField DataField="City" HeaderText="City" />
    </Columns>
</asp:GridView>
<div class="loading" align="center">
    Loading. Please wait.<br />
    <br />
    <img src="loader.gif" alt="" />
</div>

.CSS 代码：

<style type="text/css">
.modal
{
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    z-index: 99;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    min-height: 100%;
    width: 100%;
}
.loading
{
    font-family: Arial;
    font-size: 10pt;
    border: 5px solid #67CFF5;
    width: 200px;
    height: 100px;
    display: none;
    position: fixed;
    background-color: White;
    z-index: 999;
}
</style>

Javascript 和 JQuery 代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">

function ShowProgress() {
    setTimeout(function () {
        var modal = $('<div />');
        modal.addClass("modal");
        $('body').append(modal);
        var loading = $(".loading");
        loading.show();
        var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
        var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
        loading.css({ top: top, left: left });
    }, 200);
}
$('form').live("submit", function () {
    ShowProgress();
});

</script>

链接： https://www.aspsnippets.com/Articles/Display-loading-progress-image-when-Page-Loads-or-does-PostBack-using-ASPNet.aspx

【讨论】：