Ajax Modal Popup Extender

Ajax Control Toolkit'te ve Modal Popup extender benim vazgeçemediğim bir araç oldu.Çoğu kez hata yönetimlerimde tercih etsemde, bazende kullanıcıları belirlediğim olaylara odaklanmasını sağlamak için kullandım.Bu ajax özelliğini bir çok sitede görüyoruz şimdi izlediğiniz Space alanında dahi var hemen bir örneğine bakalım.

Basitçe anlamak gerekirse arka planın hafif karartılarak belirlediğiniz nesnenin ekranın merkezine çıkartılması olayına Modal Popup Extender diyebiliriz. Elbette space resimler için bunu kullanmış fakat siz kullanıcınızdan bilgi alacağınız formlarda gönderebilir eklentiyi daha ileriye taşıyabilirsiniz.Bu özelliğe yakın örneklerle javascriptler varsada Ajax ile daha şık bir yapıda olduğunu söylemeliyim.

Ben örnekte Login alanı yapacağım Giriş yapın linkine tıklayan kullanıcı Modal Popup içinde Kullanıcı adı ve şifresini girecek ve Login olacak.Bu basit örnek için çözüme sırasıyla bir (linkbutton), sonra bir (panel) ve (modal popup extender) ekleyeceğim bütün bunlardan sonra aşağıdaki kod bloğumu elde etmiş olacağım.

  

 

Bu kodları açıklarsak,

anlaşılacağı gibi Link button ID="Login" ve Modal ExtenderExtender TargetControlID="Login" dir ve bu linke tıklandığında  PopupControlID="Panel_Modal_Content"adlı son kısımda kodu görülen panelin açılmasını istiyoruz demek oluyor.Burda dikkat edilmesi gereken önemli detayları birde adım adım yazmayı istiyorum.

1-Linkbutton ID ile Extender TargetControlID aynı olmalıdır.

2-Panel ID ileExtender PopupControlID aynı olmalıdır.

3-ExtenderCssClass belirlenmeli ve düzenlenmelidir (aşağıda açıklayacağım)

4-DropShadow="true" değerini almalıdır.

bu adımları anlamışsak artık asp panelin içine bahsettiğimiz gibi bir hazır login kontrolü yazalım...

Modal Popup Extender uygulamak zengin fikirlerinize göre değişir benim örneğim ise bu kadardır.Bittimi hayır en can alıcı nokta ki bu ekranın karatılması aşamasında birde CSS yazacağız. Projede CSS classlar eklemek style kullanmayı önceki bloglarda anlatmıştım.Bu yüzden direk yazıyorum.

.Panel_Modal
{ background-color:Black;
 filter:alpha(opacity=70);
 opacity:0.7;}

.Panel_Modal_Content
{
 border: thin solid #808080;
 background-color: #333333;
 padding: 2px;
 width: 450px;
 color: #FFFFFF;
}

özellikleri yukarıdaki gibi style dosyanıza eklerseniz.Modal Popup Extender ile Login girişi pencerenizde hazırlanmış olacaktır.