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