ASP.net Repeater Nesnesini kullanarak Ürün Listeleme Sayfası

Bu makalemizde Repeater nesnesini kullanarak, veritabanında kayıtlı olan ürünleri fotoğraflarıyla birlikte listeleyeceğiz. Repater nesnesi, veritabanından bir SQL cümleciği aracılığı ile çekilen verileri listelemek için kullanılan, ASP.net'in Data Sekmesinde bulunan en temel bileşenlerden biridir.

Öncelikle ister Access ister SQL Server kullanarak aşağıdaki tabloları oluşturunuz ve ilişkileri tanımlayınız. Bu çalışmada, basit olması açısından Access veritabanını kullandım, profesyonel projelerde SQL Server, Oracle, MySQL, SYBASE gibi veritabanlarını kullanmak gerekir.

1) Visual Studio'da bir Web projesi oluşturup, içine bir Web Form ekliyoruz, ismini index olarak belirliyoruz.

2) İnternetten bulduğumuz 5 tane ürün resmini oluşturduğumuz images altındaki urunler klasörüne atıyoruz. Bu resimlerin adlarını da ürün tablomuzdaki resim alanına aşağıdaki gibi ekliyoruz. 1.JPG, 2.JPG, 3.JPG gibi.

3) Daha sonra oluşturduğumuz Web Form üzerine Toolbox'daki Data sekmesinden bir DataSource nesnesi sürükleyip bırakıyoruz.

4) Bir tane de Repeater nesnesini aynı şekilde form üzerine sürükleyip bırakıyoruz.

5) DataSource üzerindeki küçük ok'a tıklayarak DataSource ile Eticaret.accdb veritabanı bağlantısını sağlıyoruz.

6) Daha sonra index.aspx sayfasının kaynak kodu kısmına geçip aşağıdaki şekilde eklemeler yapıyoruz. Burada ItemTemplate ifadeleri arasına veritabanından hangi alanları yazmak istiyorsak yazabiliriz.

<img src="images/urunler/<%# Eval("resim") %> " width="200" /><br />

<asp:Label ID="lblurunadi" runat="server" Text='<%# Eval("urunadi ") %>'></asp:Label><br />

<asp:Label ID="lblfiyat" runat="server" Text='<%# Eval("fiyat ") %>'></asp:Label><br />

</ItemTemplate>

Yukarıda gördüğünüz gibi resim, urunadi ve fiyat gibi üç bilgiyi Eval fonksiyonu ile yine ToolBox'tan sürükleyip bıraktığımız Label'lerin Text özelliğine yazdık. Burada tek tırnak kullanıldığına dikkat ediniz. Sayfanın tamamı aşağıda verilmiştir.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>

<!DOCTYPE html>

<title>Repeater ile Ürün Listeleme</title>

</head>

<body>

<div>

</div>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>" SelectCommand="SELECT * FROM [tblurun]"></asp:SqlDataSource>

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">

<img src="images/urunler/<%# Eval("resim") %> " width="200" /><br />

<asp:Label ID="lblurunadi" runat="server" Text='<%# Eval("urunadi ") %>'></asp:Label><br />

<asp:Label ID="lblfiyat" runat="server" Text='<%# Eval("fiyat ") %>'></asp:Label><br />

</ItemTemplate>

</asp:Repeater>

</form>

</body>

</html>

Veritabanındaki ürün tablosunda listelenecek olan ürünün bilgilerini tutuyoruz. Aşağıda görüldüğü gibi önce ürün resmi, altında da ürün adı ve fiyatı gelecek şekilde listeleme yaptık.