Ajax Confirm Button Kullanim

Ajax Confirm Button oldukça kullanisli ve basit kodlanabilen bir yapiya sahiptir. Genel olarak uyari bildirimi, hata bildirimi veya onay amaçli kullanilir. Windows programlamada sik sik kullandigimiz MessageBox’in web programlamadaki eksikligini gidermek için çikartilmistir. Tabi ki bu sorunu çözen pek çok javascript kodu mevcuttur ama ajax’in bu tool’uda göz ardi edilmeyecek kadar islevseldir.

Özellikleri:

  • TargetControlID – Kontrolün çalismasini tetikleyecek buton veya link’in ID si
  • ConfirmText – Ekrana çikacak metin mesaji
  • OnClientCancel – Iptal butonu tiklandiginda çalisacak event.
  • ConfirmOnFormSubmit – Confirm Butonumuz çalismak için formun submit olmasinimi bekleyecek?
  • DisplayModalPopupID -Istege bagli olarak standart mesaj pop-up yerine ModalPopup kullanilabilir. Kullanilacak ModalPopup’in Id si. DisplayModalPopupID kullanmak için, asagidaki sartlari yerine getirilmesi gerekmektedir:
    • ModalPopup ve ConfirmButton ayni TargetControlID ye sahip olmalidir. Yani ayni link veya buton ile tetiklenmelidir.
    • ModalPopup içinde cancel ve ok butonlarinin tanimlanmasi gerekir.
    • ModalPopup içerisinde OnOkScript veya OnCancelScript kullanilamaz.

.

Kodlamada nasil kullanildigini bir örnekle açiklayalim. Mesela sayfamizda bir kaydin silinmesi islemi olsun ve silmeden önce “Silmek istediginizden emin misiniz?” diye sorup onay almak isteyelim.

Sil butonumuzun yanina Toolbox’in Ajax sekmesinden bir adet ConfirmButton sürükleyip birakiyoruz. Tabi Sil butonumuzu Ajax Update panelin içine almayi da unutmayalim. Daha sonra ConfirmButton’u düzenlemeye geçelim. Oldukça basit kullanimi olan tool için sadece hangi islem sonucu aktif olacagi (Bizim için su an Sil butonu) ve ekranda gösterecegimiz mesaji belirlememiz yeterli

<td>

 <asp:Button ID="SilBtn" runat="server"

 Text="Sil" Height="27px" Style="margin-left: 19px"

  Width="64px" OnClick="SilBtn_Click" />

                                                   

<cc1:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server" TargetControlID="SilBtn" ConfirmText="Silmek Istediginizden Emin misiniz??" OnClientCancel="CancelClick" />

</td>

Bu durumda kodumuzu çalistirip sil butonuna basinca ekranimiz:

Seklinde olacak. Simdi Tool’umuzu biraz süsleyelim. Bunun için Confirm Button ‘un  DisplayModalPopupID özelligini kullanacagiz. Sayfamiza bir adet ModalPopupExtender ekliyoruz. Daha sonraki makalelerimizde detayli anlatacagimiz bu yapiyi uygulamamizda popup paneli aktif edecek bir yapi olarak düsünebilirz.

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True" TargetControlID="SilBtn" OkControlID="ButtonOK" PopupControlID="popupPanel" />

 

Yine popupExtenderimizi tetikleyecek kontrolun Idsini yazip, aktif olacak paneli de belirliyoruz. Daha sonra Bir adet Panel Ekleyerek Mesajimizin görüntülenecegi kutuyu düzenliyoruz.

<asp:Panel ID="popupPanel" runat="server" Style="display: none; width: 200px; background-color: White; border-width: 2px; border-color: Black; border-style: solid; padding: 20px;">

Silmek Istediginizden Emin misiniz??

<br />

<br />

<div style="text-align: right;">

<asp:Button ID="ButtonOk" runat="server" Text="Evet" />

<asp:Button ID="ButtonCancel" runat="server" Text="Hayir" />

</asp:Panel>

ve artik daha güzel bir Confirm Button’umuz var.

 .

Isi biraz daha ciddiye alirsak çok daha güzel yapilar olusturabiliriz mesela:

<style type="text/css">

     .modalBackground

      {

         background-color: Gray;

         filter: alpha(opacity=70);

         opacity: 0.7;

      }

</style>

<td>

  <asp:Button ID="SilBtn" runat="server" Text="Sil" Height="27px"       Style="margin-left: 19px"Width="64px" OnClick="SilBtn_Click" />

  <cc1:ConfirmButtonExtender ID="ConfirmButtonExtender2" runat="server" ConfirmText="Silmek Istediginizden Emin misiniz??"

TargetControlID="SilBtn" DisplayModalPopupID="ModalPopupExtender1">

    </cc1:ConfirmButtonExtender>

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"   DropShadow="True" TargetControlID="SilBtn"

      OkControlID="BtnEvet" CancelControlID="BtnHayir"

      BackgroundCssClass="modalBackground" PopupControlID="popupPanel" />

 <asp:Panel ID="popupPanel" runat="server"

     Style="display: none; width: 200px; background-color: White;

     border-width: 2px; border-color: Black; border-style: solid;

     padding: 20px;">

   Silmek Istediginizden Emin misiniz??

   <div style="text-align: right;">

   <asp:Button ID="BtnEvet" runat="server" Text="Evet" />

   <asp:Button ID="BtnHayir" runat="server" Text="Hayir" />

   </div>

 </asp:Panel>

</td>

Bu sekilde ekranimiz:

Renkler, Fontlar, Boyutlar vs. degistirilerek istediginiz gibi bir yapi elde edebilirsiniz.

Basit bir confirm button örnegi bulunan projeyi buradan indirebilirsiniz (Visual Studio 2008).

Visual Studio 2005 de kullanmak için buradan indirin.

14 thoughts on “Ajax Confirm Button Kullanim

  1. Merhaba,

    Popup açiliyor ve Evet tusuna bastigimda Evet butonunun altina yazdigim kod çalisiyor. Tekrar popup’i görüntülemek için sil butonuna basiyorum, çikan popuptan evet tusuna bastigimda evet altindaki kod çalismiyor. Bu kontrollerin tamamini bir updatepanel içinde kullandigini belittmek isterim.

    Yardimci olabilecek bir arkadas var mi?

    Tsk

  2. Merhaba ben bu kodlari gridview içinde kullandim ama diyelim çalisiyor "evet" tiklandigi zaman  pencere açik kaliyor nedeni nedir acaba ? ama yeni bir proje açip denedigimde böyle bir sey olmuyor.

  3. projenize ajaxi ekledikten sonra versiyon sorunu yasayabilirsiniz bu durumda webconfig dosyasinda bulunan runtime ile baslayan kismi kendi webconfig dosyaniza ekleyin. projenizin verdigi hatayi yazarsaniz yardimci olmaya çalisirim

  4. verdiginiz kod 2005 de çalismiyor. hem hepsinde çalisiyor diyorsunuz hem de verdiginiz kod çalismiyor bu nasil is anlamadim.

  5. Çalisan kodun bulundugu basit bir örnegi makalenin altina ekledik. Umarim yardimci olur.

  6. bu kodlar çalismiyor. neyi eksik yapmis olabilirim. ya da sizin unuttugunuz birsey mivar. kodlari verseniz olmaz miydi

  7. Confirm button Ajax ile gelen bir tool’dur. vs2003,2005,2008 e Dll eklerseniz toolbox a gelir. detayli bilgi için “Ajax Kontrolleri – UpdatePanel” makalesine bakabilirsiniz

mskunt için bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir