Please Click Here to see the this article in English.
Ajax ile asenkron postback yaptığımız web sayfalarında, sayfanın post edilmesi ve tekrar yüklenmesi, normal bir sayfada olduğu gibi sayfanın kaybolup tekrar gelmesi şeklinde görülmez. Bu durumda da ziyaretçi acaba "bir hata mı oldu" veya "acaba sayfayı gönderemedim mi" diye düşünebilir. Bunun için sayfalarımızda ziyaretçileri/kullanıcıları işlemin devam etmek olduğu yönünde uyarmamız faydalı ve hatta gereklidir. Ancak bir adım daha ileri gidersek yani uyarı vermenin yanında ziyaretçinin işlem bitene kadar sayfada başka bir şey yapmasını engellememiz gerekebilir. Yani insiyatifi kullanıcıdan almak isteyebiliriz.
İşte sayfanın işlenmesi aşamasında hem kullanıcıyı uyarmak hem de işlem bitmeden sayfada başka bir şey yapmasını engellemek için modal progress bar, modal progress message, modal progress notifier veya her nasıl ifade ediliyorsa böyle bir şey yapmak lazım.
Modal progress olayı için bir çok değişik teknik kullanabilirsiniz. İşi disiplin etmek gerekirse yapmamız gereken 3 aşama var;
1- Sayfa asenkron postback olduğunda mesajı göstermek: Bu işlem sayfada gizli olarak duran mesajın gösterilmesinin sağlanmasıdır. İlerleyen kısımlardaki örneklerde bunun nasıl yapılabileceğini daha iyi anlayabiliriz.
2- Mesajın modal olması: Bu işin en can alıcı noktası olsa da aslında en basit kısmı. Zira göstereceğiniz mesajın(uyarının) modal olması basit birkaç css ayarı ile ilgili. Yani tüm sayfayı kaplayan ve z-index i büyük bir html objesi(örneğin 'div') ile bunu sağlayabiliriz.
3- Mesajın kaybolması: Bu aşama ise birinci aşamanın tersi. Yani sayfanın işlenmesi bitip de yeniden yüklenmesi tamamlandığında modal mesajımızı tekrar gizli hale getirme işi.
Uygulama
Şimdi olayın teorik kısmını anladıktan sonra işin pratiğine geçelim. Hedefimiz aşağıdaki resimde görünen şekilde bir uyarı mesajı çıkarmak olsun.
 |
