2 kontrolde de “header template”, “item template” ve “footer template” bölümleri bulunmaktadır. Programcılar bu bölümler içerisinde yapacakları değişiklikler ile kontrolleri özelleştirebilmektedirler (“template” kullanımları kod örnekleri ile daha net anlaşılacaktır). Adlarından da anlaşılacağı üzere “header” ve “footer” kalıpları (“template”) baş ve son kısımları kontrol etmektedir, “item” kalıbı ise tekrarlanan veriyi yönetmektedir. “DataGrid” kontrolünde “item template” sütunlara karşılık gelmektedir. İki kontrolün birbirleri ile temel farkları incelenirse; “DataGrid” ve “DataList” kontrolleri veriyi güncelleme yeteneğine sahiptirler.“DataGrid” i “DataList” ten farklılaştıran özellikler ise sayfalama ve sıralamadır.
Fazla uzatmadan örneğe geçelim Bunun için projemize ilk olarak bir adet Datalist Kontrolü ekleyelim;
Datalistimizi ekledikten sonra; önümüzde iki işlem adımı var;
1- Veritabanına bağlanmak.
2- Datalist içerisinde görüntüleyeceğimiz HTML Tablosunu oluşturmak (Seçeneğe göre değişebilir ben genel olarak HTML Tablo kullanırım)
- Adımdan başlarsak eğer ilk olarak Datalistin bağlanacağı veri kaynağını oluşturmamız gerekebilir(ACCESS,SQL SERVER, XML dosyası olabilir.)
Ben bu projede Access veritabanı kullanacağım. Veritabanım adı her zamanki gibi urunler.mdb J
Tablomun içerisindeki Tablonun adı tblUrunler’ dir. Bu tablo içerisinde aşağıdaki alanlar bulunmaktadır.
Tablo içerisindeki bilgileri gördükten sonra, Bağlantımızı oluşturabiliriz.
private System.Data.OleDb.OleDbConnection Cnn;
private System.Data.OleDb.OleDbDataAdapter Da;
private System.Data.DataSet Ds;
private void SetCnn()
{
Cnn = new System.Data.OleDb.OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("db/urunler.mdb"));
}
Başlantı Nesnemizi oluşturduktan sonra, Datalistimizi bağlayacağımız tablodan verileri çekmek için bir DataTable döndüren bir function yazalım.
private System.Data.DataTable DataDoldur()
{
SetCnn();
if (Cnn.State == ConnectionState.Closed) Cnn.Open();
Da = new System.Data.OleDb.OleDbDataAdapter("Select * from tblUrunler",Cnn);
Ds = new DataSet();
Da.Fill(Ds, "Table");
return Ds.Tables[0];
}
Functionumuzu yazdıktan sonra geriye sadece bunu çağırmak kalır ve bunu da form yüklenirken yapabiliriz.
protected void Page_Load(object sender, EventArgs e)
{
DataList1.DataSource = DataDoldur();
DataList1.DataBind();
}
}
Şimdi veriler Dataliste gelir fakat ekranda görüntülenmez çünkü ekranda görüntülemek için Datalist içerisinde görüntüleyeceğimiz verileri yazmadık. Bunun için sayfamızın HTML Designına gelip;
HTML içerisinde aşağıdaki gibi tabloyu ekleyebiliriz. Burada dikkat edilmesi gereken kısım verilerin ItemTemplate içerisinde görüntüleneceğidir.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="DataList1" runat="server" Style="z-index: 101;
left: 36px; position: absolute; top: 20px" Height="312px" Width="556px" ShowFooter="False">
<ItemTemplate>
<table border=1>
<tr>
<td style="width: 223px">
Ürün ID:</td>
<td style="width: 267px"><%# DataBinder.Eval(Container.DataItem,"fldUrunID")%>
</td>
<td rowspan="5" style="width: 281px" align="center">
<asp:Image ID="Image1" runat="server" ImageUrl=<%# DataBinder.Eval(Container.DataItem,"fldUrunResmi")%>/>
</td>
</tr>
<tr>
<td style="width: 223px; height: 21px">
Ürün Kodu:</td>
<td style="width: 267px; height: 21px"><%# DataBinder.Eval(Container.DataItem,"fldUrunKodu")%>
</td>
</tr>
<tr>
<td style="height: 23px;" colspan="2">
Ürün Açıklama</td>
</tr>
<tr>
<td colspan="2" rowspan="2" style="height: 21px">
<%# DataBinder.Eval(Container.DataItem,"fldAciklama")%>
</td>
</tr>
<tr>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
|
</div>
</form>
</body>
</html>
HTML içerisinde verilerimizin görüntüleneceği yerleri ayarladıktan sonra Design kısmına geri dönersek;
Gibi bir görüntü karşımıza çıkar. Şimdi herşey hazır ve sayfamızı çalıştırıp verileri ekranda gösterebiliriz. Ama ilk olarak görünümü biraz daha görüntülemek için Datalist üzerinde Sağ tuş + Auto Format Diyerek Datalistimize bir stil seçebiliriz. Sayfamızı çalıştırırsak;
Verilerimiz görüntülenir, fakat farkettiyseniz veriler altalta geliyor. Eğer Form_Load olayına aşağıdaki kodu eklersek
protected void Page_Load(object sender, EventArgs e)
{
DataList1.DataSource = DataDoldur();
DataList1.RepeatColumns = 2;//Yanyana listelenecek kayıt sayısı
DataList1.DataBind();
}
Artık Sayfamızda yanyana 2 kayıt gelecektir. Bu özelliği RepeatColumns özelliği ile ayarladık.
Şimdi projemizi tekrar çalıştırırsak;
Ortaya çok güzel bir görüntü çıkar :)
Başka bir makalede görüşmek üzere, İyi çalışmalar