Makale Özeti

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öreceğiz.

Makale

DrapShadow Extender
Açıklama

DrapShadow, panel nesnesine drapshadow(kenarlarına gölge) özelliği kazandıran bir ajax nesnesidir. Aynı zamanda panel nesnesinin kenarlarını köşeli olarak da gösterilebilir.

Özellikleri

· TargetControlID - Drop shadow özelliğinin uygulanacağı kontrolün ID’si
· Width - Uygulanacak DropShadow’ın pixel genişliği. Varsayılan olarak 5’dir.
· Opacity – Uygulanacak olan DrapShadow’un Opacity Değeri. Varsayılan olarak .5 dir.
· TrackPosition - Whether the drop shadow should track the position of the panel it is attached to. Use this if the panel is absolutely positioned or will otherwise move.
· Rounded – Panel kontrolünün kenarlarının köşeli olup olmayacağını belirler. True ise kenarları köşeli olarak gösterilir.

Kullanımı


<ajaxToolkit:DropShadowExtender ID="dse" runat="server"
TargetControlID="Panel1"
Opacity=".8"
Rounded="true"
TrackPosition="true" />

Nesnemizi tanıyıp özelliklerinide inceledikten sonra bu kontrolümüzü datalist içerisinde kullanalım. Visual Studio İçerisinde Ajax tabanlı bir ASP.NET projesi oluşturalım. Ben dil olarak C# Seçeceğim


Projemizi oluşturduktan sonra örneğimizde ne yapacağımızı kısaca anlatayım. Northwind Veritabanından Categories tablosunu Datalist ile listeleyeceğim. Datalist nesnesinin Itemlarına da DropShadow özelliğini kazandırıp kayıtları kullanıcıya daha hoş bir şekilde sunacağız.

Bunun için Web formumuz üzerine 1 Datalist ve 1 panel ekleyelim. Datalist içerisinde ben CategoryID, CategoryName, Description alanlarını göstereceğim. Datalist içerisinde göstereceğim alanları belirledim şimdi bu alanları HTML Table içerisinde yazalım.

<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 Sayfamıza Eklediğimiz Panelin içerisine ekleyelim. Son görünümümüz aşağıdaki gibi oldu.

Not: Panel Background rengi Khaki dir. Siz istediğiniz rengi verebilirsiniz.



Datalist ItemTemplate Açalım ve panel Nesnemizi ItemTemplate içerisine taşıyalım. Yine Item Template içerisine bir adet DropShadow nesnesi ekleyelim. Son görünümümüz aşağıdaki gibi oldu.



Son olarak Kodlarımıza da bir göz atalım.

<asp:DataList ID="DataList1" runat="server" Font-Names="Verdana" Font-Size="X-Small" RepeatColumns="1">
<ItemTemplate>
<asp:Panel ID="Panel1" runat="server" BackColor="Khaki" Width="410px">
<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 kayıtları görüntülemek kaldı. Bunun için bir void yazalım ve form loadda çağıralım.

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();
}
}

Artık herşey hazır, projemizi çalıştıralım,



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

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

Sem GÖKSU
MCP | MCAD.NET | MCTS
Örnek Kodlar için mail adresimi kullanabilirsiniz
askisem@hotmail.com
Kaynaklar
http://atlas.asp.net