AJAX DropShadow Extender ve Datalist ile Kullanimi

Merhaba arkadaşlar, bu makalemizde ajax control toolkit’in nesnelerinden Dropshadow extender nesnesini ele alacağız. Örnek olarak da datalist nesnesinin içerisinde nasıl kullanıldığını görecegiz.

DrapShadow Extender

Açiklama

DrapShadow, panel nesnesine drapshadow(kenarlarina gölge) özelligi kazandiran bir ajax nesnesidir. Ayni zamanda panel nesnesinin kenarlarini köseli(Rounded) olarak da gösterilebilir.

Özellikleri

· TargetControlID - Drop shadow özelliginin uygulanacağı kontrolün ID’si
· Width - Uygulanacak DropShadow’in pixel genişliği. Varsayilan olarak 5’dir.
· Opacity – Uygulanacak olan DrapShadow’un Opacity değeri. Varsayilan olarak .5 dir.
· Rounded – Panel kontrolünün kenarlarinin köseli olup olmayacagini belirler. True ise kenarlari köseli olarak gösterilir.

Nesnemizi taniyip özelliklerinide inceledikten sonra bu kontrolümüzü datalist içerisinde kullanalim. Visual Studio Içerisinde Ajax tabanli bir ASP.NET projesi olusturalim. Ben dil olarak C# Seçecegim

Projemizi olusturduktan sonra örnegimizde ne yapacağımızı kisaca anlatayim. Northwind veritabanından Categories tablosunu Datalist ile listeleyecegim. Datalist nesnesinin Itemlarina da DropShadow özelligini kazandirip kayitlari kullaniciya daha hos bir sekilde sunacagiz.

Bunun için Web formumuz üzerine 1 Datalist ve 1 panel ekleyelim. Datalist içerisinde ben CategoryID, CategoryName, Description alanlarini gösterecegim. Datalist içerisinde gösterecegim alanlari belirledim simdi bu alanlari HTML Table içerisinde yazalim.

<table style="width: 400px">

<tr>

<td style="width: 120px" valign="top">

<asp:Label ID="Label2" runat="server" Text="CategoryID" Font-Bold="True"></asp:Label></td>

<td valign="top">

:</td>

<td valign="top">

<asp:Label ID="CategoryID" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"CategoryID") %>'></asp:Label></td>

</tr>

<tr>

<td style="width: 120px" valign="top">

<asp:Label ID="Label3" runat="server" Text="Category Name" Width="115px" Font-Bold="True"></asp:Label></td>

<td valign="top" >

:</td>

<td valign="top">

<asp:Label ID="CategoryName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"CategoryName") %>'></asp:Label></td>

</tr>

<tr>

<td style="width: 120px" valign="top">

<asp:Label ID="Label4" runat="server" Text="Description" Font-Bold="True"></asp:Label></td>

<td valign="top">

:</td>

<td valign="top">

<asp:Label ID="Description" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Description") %>'></asp:Label></td>

</tr>

</table>

Bu tabloyu Sayfamiza Ekledigimiz Panelin içerisine ekleyelim. Son görünümümüz asagidaki gibi oldu.

Not: Panel Background rengi Khaki dir. Siz istediginiz rengi verebilirsiniz.

Datalist ItemTemplate Açalim ve panel Nesnemizi ItemTemplate içerisine tasiyalim. Yine Item Template içerisine bir adet DropShadow nesnesi ekleyelim. Son görünümümüz asagidaki gibi oldu.

Son olarak Kodlarimiza da bir göz atalim.

<asp:DataList ID="DataList1" runat="server" Font-Names="Trebuchet MS" Font-Size="X-Small" RepeatColumns="1">

<ItemTemplate>

<asp:Panel ID="Panel1" runat="server" BackColor="Khaki" Width="411px">

<table style="width: 400px">

<tr>

<td style="width: 120px" valign="top">

<asp:Label ID="Label2" runat="server" Text="CategoryID" Font-Bold="True"></asp:Label></td>

<td valign="top">

:</td>

<td valign="top">

<asp:Label ID="CategoryID" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"CategoryID") %>'></asp:Label></td>

</tr>

<tr>

<td style="width: 120px" valign="top">

<asp:Label ID="Label3" runat="server" Text="Category Name" Width="115px" Font-Bold="True"></asp:Label></td>

<td valign="top" >

:</td>

<td valign="top">

<asp:Label ID="CategoryName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"CategoryName") %>'></asp:Label></td>

</tr>

<tr>

<td style="width: 120px" valign="top">

<asp:Label ID="Label4" runat="server" Text="Description" Font-Bold="True"></asp:Label></td>

<td valign="top">

:</td>

<td valign="top">

<asp:Label ID="Description" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Description") %>'></asp:Label></td>

</tr>

</table>

</asp:Panel>

<br />

<cc1:DropShadowExtender ID="DropShadowExtender1" runat="server">

</cc1:DropShadowExtender>

</ItemTemplate>

<HeaderStyle Font-Bold="False" />

</asp:DataList>

DropShadow nesnesinin özelliklerini de belirleyelim,

<cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="Panel1" Opacity=".25" Radius="8" Rounded="true">

</cc1:DropShadowExtender>

Geriye sadece kayitlari görüntülemek kaldi. Bunun için bir void yazalim ve form loadda çagiralim.

protected void DatalistDoldur()

{

SqlConnection cnn = new SqlConnection("Data Source=.; Initial Catalog=Northwind; Trusted_connection=yes");

cnn.Open();

SqlDataAdapter Da = new SqlDataAdapter("Select * from Categories",cnn);

DataSet Ds = new DataSet();

Da.Fill(Ds, "tbl");

DataList1.DataSource = Ds.Tables[0];

DataList1.DataBind();

}

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

DatalistDoldur();

}

}

Artik hersey hazir, projemizi çalistiralim,

Ortaya çok güzel bir görüntü çikti :)

Bu makalenin de sonuna geldik, baska bir makalede görüşmek üzere başarı ve iyi günler dilerim.

Sem GÖKSU  -askisem@hotmail.com
MCP | MCAD.NET | MCTS

Kaynaklar

http://ajax.asp.net