AJAX DropShadow Extender ve Datalist ile Kullanımı
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.
DrapShadow Extender
Açıklama
DrapShadow, panel nesnesine drapshadow(kenarlarına gölge) özelligi kazandıran bir ajax nesnesidir. Aynı zamanda panel nesnesinin kenarlarını köseli olarak da gösterilebilir.
Özellikleri
· TargetControlID - Drop shadow özelliginin uygulanacagı kontrolün ID'si
· Width - Uygulanacak DropShadow'ın pixel genisligi. Varsayılan olarak 5'dir.
· Opacity - Uygulanacak olan DrapShadow'un Opacity Degeri. 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öseli olup olmayacagını belirler. True ise kenarları köseli 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 Içerisinde Ajax tabanlı bir ASP.NET projesi olusturalım. Ben dil olarak C# Seçecegim
Projemizi olusturduktan sonra örnegimizde ne yapacagımızı kısaca anlatayım. Northwind Veritabanından Categories tablosunu Datalist ile listeleyecegim. Datalist nesnesinin Itemlarına da DropShadow özelligini kazandırıp kayıtları kullanıcıya daha hos bir sekilde sunacagız.
Bunun için Web formumuz üzerine 1 Datalist ve 1 panel ekleyelim. Datalist içerisinde ben CategoryID, CategoryName, Description alanlarını gösterecegim. Datalist içerisinde gösterecegim alanları belirledim simdi 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 Ekledigimiz Panelin içerisine ekleyelim. Son görünümümüz asagıdaki gibi oldu.
Not: Panel Background rengi Khaki dir. Siz istediginiz rengi verebilirsiniz.
Datalist ItemTemplate Açalım ve panel Nesnemizi ItemTemplate içerisine tasıyalım. Yine Item Template içerisine bir adet DropShadow nesnesi ekleyelim. Son görünümümüz asagı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 çagı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 hersey hazır, projemizi çalıstıralım,
Ortaya çok güzel bir görüntü çıktı :)
Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim.
Sem GÖKSU
MCP | MCAD.NET | MCTS
Örnek Kodlar için mail adresimi kullanabilirsiniz
Kaynaklar
