DATALIST NESNESİNİN HORIZONTAL/VERTICAL OLARAK GÖSTERİLMESİ (tr-TR)

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)

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">

<title>Untitled Page</title>

</head>

<body>

<div>

<asp:DataList ID="DataList1" runat="server" Style="z-index: 101;

left: 36px; position: absolute; top: 20px" Height="312px" Width="556px" ShowFooter="False">

<tr>

Ürün ID:</td>

</td>

<asp:Image ID="Image1" runat="server" ImageUrl=<%# DataBinder.Eval(Container.DataItem,"fldUrunResmi")%>/>

</td>

</tr>

<tr>

Ürün Kodu:</td>

</td>

</tr>

<tr>

Ürün Açıklama</td>

</tr>

<tr>

<%# 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;