Yazılımcının Günlüğü | YazilimGunlugu.Com
Arama
Makale Kategorileri
Üye Girişi
Şuanki online üyeler()
Aktif üye bulunmamaktadır.


AJAX Control Toolkit-Modal Popup Extender

Yazar: Sem GÖKSU

Kategori: ASP.NET

Eklenme Tarihi: 22.05.2007 02:28:44

Merhaba arkadaşlar bu makalemizde AJAX modal popup extender kontolünün nasıl kullanıldığına göz atacağız.

Modal Popup Extender

Açiklama:

Modal pop up extender kullanıcının sayfanin arkada kalan kismi ile iliski kurmasini engelleyerek kullanıcının sayfayi görmesine izin verir. Modal içerik bir kontroller hiyerarsisi olabilir ve üzerine herhangi bir stil uygulanmis bir bakcgroundun üzerinde gösterilebilir. Gösterildigi zaman sadece modal içerikle iliski kurulur ve sayfanin geri kalanina tikladiginizda hiç bir şey olmaz. Kullanici modal içerikle iliski kurarken bir ok/cancel butonunun kullanilmasi modal içerigin çalismasina izin vermez ve özel bir scripti çalistirir. Özel script genellikle modal mod aktifken yapilan degisiklikleri uygulayacaktir. Eger bir postback gerekliyse, basit olarak ok/cancel kontrolüne postback için izin verir ve sayfa yenilenir.

Özellikleri:
· TargetControlID - Modal popup’i açtiracak olan kontrol
· PopupControlID – Açilacak olan modal popup kontrolü
· BackgroundCssClass – Modal popup’un gösterilecegi background CSS sitil adi
· DropShadow – Modal Popup’a drop-shadow özelligi kazandırmak için. Default olarak true gelir
· OkControlID – ModalPopup’i çalıştıran kontrolün ID’si
· OnOkScript – OkControlID tiklandiginda çalisacak script.
· OkCancelID - ModalPopup’i iptal eden kontrolün ID’si
· OkCancelScript - CancelControlID tiklandiginda çalisacak script.

Modal Popup Extender kontrolünü tanidiktan sonra örnegimize geçelim.

Örnek Uygulama

Bir Spor Haberleri sitesi yaptığımizi varsayalim. Burada farklı takimlari tutan kisiler girecektir. Biz bu sayfadaki haberleri kullaniciya göre özellestirmek isteyebiliriz. Kullanicida okudugu haberi kendi tuttugu takimin renklerin de görmek isteyebilir. Bunun için Modal Popup Extender Konrolünü Kullanabiliriz.

Yeni bir Atlas Projesi Açalim.

Sayfamizda herhangi bir haberi yayinlayacagimizi varsayalim. Sayfamiza 1 Modal Popup Extender, 1 adet linkbutton, 4 input radio, 4 label ve 2 button kontrolü ekleyelim. Ben sayfama asagidaki gibi bir haber ekledim.

Yapacagimiz işlemden kisaca bahsedeyim. Kullanici haber detayini okurken sayfasini kendine göre özellestirecek. Bunun için linkbutton’a (sayfayi özellestir) tiklayacak ve kendine göre olan sitili seçecek ve seçmis oldugu sitil sayfaya uygulanacak.

<asp:LinkButton ID="LinkButton1" runat="server">Sayfayi Özellestirin</asp:LinkButton><br />

<br />

<span style="font-size: 11px; color: #ff3366; font-family: Trebuchet MS"><strong>Türkiye:1

- Italya: 1 </strong></span>

<br /><br />

<div>

<p id="Metin">

Italya (A) Milli Futbol Takimi ile Türkiye (A) Milli Futbol Takimi'nin Italya'da

yaptigi özel maç 1-1 sona erdi.

<br />

51. dakikada Emre çalimlarla girdigi ceza alani içerisinde açisini kaybettikten

sonra attigi sert sutta top yan direge çarparak auta çikti.

<br />

65. dakikada Ibrahim Üzülmez'in ortasinda topun gelisine uzak direkte Halil'in sutunda

defansa çarparak hizini kaybeden mesin yuvarlagi defans oyunculari uzaklastirdi.<br />

67. dakikada Di Natale'nin ceza alani içerisinden attigi sert sutta topu kaleci

Volkan güçlükle kontrol etti.

<br />

21 bin 334 seyircinin 250.481 Avro hasilat birakarak izledigi Türkiye-Italya özel

maç 1-1 sona erdi.<br />

<br />

<br />

Stat: Atleti Azzuri D'italia

<br />

<br />

Hakemler: Massimo Busacca xxx (Isviçre), Matthias Arnet xxx (Yunanistan), Francesco

Buragina xxx (Isviçre)

<br />

<br />

Italya: Buffon xx (Dk. 46 Amelia xx), Zambrotta xx (Dk. 67 Palombo xx), Materazzi

xx, Cannavaro xx (Dk. 46 Barzagli xx), Oddo xx (Dk. 46 Zaccardo xx), Mauri xx (Dk.

46 Aquilani xx), De Rossi xx (Dk. 67 Pasquel xx), Brocchi xx (Dk. 57 Rocchi xx),

Camaranesi xx (Dk. 57 Barone xx), Di Natale xxx, Gilardino x (Dk. 46 Bonazzoli xx)<br />

<br />

Türkiye: Rüstü x (Dk. 9 Volkan x), Hamit Altintop xx (Dk. 75 Nuri x), Gökhan Zan

