Makale Özeti

Bu makalemizde AJAX Control Toolkit kütüphanesinde yer alan ve ASP.NET uygulamalarında kullanabileceğimiz Accordion kontrolünde dinamik verilerle nasıl çalışabileceğimizi inceleyeceğiz.

Makale

Accordion kontrolü web sayfalarında birden fazla içeriğin listelenmesini ve bu içeriklerden anlık olarak sadece bir tanesinin görüntülenmesini sağlar. Listelenen içeriklerden kullanıcının seçeceği kısım görüntülenirken diğer kısımlar da gizlenir. Açılır-kapanır yapısı sayesinde normalde çok fazla yer kaplayan içeriklerin sayfada daha az yer kaplamasını ve kullanıcının sayfayı daha düzenli bir şekilde takip etmesini sağlar. Bu kontrolün görsel özelliklerini kullanarak görsel anlamda göze hoş gelen tasarımların da ortaya çıkması sağlanabilir.

Accordion saklayacağı içerikleri AccordionPane adı verilen kontrollerde saklamaktadır. AccordionPane ise Header (başlık) ve Content (içerik) adı verilen iki kısımdan oluşan basit bir Control Toolkit kontrolüdür. Accordion kontrolü Panes adındaki koleksiyonunda (collection) birden fazla AccordionPane nesneleri taşıyabilir. Sayfa çalıştığında bu koleksiyonda taşıdığı nesnelerden birinin görüntülenmesini, diğerlerinin ise saklanmasını sağlar. Accordion kontrolü CSS (Cascading Style Sheet) dosyaları ile birlikte kullanılıp AccordionPane nesnelerinin header ve content kısımları şekillendirildiğinde göze hoş gelen tasarımlar ortaya çıkabilmektedir. Bu konuyla ilgili daha önceden yazmış olduğum bir yazıya buradan erişebilirsiniz. AccordionPane’lerin açılıp kapanması işlemlerine de bazı özellikler aracılığıyla animasyon efektleri katılarak daha ilgi çekici hale getirilebilir. Veri ekleme işlemleri yönünden bakılacak olursa; sayfanın HTML kısmından dekleratif (declerative) yollarla bu kontrole durağan veriler eklenebileceği gibi, programatik yollarla veritabanı gibi dinamik bir veri kaynağından getirilen verilerle de çalışılabilir. Aşağıda Accordion kontrolü ile birlikte sıklıkla kullanılan bazı özellikler ve bu özelliklerin açıklamalarıı yer almaktadır.

Dilerseniz Accordion kontrolünde veritabanından getirilen kayıtlarla nasıl çalışabileceğimizi görmek için Visual Studio'da yeni bir web projesi oluşturalım. AJAX Control Toolkit kontrollerini kullanabilmek için CodePlex'te yer alan Control Toolkit Visual Studio proje template'ini bilgisayarınıza kurmamız gerekmektedir. İlgili web sayfasına erişmek ve güncel dosyayı yüklemek için bu linki kullanabilirsiniz. Yine Control Toolkit kurulumuyla ilgili örnek bir videoyu bu linkten izleyebilirsiniz.

Accordion kontrolünün göze hoş görünmesi için projeye bir CSS dosyası ekleyelim ve gerekli stil tanımlamalarını yapalım.

Style.css

.baslik {

      font-size: 13px; font-family: Verdana; font-weight:bold;

      background-color: #ffff99; border:1px solid; border-color:#555555;

      text-indent:3px; padding:3px; margin-top: 3px; cursor: pointer;

      }

.secilenBaslik {

      font-size: 13px; font-family: Verdana; font-weight:bold;

      background-color: #ffd989; border:1px solid; border-color:#555555;

      text-indent:3px; padding:3px; margin-top: 3px;

      }

.icerik {

      font-size: 12px; font-family: Verdana; background-color: #ffffcc;

      padding:3px; border:1px solid; border-color:#555555; border-top: none;

      }

 

Accordion Kontrolünde Dinamik Veriyle Çalışmak

Günümüz uygulamalarında sürekli veritabanları ile çalıştığımız için Accordion gibi zengin bir kontrolde de veritabanı veya XML dosyaları gibi dinamik kaynaklardan gelen kayıtları görüntülemek isteyebiliriz. Accordion kontrolü dinamik veri kaynakları ile uyumlu şekilde çalışabilir bir yapı sunmaktadır. Accordion kontrolü DataSource kontrolleriyle (SqlDataSource, AccessDataSource vb.) çalışabildiği gibi DataTable, DataSet gibi veri nesneleriyle de sorunsuz şekilde çalışmaktadır. DataSource kontrolleri ile sayfada dekleratif şekilde veri bağlanıldığında Accordion kontrolünün DataSourceID özelliğine sayfadaki DataSource nesnesinin ID bilgisi atanır. Accordion kontrolünün ise HeaderTemplate ve ContentTemplate kısımlarına Eval veya Bind metotları ile veri bağlama işlemi yapılır. HeaderContainer eklenecek kayıtların başlık şablonunu, ContentContainer ise içerik kısmının şablonunu belirler. Diğer yandan programatik yollarla DataTable gibi bir nesneden veri bağlanmak istenildiğinde ise Accordion kontrolünün DataSource özelliğine veri nesnesi atanıp DataBind() metodu çağrılmalıdır. Daha sonra oluşturulacak AccordionPane nesnelerinin HeaderContainer ve ContentContainer özelliklerinin Controls koleksiyonuna LiteralControl veya başka bir ASP.NET sunucu kontrolü vasıtasıyla veriler eklenebilir.

