Makale Özeti

ASP.net de ModalPopupExtender, popup dediğimiz sayfa içerisinde açılan pencereyi ajax kütüphanesinde bulunan ModalPopupExtender ile aşağıdaki örnekle kullanımını açıklayacağım. Veritabanından , drop liste çekilen ID ve Başlığı seçtikten sonra, butona bastığımızda, ModalPopupExtender devreye girsin popup pencere de seçtiğimiz video oynatılsın.

Makale

İlk başta Access te bir veritabanı oluşturalım, Ben aşağıdaki gibi oluşturuyorum siz kendinize göre bir db oluşturun;

 

 

 

Sayfa ya; 2 droplist, 1 buton.

Popup penceresi için;

  • Panel,
  • Modal gizlemek için 1 tane buton,
  • Video oynatma kodu (  burada youtube kodu kullandım )
  • ScriptManager1

Video Oynatma Kodu youtube kodudur;

<iframe width="560" height="315" src="video_adresi" frameborder="0" allowfullscreen></iframe>

 

 

IDList e Tablomuzdaki IDleri çekelim,

 

 

BaslikList ' de; IDList de seçilen ID e göre Video başlığını getireceğiz.

 

 

 

Sonra IDList den ID kolonunu almak için datasource nin Contol özelliğinden, IDList i seçiyoruz ve bu şekilde 2 listeyi birbirine bağlıyoruz.

 

 

SELECT [VideoBasligi] FROM [VideoListesi] WHERE ([ID] = ?)


Şimdi popup olarak görünecek pencereyi tasarlayalım

  • Panel ekliyoruz, panelin sağ tarafında çıkan oktan ModalPopupExtender ı ekliyoruz,
  • popup u gizlemek için bir tane buton,
  • ve Datasource den urlyi çekip;videoyu oynatmamız için datalist ekliyoruz,



SecilenVideoList de url si çekilecek olan verinin ID isini IDlist de seçtiğimiz veri olacağı için,
SecilenVideoList control özelliğine aynı işlemi yapıyoruz.

SELECT * FROM [VideoListesi] WHERE ([ID] = ?)

 


ModalPopupExtender Ayarları

  • TargetControlID="Popup u kontol edecek nesnenin id si"  ---> Popup u harekete geçirecek buton
  • PopupControlID="Popup penceresi olarak atadığımız nesne id"  --->  örnğ; Panel
  • PopupDragHandleControlID="Popup penceresi olarak atadığımız nesne id" Drag="true" ---> Popup un ekranda hareket etmesi için.
  • BackgroundCssClass="popup css"  ---> popup açılınca arkpilanı koyulaştırmak için;
   .panel {
            background-color: black;
            filter: alpha(opacity=80);
            opacity: 0.8;
        }


DataList;

 

             <asp:DataList ID="VideoListe" runat="server" DataSourceID="SecilenVideoList">
                    <ItemTemplate>
                        <table>
                            <tr>
                                <td style="text-align: center">
                                    <iframe allowfullscreen="" frameborder="0" src='<%# Eval("VideoUrl") %>' style="height: 400px; width: 662px"></iframe>
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </asp:DataList>



Tüm bağlantıları yaptıktan sonra Popup u görüntülemek için, Göster butonuna;

      protected void GosterButon_Click(object sender, EventArgs e)
        {
            try
            {
                Panel_ModalPopupExtender.Show();
            }
            catch
            {
            }
        }


Pencereyi gizlemek için Kapat butonuna;

 protected void KapatButon_Click(object sender, EventArgs e)
        {
            Panel_ModalPopupExtender.Hide();
        }

 

Son olarak modal pencere, butona basınca sayfada görünüp daha sonra popup şeklini aldığından,
görüntü hoş olmuyor, bunun için

PopupControlID="Panel" de belirtilen nesnesine;

style="display:none"


 
kodunu eklerseniz bu bozukluğu giderebilirsiniz.

 

Sonuç;

 

Projeyi indir: ModalPopup Kullanımı.rar


Resul Silay