xx, Servet xx, Ibrahim Üzülmez xx, Sabri xx (Dk. 83 Ibrahim Toraman x), Mehmet Aurelio

xx (Dk. 83 Hüseyin x), Emre Belözoglu xxx (Dk. 75 Gökdeniz x), Arda xxx (Dk. 83

Fatih Tekke xx), Tuncay xx (Dk. 61 Tümer x), Hakan Sükür xx (Dk. 61 Halil xx)<br />

<br />

Goller: Dk. 39 Di Natale (Italya), Dk. 42 Materazzi (kendi kalesine) (Türkiye) (Anadolu

Ajansi)

</p>

</div>

Haberimizi bir paragraf satiri içerisinde kullaniciya gösterecegiz.

Simdi açacagimiz ModalPopup’ için panel ve panel içerisindeki kontrolün kodlarina geçelim

<asp:Panel ID="Panel1" runat="server" Height="50px" Width="264px" CssClass="modalPopupSitili">

Lütfen Sayfa Özelliklerinizi Seçiniz<br /><br />

<input id="Radio1" name="Radio" onclick="SitilBelirle = 'Fenerbahce';"type="radio" />

<asp:Label ID="Label1" runat="server" CssClass="Fenerbahce" Text="Fenerbahçe Sitili" Width="136px"></asp:Label><br />

<input id="Radio2" name="Radio" onclick="SitilBelirle = 'Fenerbahce2';"type="radio" />

<asp:Label ID="Label2" runat="server" CssClass="Fenerbahce2" Text="Fenerbahçe Sitili - 2" Width="136px"></asp:Label><br />

<input id="Radio3" name="Radio" onclick="SitilBelirle = 'Besiktas';"type="radio" />

<asp:Label ID="Label3" runat="server" CssClass="Besiktas" Text="Besiktas Sitili" Width="136px"></asp:Label><br />

<input id="Radio4" name="Radio" onclick="SitilBelirle = 'Galatasaray';"type="radio" />

<asp:Label ID="Label4" runat="server" CssClass="Galatasaray" Text="Galatasaray Sitili" Width="136px"></asp:Label><br />

<br /> <div align="center">

<asp:Button ID="btnSec" runat="server" Text="Sitili Seç" CssClass="sitil1" />

<asp:Button ID="btnIptal" runat="server" Text="Iptal" CssClass="sitil4" />

</div>

</asp:Panel>

Kodlarda onClick() eventinde de gördügünüz gibi SitilBelirle adli bir fonksiyon ve içerisinde uygulanacak sitilin adi var. Simdi isterseniz o sitilleri yazalim.

<style type="text/css">

/*Modal Popup*/

.ModalPopupBackgroundSitili

{

background-color:yellow;

filter:alpha(opacity=70);

opacity:0.7;

}

.modalPopupSitili {

background-color:#ffffdd;

border-width:3px;

border-style:solid;

border-color:Gray;

padding:5px;

width:300px;

}

.Fenerbahce

{

background-color:navy;

color:yellow;

font-family:Trebuchet MS;

font-size:11px;

}
.Fenerbahce2

{
background-color:yellow;

color:navy;

font-family:Trebuchet MS;

font-size:11px;

}
.Besiktas

{

background-color:black;

color:white;

font-family:Trebuchet MS;

font-size:11px;

}

.Galatasaray {

background-color:red;

color:yellow;

font-family:Trebuchet MS;

font-size:11px;

}

/*Popup Control*/

.popupControl{

background-color:White;

position:absolute;

visibility:hidden;

}

</style>

Sitillerimizi de tamamladiktan sonra. Kullanici Modal Sayfasini açtiktan sonra yapacagimiz degisiklikleri kullanıcının sayfasina uygulayacak kodlari yazalim. Asagidaki javascript Metin adini verdigimiz paragrafin CssClassName özelligine uygulanacak.

<script type="text/javascript">

var SitilBelirle;

function SitilSec() {

$('Metin').className = SitilBelirle;

}

</script>

Son olarak Modal Popup Extender Kontrolünün özelliklerini belirleyelim.

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server">

<cc1:ModalPopupProperties

TargetControlID="LinkButton1"

PopupControlID="Panel1"

BackgroundCssClass="ModalPopupBackgroundSitili"

DropShadow="true"

OkControlID="btnSec"

OnOkScript="SitilSec()"

CancelControlID="btnIptal"

/>

</cc1:ModalPopupExtender>

Evet, artik projemizi çalistirabiliriz.

Sayfayi Özellestirin butonuna tiklayalim;

Ben en üstteki Fenerbahçe Sitili’ni seçtim (: iste sonuç (:

Bu makalenin de sonuna geldik, baska bir makalede görüşmek üzere başarı ve iyi günler dilerim.

Sem GÖKSU
MCP | MCAD.NET | MCTS

Örnek Kodlar için mail adresimi kullanabilirsiniz

askisem@hotmail.com

Kaynaklar

http://ajax.asp.net

Yazar Hakkında Yorum Yok Yorum Yaz Yazara ait diğer Makaleler
Tema
Anket
ASP.NET MVC'yi Projeleriniz de kullandınız mı?


En Çok Okunan Makaleler
En Son Eklenen Makaleler
Soru Merkezinde Bekleyenler
Ana Sayfa | Hakkımızda | Editörler | Yazarlar | RSS RSS | İletişim
Yazılım Günlüğü 2007-2009 © Tüm Hakları Saklıdır.