Ajax ConfirmButton ve ModalPopUp Extender birlikte kullanımı.

 

Merhaba.
       Bu yazıda ASP.net ile  bir işlemi yapmadan önce onay almak için kullanılan ajax nesnesini  olan ConfirmButtonExtender ‘i inceliyoruz. Örneğin kullanıcı bir silme işlemi yapmak isteği zaman “ silmek istiyor musunuz ? “  gibi bir uyarı ile karşılaşmalı . Şimdi  örnek bir uygulama ile butona tıklayınca kullanıcya uyarı verelim .  Kullanıcı Tamam a tıklarsa ekrana  İşleminiz Başarı ile Gereçekleştirildi . diye yazalım . 

Default.aspx

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

       

        <asp:Button ID="Button1" runat="server" Font-Bold="False" Font-Size="14px"

            Text="İşlemi gerçeklerştir." Width="188px" onclick="Button1_Click"

            BorderStyle="Solid" />

     

        <cc1:ConfirmButtonExtender ID="ConfirmButon"  runat="server" ConfirmText="Bunu yapmak istediğine emin misin ?"

            Enabled="True" TargetControlID="Button1">

        </cc1:ConfirmButtonExtender>

     

                <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Size="15px"

            ForeColor="#CC3300"></asp:Label>

Default.aspx.cs     : Butonun Click eventinne

protected void Button1_Click(object sender, EventArgs e)

    {

        Label1.Text = " İşleminiz Başarı ile Gereçekleştirildi . ";

    }

Şimdi ekran görüntümze bakalım.

Burada sayfamıza bir adet ConfirmButtonExtender nesnesi ekledik ve TargetContolID=”Button1”
yazarak  uyarı penceresinin button1 e  tıklandığında çıkmasını istedik ve ConfirmText özelliğinde de uyarı  pen da yazacak olan metni belirttik.

      Şimdi  ‘ Bu ne kardeşim  ben bunu button un  OnClientClick olayına JavaScirpt kod yazarak da   yaparım   ’  dedidiğinizi  duyar gibiyim  J    . Yani (OnClientClick=”return confirm (‘  İşlemi yapmak istiyor musun ?  ’)”) şeklinde.

     Ozaman asıl konuya geleyim.               Şimdi uyarı pencerisini göze daha hoş görünecek bir şekle getirelim. Böylece özellikle Windows Xp de ki o sinir bozucu sesi de duymamış olacağız.  

Default.aspx 

Sayfasını aşağıdaki gibi değiştirelim.

 <asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>

      

<asp:Button ID="Button1" runat="server" Font-Bold="False" Font-Size="14px"

            Text="İşlemi gerçeklerştir." Width="188px"  onclick="Button1_Click"

    BorderStyle="Solid" />

           

<cc1:ConfirmButtonExtender  DisplayModalPopupID="modalpopup" ID="ConfirmButon"  runat="server" ConfirmText="Bunu yapmak istediğine emin misin ?"

            Enabled="True" TargetControlID="Button1">

        </cc1:ConfirmButtonExtender>

       

<cc1:ModalPopupExtender ID="modalpopup" runat="server" DropShadow="True"

            DynamicServicePath="" Enabled="True" TargetControlID="Button1"

            OkControlID="BtnEvet" CancelControlID="BtnHayir" PopupControlID="Panel1">

        </cc1:ModalPopupExtender>

     

        <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Size="15px"

            ForeColor="#CC3300"></asp:Label>

           

       <asp:Panel ID="Panel1" runat="server" style="display:none;"  BackColor="#CC3300" BorderColor="#663300"

            BorderStyle="Solid" BorderWidth="1px" Font-Bold="True" ForeColor="White"

            Height="115px" Width="254px" Font-Size="14px"><br />

            <center>Bunu yapmak istediğine emin misin ?</center><br /><br />

         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  

        

 <asp:Button ID="BtnEvet" runat="server" Font-Size="12px" Height="27px"

                Text="Evet" Width="79px" BackColor="White" BorderColor="#993333"

                BorderStyle="Inset" Font-Bold="True" Font-Names="Arial" ForeColor="#CC3300" />

               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

       