|
Bu görüntüyü sağlamak için kullandığım html ve css bilgileri şu şekilde;
<div id="myModalProgressContainer" class="ModalProgressContainer">
<div class="ModalProgressContent">
<img src="wait.gif" alt="İşleminiz devam ediyor." /><br />
<div >Lütfen bekleyiniz...<br />Please wait...</div>
</div>
</div>
Yukarıdaki html yi manalı hale getiren css class' larımız işe şu şekilde;
.ModalProgressContainer
{z-index: 10005;position: fixed;cursor: wait; top: 0px;left: 0px;background-color: #d1d1d4; filter: alpha(opacity=50);opacity: 0.5;-moz-opacity: .50; height: 100%;width: 100%;}
ModalProgressContainer class ı sayfanın tamamını üzerini saydam gri bir tabaka ile kaplayıp sayfanın modal olmasını sağlar.
.ModalProgressContent
{padding: 10px 10px 10px 10px; position: absolute; border: solid 0px #000040; text-align: center; vertical-align: middle; font-weight: bold; top: 49%; right: 48%; }
ModalProgressContent ise sayfanın ortasındaki bekleyiniz resminin ve altında yer alan uyarı mesajının bulunduğu kısmı şekillendirir.
Tabi hemen belirteyim ki siz yukarıdaki html ve css' e bağlı kalmak zorunda değilsiniz. İstediğiniz görüntüyü elde etmek için kendi html ve css' lerinizi oluşturabilirsiniz :)
|
Modal progress için gereken html ve css' i inceledikten sonra şimdi bu mesajı(uyarıyı) nasıl gösterip gizleyebileceğimizi görelim.
Metod 1: Bu yolda sayfamızsa bir UpdatePanel ve AssociatedUpdatePanelID özelliği ile bu update panele bağlanmış bir UpdateProgress kontrolü var. Yukarıda gösterilen html' yi UpdateProgress' in <ProgressTemplate> kısmına yerleştirdiğimizde işlem tamamlanmış oluyor. Ajax kütüphasinde yer alan UpdateProgress kontrolü gerekli işlemleri bizim yerimize otomatik olarak gerçekleştiriyor.
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
.....bu kısma yukarıdaki html yi yerleştiriyoruz
<div id="myModalProgressContainer" class="ModalProgressContainer"> .............
</ProgressTemplate>
</asp:UpdateProgress>
Metod 2: Bu ikinci yolda uyarının gösterilip gizlenmesi işini kendi ellerimizle sağlayacağız. Bunun için aşağıdaki javascripti kullanacağız.
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(ShowProgressPanel);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(HideProgressPanel);
var progressPanel;
function HideProgressPanel(sender, args)
{
progressPanel = $get('myModalProgressContainer');
progressPanel.style.display='none';
}
function ShowProgressPanel(sender, args)
{
progressPanel = $get('myModalProgressContainer');
progressPanel.style.display='block';
}
</script>
Bu script ne iş yapıyor hemen anlatayım. İlk olarak Sys.WebForms.PageRequestManager.getInstance() metodu ile asenkron request olaylarını yöneten Sys.WebForms.PageRequestManager nesnesine ulaşırız. Daha sonra bu nesnenin add_beginRequest metodunu kullanarak sayfa asenkron postback olmaya başladığında ShowProgressPanel fonksiyonunun çalışmasını sağlıyoruz. Yine aynı şekilde add_endRequest metodu ile de sayfa tekrar yüklendiğinde HideProgressPanel fonksiyonunun çalışmasını sağlıyoruz. Bu fonksiyonlar da modal uyarımız gösterip gizlememizi sağlıyor.
Kıyaslama
Anlatılan bu iki yolu kıyaslarsak elbette ilk metodun kullanımı daha kolay. Ancak ikinci metodda işlemi büyük ölçüde biz yönettiğimiz için olaya tamamen hakim olabiliriz. Örneğin update panel içerisinde asenkron postback yapılmasını sağlayan 3-4 kontrol(düğme vs) olsa ancak bunlardan sadece bir tanesinin postback işleminde modal uyarımızı gösterecek olsak bunu ilk yolda gerçekleştirmek mümkün değil ya da çok zordur. Ancak ikinci yolda, PgeRequestManager tarafından ShowProgressPanel fonksiyonumuza gelen args parametresisayesinde postback in hangi kontrol tarafından kaynaklandığını anlayabilir ve duruma göre mesajı gösterip göstermemeye biz karar verebiliriz.
Bu işlemi şu şekilde gerçekleştirebiliriz;
Metod 3: Metod 2' deki ShowProgressPanel fonksiyonunu şu şekilde değiştiriyoruz.
function ShowProgressPanel(sender, args)
{
if(args.get_postBackElement().id == 'ctl00_cph_btnSave')
{
progressPanel = $get('myModalProgressContainer');
progressPanel.style.display='block';
}
}
Burada postbacki yapan kontrolün id' sinin 'ctl00_cph_btnSave' olup olmadığını kontrol ediyoruz ki bu ilk düğmemizin clientid değeridir. Görüldüğü üzere uyarının gösterilmesinde kararı biz vermiş olduk.
Son olarak şunu hatırlatmak istiyorum metod 2 ve metod3' teki kullanılan html' de metod1' dekinden farklı olarak myModalProgressPanel div nesnesinin style ını style="display: none" olarak değiştirmemiz gerekiyor. Öünkü ilk metodda panelin görünmezliğini UpdateProgress kontrolü ayarlarken diğer metodlarda bunu biz sağlıyoruz. Ve panelin sayfa ilk açıldığında görünmez olmasını sağlamak için de böyle bir style özelliği eklememiz gerekiyor.
Bu makalede değinilen örnekleri ekteki projede bulabilirsiniz.
myModalProgressWebApp.zip (320,12 kb)