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.

Tags:

14 thoughts on “Ajax Confirm Button Kullanim

Bir cevap yazın

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