DATALIST NESNESININ HORIZANTAL + VERTICAL OLARAK GÖSTERILMESI
Merhaba arkadaşlar,
Bu makalede Datalist nesnesinin nasıl kullanılacağını anlatmaya çalisacagim.
Datalist nesnesi veritabanından ya da bir veri kaynagindaki nesneleri Web sayfalarimizda görüntülememize yarar. Datalist nesnesi bir web sitesi ya da web projesi yaparken mutlaka kullanilacak kontrollerden birisidir. Örnegin bir ürün bilgisini dataListte gösterebiliriz.
Fazla uzatmadan örnege geçelim J
Bunun için projemize ilk olarak bir adet Datalist Kontrolü ekleyelim;
Datalistimizi ekledikten sonra; önümüzde iki işlem adimi var;
1- veritabanına baglanmak.
2- Datalist içerisinde görüntüleyecegimiz HTML Tablosunu olusturmak (Seçenege göre degisebilir ben genel olarak HTML Tablo kullanirim)
- Adimdan baslarsak eger ilk olarak Datalistin baglanacagi veri kaynagini olusturmamiz gerekebilir(ACCESS,SQL SERVER, XML dosyasi olabilir.)
Ben bu projede Access veritabanı kullanacagim. veritabanım adi her zamanki gibi urunler.mdb J
Tablomun içerisindeki Tablonun adi tblUrunler’ dir. Bu tablo içerisinde asagidaki alanlar bulunmaktadir.
Tablo içerisindeki bilgileri gördükten sonra, Baglantimizi olusturabiliriz.
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"));
}
Baslanti Nesnemizi olusturduktan sonra, Datalistimizi baglayacagimiz tablodan verileri çekmek için bir DataTable döndüren bir function yazalim.
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 yazdiktan sonra geriye sadece bunu çagirmak kalır ve bunu da form yüklenirken yapabiliriz.
protected void Page_Load(object sender, EventArgs e)
{
DataList1.DataSource = DataDoldur();
DataList1.DataBind();
}
}
Simdi veriler Dataliste gelir fakat ekranda görüntülenmez çünkü ekranda görüntülemek için Datalist içerisinde görüntüleyecegimiz verileri yazmadik. Bunun için sayfamizin HTML Designina gelip;
HTML içerisinde asagidaki gibi tabloyu ekleyebiliriz. Burada dikkat edilmesi gereken kisim verilerin ItemTemplate içerisinde görüntülenecegidir.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=8.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>
<!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çiklama</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ülenecegi yerleri ayarladiktan sonra Design kismina geri dönersek;
Gibi bir görüntü karsimiza çikar. Simdi hersey hazir ve sayfamizi çalistirip verileri ekranda gösterebiliriz. Ama ilk olarak görünümü biraz daha görüntülemek için Datalist üzerinde Sag tus + Auto Format Diyerek Datalistimize bir stil seçebiliriz. Sayfamizi çalistirirsak;
Verilerimiz görüntülenir, fakat farkettiyseniz veriler altalta geliyor. Eger Form_Load olayina asagidaki kodu eklersek
protected void Page_Load(object sender, EventArgs e)
{
DataList1.DataSource = DataDoldur();
DataList1.RepeatColumns = 2;//Yanyana listelenecek kayit sayisi
DataList1.DataBind();
}
Artik Sayfamizda yanyana 2 kayit gelecektir. Bu özelligi RepeatColumns özelligi ile ayarladik.
Simdi projemizi tekrar çalistirirsak;
Ortaya çok güzel bir görüntü çikar J
Baska bir makalede görüşmek üzere, Iyi çalismalar
SEM GÖKSU