Table of Contents

Задача

Показать изображение в формате gif при обновлении данных на странице ASP (например - postback или загрузка и обработка файлов)
https://www.aspsnippets.com/Articles/Display-loading-image-while-PostBack-calls-in-ASPNet.aspx

Файлы

loader.js

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 });
        loading.css({ top: 500, left: left });
    }, 200);
}
$('form').live("submit", function () {
    ShowProgress();
});

style.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;
    }

Код

В сам код на странице добавляем:

    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="loader.js"></script>

jquery.min.js можно сохранить в локальный файл и поменять src.

<body>

        <div class="loading" align="center">
            Uploading Files. Please wait...<br />
            <br />
            <img src="images/loader.gif" alt="" />
        </div>

Для Postback

Для того, чтобы показывать gif на постбеках нужно добавить к контролам, вызывающим постбек onchange=“ShowProgress() :

<asp:DropDownList ID="Year_DropDownList" runat="server"  AutoPostBack="true" OnSelectedIndexChanged="Refresh_BillingTable" onchange="ShowProgress()"></asp:DropDownList>

Если используются динамические контролы, то нужно добавить аттрибут onchange:

      DropDownList Month_DropDownList = new DropDownList();
      Month_DropDownList.ID = "Month_DropDownList";
      Month_DropDownList.Attributes.Add("onchange", "ShowProgress()");