AJAX Takvim
Daha önceki yazılarımda ASP.NET AJAX uygulamalarının nasıl oluşturulduğunu, mevcut uygulamalarımızın AJAX özellikli nasıl yapıldığını anlatmıştım.
Bugün bir AJAX takvim uygulaması yapacağız.
Herhangi bir formda bir tarih girmek istediğimizde bu tarihi açılan takvimden seçen bir uygulama yapacağız.
Ancak öncelikle AJAX Toolkit’imizin Editörümüze (VS 2005 veya Visual Web Developer 2005 Express) ilave edildiğinden emin olmalıyız.
Bunun nasıl yapıldığını daha önceki yazılarımda anlatmıştım ;ancak okuyamayanlar için aşağıda kısaca anlatacağım.
ASP.NET AJAX Toolkit’in eklenmesi
Öncelikle yapmanız gereken http://ajax.asp.net/ sayfasına giderek, “learn more” butonunu tıklamak. Karşınıza aşağıdaki gibi bir sayfa çıkacak:
Bu sayfadan yukardaki linki tıklayarak AJAX toolkiti indireceğiniz sayfaya erişirsiniz.
Buradan download linkine tıklayarak AJAX toolkit’i bilgisayarınıza indirebilirsiniz.
Zip’li dosyayı açtığınızda pek çok örnek uygulama ve ASP.NET sayfası olduğunu göreceksiniz.
Bunların detaylarına daha önceden değinmiştim burada Toolkit’i en hızlı şekilde editörünüze eklemeyi anlatacağım.
Öncelikle açtığınız zip dosyalarından AjaxControlToolkit-NoSource\SampleWebSite\Bin dizini altındaki AjaxControlToolkit.dll ne ulaşın.
Daha sonra editörünüzde toolbox bölümünde sağ tuşla yeni bir tab oluşturun:
Ve bunun altına AjaxControlToolkit.dll dll ini sürükleyip bırakın:
AJAX kontrollerinin editörünüze eklenmiş ve kullanıma hazır olduğunu göreceksiniz.
ASP.NET AJAX Calendar Extender
AJAX Toolkit içinde olan takvim uzantısı, özellikle metin kutusu kontorülünü, tarih eklemek amaçlı kullanıyorsak, ona bir takvim uzantısı sağlayarak kullancının daha rahat tarih girmesini sağlar:
şekilde görüldüğü gibi.
Birazdan bunu sayfamıza nasıl ekleyeceğimizi anlatacağım.
Öncelikle AJAX özellikli bir proje oluşturuyoruz
.
Daha sonra toolbox dan standart kontrollerden TextBox alıp sayfamıza ekleyelim.
Devamında, biraz önce eklediğimiz AJAX kontrollerinden,
CalendarExtender’ı bulup sayfaya ekleyelim:
Sayfamızın tasarım arabirimi yukardaki gibi gözükmelidir.
Şimdi yapacağımız şey, CalendarExteder’ı metin (textbox) kutumuza bağlamak. Bunun için CalendarExteder da bir özellik mevcut: TargetControlID
Bu özellik takvimin hangi kontrole eklendiğini belirtir.
Bizim örneğimizde bu metin kutusudur (çoğunlukla bağlandığı ana kontrol metin kutusudur. Ancak bazı diğer kontrollere de takvim uzantısı eklenebilir).
Metin kutumuzun “id” si Takvim_1 dir.
Dolayısıyla bağlamayı şu ifadeyle yapmalıyız:
TargetControlID="Takvim_1"
Bildirimlerimizin tamamı
Şeklindedir.
Sadece bu kadar bir kodla takvim uzantılı bir kontrol oluşturabiliyoruz.
Takvimi biçimlendirmek
Takvimi hem tarih formatında hem de şekilsel formatta biçimlendirmemiz mümkün.
Normal takvim kontrolünden farklı olarak takvim uzantısında şekilsel bildirimler doğrudan bulunmamaktadır. Bunun için CSS dosyası kullanılır ve takvim uzantısına bağlanır.
Bu tanımları yapmak da oldukça kolaydır.
Öncelikle bir css dosyası oluşturmalı ve bunu sayfaya tanıtmalısınız. Bildiğiniz gibi bu tanıtım:
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
Şeklindedir.
StyleSheet.css Dosyamızda takvimle ilgili tanımları şu şekilde yapabiliriz:
Bundan sonra yapmamız gereken bir şey daha kaldı, o da takvim “style class” ımızı kontrol bildiriminde belirtmek:
<cc1:CalendarExtender ID="CalendarExtender1" CssClass="Takvimim"
Şeklinde.
Bu tanımlardan sonra takvimimizin şekil ve renkleri değişecektir.
Takvimi Yerelleştirelim
Yukarıdaki ekran görüntülerinde takvimimizin İngilizce ifadelerden oluştuğunu görüyoruz.
Eğer takviminizin Türkçe olmasını istiyorsanız yapmanız gereken çok basit bir şey var ScriptManager a gidip bildirimine EnableScriptGlobalization=true eklemeniz ve sayfa başlığına Culture="tr-TR". İfadesini ilave etmeniz.
Bundan sonra artık takviminiz Türkçe gözükecektir:
