Задача

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

Файлы

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();
});
    .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.

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

Для того, чтобы показывать 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()");
  
Enter your comment. Wiki syntax is allowed:
 
  • ms_windows_ms_sql/asp_show_loading_gif_on_postback_and_submit.txt
  • Last modified: 2019/02/11 09:13
  • by 127.0.0.1