Sermin'in Bilgi Paylaşımı..: ASP.NET AJAX Controltoolkit: ToggleButtonExtender Kullanımı

9 Ekim 2009 Cuma

ASP.NET AJAX Controltoolkit: ToggleButtonExtender Kullanımı

Gönderen Sermin Yağcı zaman: 14:20

Asp.Net Ajax Kontrollerinden Toggle Button nasıl ve ne amaçla kullanıldığını anlamaya çalışacağız. Türkçe karşılığı iki konumlu düğme olan bu kontrol adından da anlaşılacağı gibi iki farklı görsel öğeyi üzerinde barındırır. Alışık olduğumuz kontrollerden RadioButton ve CheckBoxtan farklı olarak üzerinde resim taşır. Checkbox kontrolü yardımı ile herhangi bir işlem için onay alımı ya da bir grid üzerinde görüntülenmekte olan bilgilerin bir kısmının silinip silinmeyeceği bilgisini arka tarafta list kolleksiyonuna eklerken ana işlem olarak kullanılabilmekte. Ancak son kullanıcılara kutu içerisinde bir seçilmiş okey işareti yerine dikkat çeken bir görsel öğe sunmak her zaman sayfamıza zenginlik katar.

Bunu basit bir örnekle anlatmak gerekirse; VisualStudio içinde projemizi AJAXEnabledWebApplication olarak başlatalım. projeye yeni bir resim klasörü ekleyelim. Bu klasör içine slayt içinde kullanacağımız resimleri koyalım. Default.aspx sayfasındaki script manager altına bir tane update panel, iki tane check box, bir tane button, bir tane image, iki tane de toggle button sürükleyelim.

Sırasıyla CheckBoxların checked özelliğini "false" widht ve hight özelliklerinide seçtiğimiz resimlerin boyutuna getirelim. ToggleButton özelliklerinden TargetControlID, ImageWidth, ImageHeight, UncheckedImageUrl, ChekedImageUrl özelliklerini düzenliyoruz.

<asp:CheckBox ID="CheckBox1" Checked="false" Width="200px" Height="150" runat="server" />
<br />
<asp:CheckBox ID="CheckBox2" Checked="false" Width="200px" Height="150" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
<br />
<asp:Image ID="Image1" ImageUrl="~/Resim/r0.png" runat="server" />
<br />
<asp:Label ID="Label1" runat="server" Text="Daha bişey seçilmedi.."></asp:Label>
<cc1:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server" TargetControlID="CheckBox1"
        ImageWidth="100" ImageHeight="100" UncheckedImageUrl="Resim/r0.png" CheckedImageUrl="Resim/r1.png"
        CheckedImageAlternateText="Seçildi" UncheckedImageAlternateText="Seçilmedi">
</cc1:ToggleButtonExtender>
<cc1:ToggleButtonExtender ID="ToggleButtonExtender2" runat="server" TargetControlID="CheckBox2"
        ImageWidth="100" ImageHeight="100" UncheckedImageUrl="Resim/r0.png" CheckedImageUrl="Resim/r2.png"
        CheckedImageAlternateText="Seçildi" UncheckedImageAlternateText="Seçilmedi">
</cc1:ToggleButtonExtender>

Button1 üzerine iki kez tıkaldıktan sonra Default.aspx.cs içine

protected void Button1_Click(object sender, EventArgs e)
     {
         string strSecilen = "";
         Image1.ImageUrl = "Resim/r0.png";
         if (!CheckBox1.Checked && !CheckBox2.Checked)
             {
                  Image1.ImageUrl = "Resim/r0.gif";
                  strSecilen = "Seçilmedi bişey..";
              }
          else if (!CheckBox2.Checked)
              {
                 Image1.ImageUrl = "Resim/r1.gif";
                 strSecilen = "üst resim seçildi..";
              }
           else if (!CheckBox1.Checked)
             {
                  Image1.ImageUrl = "Resim/r2.gif";
                  strSecilen = "alt resim seçildi..";
             }
           else
            {
                 Image1.ImageUrl = "Resim/r3.gif";
                 strSecilen = "aboo hepsi geliverdi..";
            }
          Label1.Text = strSecilen;
     }