Merhaba arkadaşlar,Ajax ile işlem yaparken ard arda sorgular gönderilmesini engellemek için yada o anda yapılan işlemin bitmesini beklemek için bu yola başvurmanız gerekebilir.

Bu işi CSS kullanarak çözeceğiz.  Hazırlamış olduğumuz CSS i UpdateProgress in ProgressTemplate özelliği ile birlikte kullanacağız. Aşağıda örnek bir görüntü verilmiştir.

 

 

Gelelim kodlama bölümüne;

 

öncelikle CSS dosyasımıza aşağıdakisatırları eklemiz gerekiyor.

.overlay {
        position: fixed;
        z-index: 99;
        top: 0px;
        left: 0px;
        background-color: #FFFFFF;
        width: 100%;
        height: 100%;
        filter: Alpha(Opacity=70);
        opacity: 0.70;
        -moz-opacity: 0.70;
    }
    * html .overlay {
        position: absolute;
        height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
        width: expression(document.body.scrollWidth > document.body.offsetWidth ? document.body.scrollWidth : document.body.offsetWidth + 'px');
    }
    .loader {
        z-index: 100;
        position: fixed;
        width: 120px;
        margin-left: -60px;
        top: 50%;
        left: 50%;
    }
    * html .loader {
        position: absolute;
        margin-top: expression((document.body.scrollHeight / 4) + (0 - parseInt(this.offsetParent.clientHeight / 2) + (document.documentElement && document.documentElement.scrollTop || document.body.scrollTop)) + 'px');
    }

 

 

Updateprogress nesnem ise aşağıdaki şekildedir.

  <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
        <ProgressTemplate>
            <asp:Panel ID="Panel1" CssClass="overlay" runat="server">
                <asp:Panel ID="Panel2" CssClass="loader" runat="server" Font-Bold="True" Font-Size="24pt" Width="268px">
                    İşlem Yapılıyor
                    <br />
                    Lütfen Bekleyiniz..
                </asp:Panel>
            </asp:Panel>
        </ProgressTemplate>
        </asp:UpdateProgress>

 

 

 Gördüğünüz gibi çok kolay bir yöntem.

 Faydası olması dilegiyle

 

Mustafa KOÇER

mkocer@dotnetkosesi.com

 

 

Bu yazıyı ilk değerlendiren siz olun

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5