Blog

  • 26 Kas 2006

DATALIST NESNESİNİN HORIZONTAL/VERTICAL OLARAK GÖSTERİLMESİ

Datalist nesnesi veritabanından ya da bir veri kaynağındaki nesneleri Web sayfalarımızda görüntülememize yarar. Datalist nesnesi bir web sitesi ya da web projesi yaparken mutlaka kullanılacak kontrollerden birisidir. Örneğin bir ürün bilgisini dataListte gösterebiliriz.


2 kontrolde de "header template", "item template" ve "footer template" bölümleri bulunmaktadır. Programcılar bu bölümler içerisinde yapacakları degisiklikler ile kontrolleri özellestirebilmektedirler ("template" kullanımları kod örnekleri ile daha net anlasılacaktır). Adlarından da anlasılacagı üzere "header" ve "footer" kalıpları ("template") bas ve son kısımları kontrol etmektedir, "item" kalıbı ise tekrarlanan veriyi yönetmektedir. "DataGrid" kontrolünde "item template" sütunlara karsılık gelmektedir. Iki kontrolün birbirleri ile temel farkları incelenirse; "DataGrid" ve "DataList" kontrolleri veriyi güncelleme yetenegine sahiptirler."DataGrid" i "DataList" ten farklılastıran özellikler ise sayfalama ve sıralamadır.

Fazla uzatmadan örnege geçelim Bunun için projemize ilk olarak bir adet Datalist Kontrolü ekleyelim;

Datalistimizi ekledikten sonra; önümüzde iki islem adımı 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 kullanırım)

  1. Adımdan baslarsak eger ilk olarak Datalistin baglanacagı veri kaynagını olusturmamız gerekebilir(ACCESS,SQL SERVER, XML dosyası olabilir.)

Ben bu projede Access veritabanı kullanacagım. Veritabanım adı her zamanki gibi urunler.mdb J

Tablomun içerisindeki Tablonun adı tblUrunler' dir. Bu tablo içerisinde asagıdaki alanlar bulunmaktadır.

Tablo içerisindeki bilgileri gördükten sonra, Baglantımızı 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"));

}

Baslantı Nesnemizi olusturduktan sonra, Datalistimizi baglayacagı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 çagırmak 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 yazmadık. Bunun için sayfamızın HTML Designına gelip;

HTML içerisinde asagıdaki gibi tabloyu ekleyebiliriz. Burada dikkat edilmesi gereken kısım verilerin ItemTemplate içerisinde görüntülenecegidir.

<%@ 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ülenecegi yerleri ayarladıktan sonra Design kısmına geri dönersek;

Gibi bir görüntü karsımıza çıkar. Simdi hersey hazır ve sayfamızı çalıstırıp 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. Sayfamızı çalıstırırsak;

Verilerimiz görüntülenir, fakat farkettiyseniz veriler altalta geliyor. Eger Form_Load olayına asagı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 özelligi RepeatColumns özelligi ile ayarladık.

Simdi projemizi tekrar çalıstırırsak;

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

Baska bir makalede görüsmek üzere, Iyi çalısmalar

Yorum (1)

  • emre / 19.10.2011 08:10:21

    gerçekten değerli bir bilgi idi benm için tşkler =)

Yorum Yaz