<asp:Button ID="BtnHayir" runat="server" Font-Size="12px" Height="27px"

                Text="Hayır" Width="79px" BackColor="White" BorderColor="#993333"

                BorderStyle="Inset" Font-Bold="True" Font-Names="Arial" ForeColor="#CC3300"/>

        </asp:Panel>

 

Ekranan Görüntümüzün Son Hali

Ne Yaptık ?     

Sayfamıza bir tane button bıraktık ve ID sini Button1 yaptık. Buton un altına bir adet ConfirmButtonExtender  ekledik ve TargetControlID="Button1" yaptık .

Böylece button1 e tıklayınca çalışacağını belirttik.  Sonra   DisplayModalPopupID="modalpopup"
 alanında ise hemen alttaki ModalPopupExtender i belirttik. Geleim ModalPopupExtender a.
ModalPopUpExtender ı  sayfamızda hazırlamış olduğumuz  panelin popup olarak görüntülenmesini sağlacayacak. Panelin içeriğinde ise uyarı penceresinde göstermek istediğimiz herşey olabilir.
 

ModalPopUpExtender nesnesinin özelliklerine bakacak olursak :

TargetControlID="Button1" Aynı ConfirmCuttonExtender da olduğu gibi yine buton1 i yazdık yani bu kontolü Button1 tetikleyek dedik. 
DropShadow="True" kodu ise açılacak olan uyarı nın gölgeli olarak açılacağını belirtiyor.
OkControlID="BtnEvet" ve  CancelControlID="BtnHayir" özellikleri en önemli özelliklerden ikisi . OkControlID uyarı ekranında oluşacak Tamam düğmesinin adını ve  CancelControlID ile İptal düğmesinin adını  belirtiyoruz , yani tamam ve iptal butonlarını da kendimiz oluşturacağız demek oluyor bu . Peki nerede olacak bu Tamam ve İptal Butonları . Bu iki buton  ModalPopUpExtender altında oluşturduğumuz Panelin içerisnde olacak  .  ModalPopUpExtender son özelliği de  PopupControlID="Panel1" . Bu özellik de silme button nuna tıkladığımız zaman çıkcak olan nesenyi belirtiyoruz. Buttona tıklayınca Uyarı olarak oluşturduğumuz Panel1 popup olarak açılacak . 
   Son olarak uyarı olarak açılacak olan Panelimizi  hazırlayalım . Sayfamıza bir tane panel ekliyoruz:

<asp:Panel ID="Panel1" runat="server" style="display:none;"  BackColor="#CC3300" BorderColor="#663300"

            BorderStyle="Solid" BorderWidth="1px" Font-Bold="True" ForeColor="White"

            Height="115px" Width="254px" Font-Size="14px"><br />

            <center>Bunu yapmak istediğine emin misin ?</center>

         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  

        

         <asp:Button ID="BtnEvet" runat="server" Font-Size="12px" Height="27px"

                Text="Evet" Width="79px" BackColor="White" BorderColor="#993333"

                BorderStyle="Inset" Font-Bold="True" Font-Names="Arial" ForeColor="#CC3300" />

               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

       

         <asp:Button ID="BtnHayir" runat="server" Font-Size="12px" Height="27px"

                Text="Hayır" Width="79px" BackColor="White" BorderColor="#993333"

                BorderStyle="Inset" Font-Bold="True" Font-Names="Arial" ForeColor="#CC3300"/>        </asp:Panel>

Panel de önemli olan noktalar panelin ilk açılışta görünmemesi için Style özelliklerinden   display:none; olamsı. ID değerinin  ModalPopupExtender ın PopupControlID alanında yazılan ile  aynı olması  son olarak da   daha önce de belirttiğim gibi Tamam Ve İptal butonlarının eklanmesi ve  ID  değerlerinin de yine  ModalPopupExtender ın OkControlID ve CancelControlID alanlarında belirtilen isimlerle örtüşmesi.   Bu belitlen alanlar  dışındakiler tamamen isteğe bağlı  ya a tasarımsal özellikler . 

   Kolay Gelsin. 

   Örneği Buradan indirebilirsiniz.