Microsoft Access’te oluşturulmuş bir veritabanında Haberler adında bir tablo bulunmaktadır. Haberler sayfasına tablodaki bilgiler getirilerek Accordion kontrolünde listelenmek isteniliyor. Aşağıda bu şekilde hazırlanacak bir sayfanın kodları yer almaktadır. Sayfamıza ekleyeceğimiz bir AccessDataSource kontrolü ile getirilen kayıtlar Accordion kontrolüne bağlanmıştır.

Default.aspx

...

<head runat="server">

    <title>Untitled Page</title>

    <link href="Style.css" rel="Stylesheet" type="text/css" />

</head>

<body>

<form id="form1" runat="server">

   <div>

      <ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />

      <ajaxToolkit:Accordion ID="accHaberler" runat="server" HeaderCssClass="baslik" HeaderSelectedCssClass="secilenBaslik" ContentCssClass="icerik" DataSourceID="accessDsHaberler">

            <HeaderTemplate>

                    <%#Eval("Baslik") %>

            </HeaderTemplate>

            <ContentTemplate>

                    <%#Eval("Icerik") %><br /><br />

                    Eklendiği tarih: <%#Eval("Tarih") %>

            </ContentTemplate> 

      </ajaxToolkit:Accordion>

 

      <asp:AccessDataSource ID="accessDsHaberler" runat="server" DataFile="~/App_Data/Site.mdb" SelectCommand="SELECT [Baslik], [Icerik], [Tarih] FROM [Haberler]">

      </asp:AccessDataSource>

   </div>

</form>

...

Görüldüğü gibi sayfanın Source kısmında yer alan HTML kodları içerisinde yapılacak işlemler ile önce bir AccessDataSource kontrolü oluşturuldu ve Haberler tablosundaki veriler getirildi. Accordion kontrolünün ise DataSourceID özelliğine bu kontrolün ID bilgisi verildi. Son olarak ise HeaderTemplate ve ContentTemplate kısımlarında accessDsHaberler kontrolünden getirilen veriler Eval() metodu ile bağlandı. Dikkat edileceği gibi Accordion kontolünün Panes koleksiyonuna herhangi bir şekilde AccordionPane nesneleri eklenmedi. Zira bu nesneler çalışma zamanı içerisinde oluştularak kontrole eklenecektir.

Aşağıdaki örnekte ise yukarıda yapılan işlem DataTable nesnesi ile gerçekleştirilmektedir. Burada Haberler.aspx sayfasında bulunan accHaberler Accordion’una sayfanın code-behind kısmından erişilerek işlemler gerçekleştiriliyor.

Default.aspx.cs

...

using System.Data.OleDb; // Access veritabanına bağlanmak için

using AjaxControlToolkit; // Accordion ve AccordionPane kontrollerine erişmek için

 

public partial class Haberler : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

          string yol = Server.MapPath("App_Data/Site.mdb");

          OleDbConnection con = new OleDbConnection("Provider=Microsoft.Jet.OleDB.4.0; Data Source=" + yol);

          OleDbDataAdapter daHaberler = new OleDbDataAdapter("Select Baslik, Icerik, Tarih From Haberler Order By Tarih", con);

          DataTable dtHaberler = new DataTable();

          daHaberler.Fill(dtHaberler);

 

          foreach (DataRow dr in dtHaberler.Rows)

          {

                AccordionPane paneHaber = new AccordionPane();

                paneHaber.HeaderContainer.Controls.Add(new LiteralControl(dr["Baslik"].ToString()));

                paneHaber.ContentContainer.Controls.Add(new LiteralControl(dr["Icerik"].ToString()));

                paneHaber.ContentContainer.Controls.Add(new LiteralControl("<br /><br />"));

                paneHaber.ContentContainer.Controls.Add(new LiteralControl("Ekleme tarihi: " + dr["Tarih"].ToString()));

                accHaberler.Panes.Add(paneHaber);

          }

    }

}

DataTable gibi bir nesneden programatik yollarla veri bağlama işlemi AccordionPane nesnesinin oluşturulması, HeaderContainer ve ContentContainer özelliklerinin Controls koleksiyonuna kontroller eklenmesi ile gerçekleştirilir. LiteralControl gibi sade HTML çıktılar üreten bir kontrol kullanılabileceği gibi HyperLink, Image gibi sunucu kontrolleriyle de AccordionPane içeriği doldurulabilir. Her iki örnekte aslında aynı sayfa çıktısını oluşturacaktır. İlk örnek kullanım ve HTML koduna müdahale kolaylığı açısından tercih edilebilirken, ikinci örnekte C# gibi bir dilin özelliklerinin kullanılarak farklı işlemlerin yapılabilmesi açısından tercih edilebilir. Aşağıda sayfanın çıktısı görülmektedir.


Resim: Veritabanından getirilen kayıtlar Accordion kontrolüne yüklendi

Accordion kontrolü hakkında önemli bir not!
Accordion AJAX Control Toolkit ile beraber geldiği için diğer AJAX kontrolleri gibi asenkron çalıştığı düşünülebilir. Fakat üzerine tıklanıldığında açılan pane'lerin içerikleri çalışma zamanında dinamik olarak gelmemekte, aksine bu içerikler sayfa ilk yüklendiğinde getirilmektedir. Accordion kontrolü ile ilgili biraz üzücü bir haber olsa da avantajlarını göz önüne aldığımızda oldukça kullanışlı bir kontrol olduğunu söyleyebiliriz.

Böylece Accordion kontrolüne DataSource kontrolleriyle ve DataTable gibi veri kontrolleriyle nasıl veri bağlayabileceğimizi görmüş olduk. Bir başka makalede görüşmek dileğiyle...


Uğur UMUTLUOĞLU
www.umutluoglu.com
www.nedirtv.com