Ajax Control Toolkit - Modal Popup Extender

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çıklama:

Modal popup extender kullanıcının sayfanın arkada kalan kısmı ile iliski kurmasını engelleyerek kullanıcının sayfayı görmesine izin verir. Modal içerik bir kontroller hiyerarsisi olabilir ve üzerine herhangi bir stil uygulanmıs bir bakcgroundun üzerinde gösterilebilir. Gösterildigi zaman sadece modal içerikle iliski kurulur ve sayfanın geri kalanına tıkladıgınızda hiç bir sey olmaz. Kullanıcı modal içerikle iliski kurarken bir ok/cancel butonunun kullanılması modal içerigin çalısmasına izin vermez ve özel bir scripti çalıstırır. Özel script genellikle modal mod aktifken yapılan degisiklikleri uygulayacaktır. Eger bir postback gerekliyse, basit olarak ok/cancel kontrolüne postback için izin verir ve sayfa yenilenir.

Özellikleri:

· TargetControlID - Modal popup'ı açtıracak olan kontrol

· PopupControlID - Açılacak olan modal popup kontrolü

· BackgroundCssClass - Modal popup'un gösterilecegi background CSS sitil adı

· DropShadow - Modal Popup'a drop-shadow özelligi kazandırmak için. Default olarak true gelir

· OkControlID - ModalPopup'ı çalıstıran kontrolün ID'si

· OnOkScript - OkControlID tıklandıgında çalısacak script.

· OkCancelID - ModalPopup'ı iptal eden kontrolün ID'si

· OkCancelScript - CancelControlID tıklandıgında çalısacak script.

Modal Popup Extender kontrolünü tanıdıktan sonra örnegimize geçelim.

Örnek Uygulama

Bir Spor Haberleri sitesi yaptıgımızı varsayalım. Burada farklı takımları tutan kisiler girecektir. Biz bu sayfadaki haberleri kullanıcıya göre özellestirmek isteyebiliriz. Kullanıcıda okudugu haberi kendi tuttugu takımın renklerin de görmek isteyebilir. Bunun için Modal Popup Extender Konrolünü Kullanabiliriz.

Yeni bir Atlas Projesi Açalım.

Sayfamızda herhangi bir haberi yayınlayacagımızı varsayalım. Sayfamıza 1 Modal Popup Extender, 1 adet linkbutton 4 input radio, 4 label ve 2 button kontrolü ekleyelim. Ben sayfama asagıdaki gibi bir haber ekledim.

Yapacagımız islemden kısaca bahsedeyim. Kullanıcı haber detayını okurken sayfasını kendine göre özellestirecek. Bunun için linkbutton'a (sayfayı özellestir) tıklayacak ve kendine göre olan sitili seçecek ve seçmis oldugu sitil sayfaya uygulanacak.

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

<br />

<span style=" color: #ff3366; font-family: Verdana"><strong>Türkiye:1

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

<br /><br />

<div>

<p id="Metin">

Italya (A) Milli Futbol Takımı ile Türkiye (A) Milli Futbol Takımı’nın Italya’da

yaptıgı özel maç 1-1 sona erdi.

<br />

51. dakikada Emre çalımlarla girdigi ceza alanı içerisinde açısını kaybettikten

sonra attıgı sert sutta top yan direge çarparak auta çıktı.

<br />

65. dakikada Ibrahim Üzülmez’in ortasında topun gelisine uzak direkte Halil’in sutunda

defansa çarparak hızını kaybeden mesin yuvarlagı defans oyuncuları uzaklastırdı.<br />

67. dakikada Di Natale’nin ceza alanı içerisinden attıgı sert sutta topu kaleci

Volkan güçlükle kontrol etti.

<br />

21 bin 334 seyircinin 250.481 Avro hasılat bırakarak izledigi Türkiye-Italya özel

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

<br />

Stat: Atleti Azzuri D’italia

<br />

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

Buragina xxx (Isviçre)

<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 Altıntop 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

Ajansı)

</p>

</div>

Haberimizi bir paragraf satırı içerisinde kullanıcıya gösterecegiz.

Simdi açacagımız ModalPopup' için panel ve panel içerisindeki kontrolün kodlarına geçelim

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

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

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

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

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

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

<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 adlı bir fonksiyon ve içerisinde uygulanacak sitilin adı var. Simdi isterseniz o sitilleri yazalım.

/*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:verdana;

font-size:10pt;

}

.Fenerbahce2

{

background-color:yellow;

color:navy;

font-family:verdana;

font-size:10pt;

}

.Besiktas

{

background-color:black;

color:white;

font-family:verdana;

font-size:10pt;

}

.Galatasaray {

background-color:red;

color:yellow;

font-family:verdana;

font-size:10pt;

}

/*Popup Control*/

.popupControl{

background-color:White;

position:absolute;

visibility:hidden;

}

</style>

Sitillerimizi de tamamladıktan sonra. Kullanıcı Modal Sayfasını açtıktan sonra yapacagımız degisiklikleri kullanıcının sayfasına uygulayacak kodları yazalım. Asagıdaki javascript Metin adını verdigimiz paragrafın CssClassName özelligine uygulanacak.

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, artık projemizi çalıstırabiliriz.

Sayfayı Özellestirin butonuna tıklayalım;

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

Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim.

Sem GÖKSU
MCP | MCAD.NET

Örnek Kodlar için mail adresimi kullanabilirsiniz

askisem@hotmail.com

Kaynaklar

http://atlas.asp.net

Ingilizce Çevirimlerde yardımcı olanlar: Enis Eftekin ve Dilara Kilercioglu

Blog

Ajax Control Toolkit - Modal Popup Extender

Yorum (2)

Yorum Yaz