ASP.NET AJAX ToggleButton Kullanımı
Bir web sitesinde, değişik sayfalarda kullanıcıların tercihlerini soran arabirimler çoğunlukla bulunur. Biz yazılımcılar bu arabirimleri CheckBox (işaretleme kutucuğu) veya RadioButton (radyo butonları) kontrolleri kullanarak oluşturmaya çalışırız. Bildiğiniz gibi işaretleme kutucukları, kullanıcıya çoklu seçeneklerden bir veya daha fazlasını seçme mantığı üzerine kurulmuştur. Radyo butonları ise bu mantığın tam tersine çoklu seçeneklerden sadece bir tanesini seçme mantığı üzerine kurulmuştur.
Örneğin “aşağıdakilerden hangisi veya hangileri? “ gibi bir soruda işaretleme kutucukları kullanılır. Yazılımcı işaretlenmiş değerleri alıp işler. “Aşağıdakilerden hangisi?” gibi bir soruda da radyo butonları kullanılır, çünkü kullanıcıdan sadece bir değer istenir.
Şimdiye kadar web sayfalarında çoğunlukla kullandığımız arabirimler veya seçenekler bunlardı. Ancak bir ara kontrol vardır ki bu daha aktif bir katılım sunar: ToggleButton.
ToggleButton, iki konumlu düğme demektir. Ama bu uzun bir ifade olduğu için ve karşınıza orijinal ismiyle çıkma olasılığının fazlalığından ben ToggleButton ifadesini kullanacağım.
ToggleButton ASP.Net de bir AJAX kontrolüdür.
Bu kontrolün kullanımı aşağıdaki gibidir:
Yukarıdaki ekran görüntüsünü incelediğinizde kontrolün kullanılma mantığı hemen anlaşılıyor.
İşaretleme kutusundan farklı olarak ToggleButton kontrolünde kullanıcıya aktif bir katılım imkânı sunuluyor. İki tane İşaretleme kutusunun yaptığını tek bir işaretleme kutusuyla yapabiliyorsunuz.
Ayrıca işaretleme sembol veya ikonlarını kendiniz belirleyebiliyorsunuz.
Şimdi bu sayfanın tasarım görüntüsüne bir bakalım:
Gördüğünüz gibi Bir AJAX uygulaması. Bir ScriptManager, iki CheckBox, bir buton, bir UpdatePanel, bir Label ve iki adet ToggleButtonExtender bulunuyor.
Şimdi bu arabirimin bildirim kodlarına bakalım:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:CheckBox ID="CheckBox1" Checked="true" Text=" Kırmızıyı Severim" runat="server"/>
<br />
<asp:CheckBox ID="CheckBox2" Checked="true" Text=" Klasik müzikten hoşlanırım" runat="server"/>
<br /><br />
<asp:Button ID="Button1" runat="server" Text="Gönder" OnClick="Button1_Click" />
<br /><br />
<asp:Label Font-Names="verdana" ID="Label1" runat="server" Text="Henüz Bir işaretleme yapmadınız!"></asp:Label>
<AjaxToolkit:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server" TargetControlID="CheckBox1" ImageWidth="19" ImageHeight="19" UncheckedImageUrl="images/ToggleButton_isaretlenmemis.gif" CheckedImageUrl="images/ToggleButton_isaretlenmis.gif" CheckedImageAlternateText="İşaretlenmiş" UncheckedImageAlternateText="İşaretlenmemiş">
</AjaxToolkit:ToggleButtonExtender>
<AjaxToolkit:ToggleButtonExtender ID="ToggleButtonExtender2" runat="server" TargetControlID="CheckBox2" ImageWidth="19" ImageHeight="19" UncheckedImageUrl="images/ToggleButton_isaretlenmemis.gif" CheckedImageUrl="images/ToggleButton_isaretlenmis.gif" CheckedImageAlternateText="İşaretlenmiş" UncheckedImageAlternateText="İşaretlenmemiş">
</AjaxToolkit:ToggleButtonExtender>
</ContentTemplate>
</asp:UpdatePanel>
Bildirimleri dikkatlice incelersek şunları görürüz.
Sayfaya normal iki adet işaretleme kutusu eklenmiş ancak bunlar ToggleButtonExtender kontrolü ile kontrol ediliyor. Diğer bir ifadeyle ToggleButton özellikli yapılıyor. ToggleButtonExtender in Kontrol ettiği işaretleme kutuları TargetControlID="CheckBox1” ve TargetControlID="CheckBox2” ifadeleriyle belirtiliyor.
ToggleButtonExtender ile ayrıca bir takım özellikleri belirleme imkânı var. Örneğin onaylama ve onaylamama için hangi resmi kullanacağız ve alternatif olarak hangi ifadeleri kullanacağımız hep bu kontrolün özelliklerinden belirtilir. Örneğimizde işaretlenmiş seçenek için CheckedImageUrl="images/ToggleButton_isaretlenmis.gif yol tanımındaki resmi, işaretlenmemiş içinse UncheckedImageUrl="images/ToggleButton_isaretlenmemis.gif yol tanımındaki resmi kullanıyoruz. Siz dilediğiniz grafik veya resmi oluşturarak kullanabilirsiniz. Böylece sayfalarınız estetik ve temaya uyumlu hale gelebilir.
Ayrıca alternatif metin olarak da CheckedImageAlternateText="İşaretlenmiş" ifadeleri kullanıyoruz.
Kodlarımız inceleyecek olursak oldukça basit olduğunu göreceğiz:
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
If (CheckBox1.Checked) Then
Label1.Text = "'Kırmızıyı severim' i işaretlediniz "
Else
Label1.Text = "'Kırmızıyı sevmem' i şaretlediniz "
End If
If (CheckBox2.Checked) Then
Label1.Text += "ve klasik müzikten hoşlandığınızı belirttiniz. "
Else
Label1.Text += "ve klasik müzikten hoşlanmadığınızı belirttiniz. "
End If
End Sub
Burada her bir işaretleme kutusunun durumuna göre sayfaya bir mesaj yazdırılıyor.
ToggleButton un en önemli özelliklerinden biri de kullanıcıya sunduğunuz seçeneklerin bir grubu teşkil etmek zorunda olmamasıdır. Örneğimizde olduğu gibi bir yandan renkle ilgili bir soruya cevap ararken diğer yandan müzikle ilgili bir bilgi edinmek istiyoruz. Ve her ikisinde de kullanıcıdan olumlu veya olumsuz bir cevap dönmesi gerekiyor.