在gridview上显示进度img

我想在GridView执行一些操作时显示进度图像。什么时候，我点击GridView的更新linkbtn。我已经写了一些代码隐藏的代码，这需要一些时间同时，我想显示进度图片OVER GridView通知用户正在执行一些操作。 Progress Image应该覆盖GridView的全部大小。如何实现这一目标？在gridview上显示进度img

示例代码：

<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>

来源

2011-03-10 Tuscan

看看这个非常好的文章一步一步解释 Using UpdateProgress Control Effectively

来源

2011-03-10 04:48:10

使用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 
}

来源

2011-03-10 04:42:19

进度条/图像加载例如：

的.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

来源

2017-07-14 14:58:25 AsifAli72090

在gridview上显示进度img

回答

相关问题