Makale Özeti

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

Makale

Modal Popup Extender

Açıklama:

Modal popup extender kullanıcının sayfanın arkada kalan kısmı ile ilişki kurmasını engelleyerek kullanıcının sayfayı görmesine izin verir. Modal içerik bir kontroller hiyerarşisi olabilir ve üzerine herhangi bir stil uygulanmış bir bakcgroundun üzerinde gösterilebilir. Gösterildiği zaman sadece modal içerikle ilişki kurulur ve sayfanın geri kalanına tıkladığınızda hiç bir şey olmaz. Kullanıcı modal içerikle ilişki kurarken bir ok/cancel butonunun kullanılması modal içeriğin çalışmasına izin vermez ve özel bir scripti çalıştırır. Özel script genellikle modal mod aktifken yapılan değişiklikleri uygulayacaktır. Eğer 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österileceği background CSS sitil adı

·                  DropShadow – Modal  Popup’a drop-shadow özelliği kazandırmak için. Default olarak true gelir

·                  OkControlID – ModalPopup’ı çalıştıran kontrolün ID’si

·                  OnOkScript – OkControlID tıklandığında çalışacak script.

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

·                  OkCancelScript - CancelControlID tıklandığında çalışacak script.

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

Örnek Uygulama

Bir Spor Haberleri sitesi yaptığımızı varsayalım. Burada farklı takımları tutan kişiler girecektir. Biz bu sayfadaki haberleri kullanıcıya göre özelleştirmek isteyebiliriz. Kullanıcıda okuduğu haberi kendi tuttuğu 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ınlayacağı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 aşağıdaki gibi bir haber ekledim.

Yapacağımız işlemden kısaca bahsedeyim. Kullanıcı haber detayını okurken sayfasını kendine göre özelleştirecek. Bunun için linkbutton’a (sayfayı özelleştir) tıklayacak ve kendine göre olan sitili seçecek ve seçmiş olduğu sitil sayfaya uygulanacak.

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

        <br />

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

            - İtalya: 1 </strong></span>

            <br /><br />

       <div>      

       <p id="Metin">

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

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

           <br />

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

           sonra attığı sert şutta top yan direğe çarparak auta çıktı.

           <br />

           65. dakikada İbrahim Üzülmez’in ortasında topun gelişine uzak direkte Halil’in şutunda

           defansa çarparak hızını kaybeden meşin yuvarlağı defans oyuncuları uzaklaştırdı.<br />

           67. dakikada Di Natale’nin ceza alanı içerisinden attığı sert şutta topu kaleci

           Volkan güçlükle kontrol etti.

           <br />

           21 bin 334 seyircinin 250.481 Avro hasılat bırakarak izlediği Türkiye-İtalya özel

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

           <br />

           <br />

           Stat: Atleti Azzuri D’italia

           <br />

           <br />

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

           Buragina xxx (İsviçre)

           <br />

           <br />

           İtalya: 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üştü x (Dk. 9 Volkan x), Hamit Altıntop xx (Dk. 75 Nuri x), Gökhan Zan

           xx, Servet xx, İbrahim Üzülmez xx, Sabri xx (Dk. 83 İbrahim 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 Şükür xx (Dk. 61 Halil xx)<br />

           <br />

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

           Ajansı)

       </p>

       </div>

  

Haberimizi bir paragraf satırı içerisinde kullanıcıya göstereceğiz.

Şimdi açacağı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 />

            <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="Beşiktaş 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="İptal" CssClass="sitil4" />

                    </div>

            </asp:Panel>

Kodlarda onClick() eventinde de gördüğünüz gibi SitilBelirle adlı bir fonksiyon ve içerisinde uygulanacak sitilin adı var. Şimdi isterseniz o sitilleri yazalım. 

<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: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 yapacağımız değişiklikleri kullanıcının sayfasına uygulayacak kodları yazalım. Aşağıdaki javascript Metin adını verdiğimiz paragrafın CssClassName özelliğine 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, artık projemizi çalıştırabiliriz.

Sayfayı Özelleştirin butonuna tıklayalım;

Ben en üstteki Fenerbahçe Sitili’ni seçtim (: işte sonuç (:

Bu makalenin de sonuna geldik, başka 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://atlas.asp.net  

İngilizce Çevirimlerde yardımcı olanlar: Enis Eftekin ve Elçin Kilercioğlu


[Yukarı]