Показать прогресс img по gridview - PullRequest
Новая
       19

Показать прогресс img по gridview

2 голосов
/ 10 марта 2011

Я хочу показать изображение прогресса, когда GridView выполняет какую-либо операцию. Когда я нажимаю на ссылку linkbtn GridView. Я написал некоторый код в выделенном коде, который занимает некоторое время. Тем временем я хочу показать прогресс Image 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>

Ответы [ 3 ]

4 голосов
/ 10 марта 2011

взгляните на эту очень хорошую статью, объясняющую шаг за шагом Эффективное использование UpdateProgress Control

2 голосов
/ 10 марта 2011

Использование 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
}
0 голосов
/ 14 июля 2017

Пример загрузки / загрузки изображения:

.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

...