ASP.NET AJAX Tab’ları
Tab arabirimlerini hepimiz biliriz. Bunlar fiziksel bir klasördeki ayıraçlara benzerler. Son zamanlarda sıkça web sitelerinde görülmeye başladı.
Görünümü aşağıdaki gibidir:
Tabii şekilsel olarak pek çok düzenleme yapılabilir.
Türkçedeki karşılığı “sekme” olan tab” lar, belirli kategorideki konulara kolayca ulaşmak için kullanılır.
Kullanıcıya erişim ve anlayış kolaylığı sağlar.
Bu makalemde ASP.NET AJAX kontrol elemanlarından olan TabContainer kontrolü ile nasıl tab arabirimleri geliştirebileceğimizi anlatacağım.
Aslında böyle bir arabirim oluşturmak geleneksel yöntemlerle çok basit değil. Ancak AJAX kontrolü sayesinde bunu birkaç sürükle bırak hamlesiyle yapabileceğiz.
Öncelikli olarak editörümüzde AJAX özellikli bir proje açalım.
Daha sonra default.aspx sayfamıza AJAX kontrollerinden TabContainer kontrolünü sürükle-bırak ile ekleyelim
Bu haliyle henüz tab’larımız sayfamızda gözükmez.
Sadece bir alt yapı hazırladık. Şimdi yapmamız gereken tab’ları tanımlamak.
Bunun için bazı bildirimlerde bulunacağız:
Burada her bir tab’ın başlık bilgisini ve içeriğini tanımlıyoruz. Bu içerik metin biçiminde olabileceği gibi örneğin HTML biçiminde de olabilir.
Şimdi sayfamızı yüklersek, aynen yukarıdaki ekran görüntüsünde olduğu gibi, tab görüntülü ve içeriği oluşturulmuş bir arabirim görürüz. Burada şaşırtıcı olan ve geliştiricinin işini kolaylaştıran noktaysa, herhangi bir tab şekli tanımlamadan doğrudan bir görüntü alabilmemiz. Tabii ki bu tab’ları şekilsel olarak düzenleyemeyiz anlamına gelmez.
Bu tab arabirimi kullanıcı taraflı çalışır ve içerik, sayfayla birlikte bütün tab’lar için yüklenir.
Kullanıcı taraflı bir olay tanımı yapmak istersek nasıl bir yol izlenir?
Tab’larda Kullanıcı Taraflı Event (olay) Bildirimleri
Bunun için JavaScript fonksiyonları kullanılır ve kontrolümüzde bu fonksiyon ismi bildirilir.
Örneğin aktif tab değiştiğinde kullanıcı taraflı bir takım işlemler yapmak istiyorsak:
<cc1:tabcontainer id="TabContainer1" runat="server" OnClientActiveTabChanged="AktifTabDegisti">
Şeklinde bir bildirimde bulunmalıyız. Tabii bu fonksiyonu da sayfamızda oluşturmalıyız. Aksi takdirde bir JavaScript hatası alırız:
<script type="text/javascript">
function AktifTabDegisti(sender, e) {
}
</script>
Aynı şekilde örneğin tab’lardan biri tıklandığında o tab’a özel kullanıcı taraflı bir işlem başlatabiliriz
<cc1:TabPanel runat="Server" ID="Panel3" OnClientClick="PanelTiklandi" HeaderText="Üçüncü Tab">
Tabii ki bunun da fonksiyonunu tanımlamayı unutmuyoruz:
<script type="text/javascript">
function PanelTiklandi(sender, e) {
}
function AktifTabDegisti(sender, e) {
}
</script>
Sunucu Taraflı Event (olay yakalama)
Tab’ların sunucu taraflı işlemlerdeki durumunu basit birkaç örnekle anlayabiliriz.
Bunun için öncelikli olarak tab’lardan herhangi birisinin içine bir buton ve Label kontrolü yerleştireceğiz. Daha sonra butona tıklayacağız ve kodlarımızda belirttiğimiz metnin bu Label’a atamasını isteyeceğiz. Bakalım nasıl bir sonuç elde edeceğiz.
Şimdi de kod sayfamıza aşağıdaki şekilde kodlar yazalım:
Sayfamızı yükleyip, 3. Tab’daki butona bastığımızda www.zaferdemirkol.com metnimizin, Label’ımıza atanmış ve sayfada gösterilmiş olduğunu görürüz.
Son olarak TabContainer dışındaki bir kontrolün sunucu taraflı tepkisine bakalım.
Bunun için TabContainer dışına bir buton ekliyorum. Tab’lardan birisinin içine de bir Label elemanı yerleştiriyorum:
Birinci tab’dayken aşağıdaki butona tıklayınca ilgili metnin tab’ın içindeki Label’a atandığını göreceksiniz.
Bu örnekler bize, tab kontrolünün postback (sayfanın sunucuya gidip gelmesi) uyumlu çalıştığını gösterir.
Bütün bu sunucu taraflı aktiviteleri yapmak için fazladan bir şey yapmanıza gerek yoktur.