Merhaba arkadaşlar. Bu yazımda Ajax da ToggleButtonExtender Kontrolünün kullanılmasını inceleyeceğiz. Kullanımı oldukça basit olan bu kontrolün, kullanışlı olması da güzel bir özellik.
Hepimiz projelerimizde checkbox kullanmışızdır. Peki bu checkboxların çek bölümlerini isteğimize göre değiştirebileceğimizi biliyor musunuz? Bilmiyorsanız buyurun öğrenmeye.
Projemize bir tane Checkbox ekliyoruz. Ajax Controllerinden de ToggleButtonExtender kontrolünü hemen altına sürüklüyoruz.
ToggleButtonExtender kontrolünün TargetContolId özelliği ile hangi checkboxa işlem yapacağını belirtiyoruz
TargetControlID="CheckBox1"
ImageHeight ve ImageWidth özellikleriyle klasik çek işaretinin olduğu yere getireceğimiz resimlerin boyutlarını belirtiyoruz.
ImageHeight="31"
ImageWidth="32"
UncheckedImageUrl özelliğinden checkbox seçili durumda değilken görünecek olan resmin yolunu yazıyoruz.
UncheckedImageUrl="secili_degil.gif"
CheckedImageUrl özelliğinden de, seçili olduğunda görünecek resmin yolunu yazıyoruz.
CheckedImageUrl="secili.gif"
CheckedImageAlternateText ve UnCheckedImageAlternateText özelliklerinden seçili ve seçili olmadığı durumlardaki açıklama satırlarını gösterebiliyoruz.
CheckedImageAlternateText="Seçili işte"
Kodlarımızı Toparlayacak olursak:
<asp:CheckBox ID="CheckBox1" runat="server" Text=" Değişik Görünümde bir Checkbox" Height="16px" Width="244px" />
<cc1:ToggleButtonExtender
ImageHeight="31"
ImageWidth="32"
ID="ToggleButtonExtender1" runat="server" TargetControlID="CheckBox1"
CheckedImageUrl="secili.gif"
UncheckedImageUrl="secili_degil.gif"
CheckedImageAlternateText="Seçili işte"
UncheckedImageAlternateText="Burdada seçili olmadığı zaman"
>
</cc1:ToggleButtonExtender>
Görünümlerine bakacak olursak:
Seçilmemiş hali
Seçilmiş hali:
Sayfamıza ToggleButtonExtender kontrolünü eklediğimiz zaman Checkboxın propertiesine otomatik olarak bu özellikler eklenecektir. Bu özellikleri source kısmından yazabileceğimiz gibi properties penceresinden de yapabilirdik.
Kolay Gelsin.