Ürün Detay Sayfası Örneği
Dinamik içerikli sitelerde, bir sayfada kayıtların listelendiğini, tıklanan kaydın detaylarının başka bir sayfada görüntülendiğini sıkça görmekteyiz. Alış veriş siteleri, ders-konu anlatım siteleri (btdersleri.com da böyle) haber siteleri gibi birçok örnek verilebilir.
Bu sayfada basit bir ürün detay sayfasının nasıl hazırlanacağı adım adım anlatılmıştır. Ayrıca videomuzda işlem adımlarını izleyebilirsiniz.
Öncelikle ürün bilgilerinin yer aldığı bir veritabanı gerekli. Bu veritabanında urunler isminde bir tablo olsun ve bu tabloda ürünlere ait çeşitli özellikler yer alsın.
İki adet sayfa hazırlayacağız. İlk sayfada ürün isimlerini listeleyip bunlara otomatik olarak link verdireceğiz. Bu linke QueryString ile ürün kodu bilgisini de ekleyeceğiz.
İkinci sayfada ise QueryString ile gelen ürün koduna sahip kayıt alınarak, FormView içerisinde görüntülenecek.
1. Sayfanın Hazırlanması (Ürünlerin Listeleneceği Sayfa):
urunListele.aspx isminde bir sayfa oluşturalım. Bu sayfaya urunler tablosundaki tüm kayıtların (isteğe bağlı where kullanabilirsiniz) urunAdi alanlarını getirecek bir SqlDataSource ekleyelim.
Ardından bir ListView ekleyelim ve bu DataSource'a bağlayalım.
Bu ListView içerisine ItemTemplate ekleyerek aşağıdaki gibi düzenleyelim:
<ul id="urunListesi">
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<li>
<a href='<%# "urunDetay.aspx?urun="+Eval("urunId") %>'>
<%# Eval("urunAdi") %>
</a>
</li>
</ItemTemplate>
</asp:ListView>
</ul>
Burada ul etiketi ListView'dan önce açılıp sonra kapanıyor. Li etiketi ise her kayıt için birer kez kullanılacağı için ItemTemplate içerisinde açılır.
Burada anlaşılması gereken mantık da budur: ItemTemplate etiketleri arasındaki herşey, tüm kayıtlar için çoğaltılacaktır.
a etiketleri arasında Eval komutu sayesinde ürün adının görünmesi sağlanmıştır.
Href parametresinde ise bağlantı verilecek sayfanın adına, QueryString urun parametresi eklenmiş olup, bu parametreye Eval komutu ile urunId bilgisinin atanması sağlanmıştır.
Sayfayı çalıştırıp kaynağı görüntülediğimizde ul etiketleri arasında her kayıt için li ve a etiketlerinin oluşturulduğunu göreceksiniz.
Ul etiketini Css ile istediğiniz gibi biçimlendirebilirsiniz ve istediğiniz görünümü elde edebilirsiniz.
Ayrıca ul etiketi yerine farklı yöntemler de kullanabilirsiniz. Bu konuda farklı bir örnek daha yazalım:
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<p>
<a href='<%# "urunDetay.aspx?urun="+Eval("urunId") %>'>
<%# Eval("urunAdi") %>
</a>
</p>
</ItemTemplate>
</asp:ListView>
Bu seferki örnekte her ürünün adı p ve a etiketleri arasında görünecektir.
İlk sayfamız artık hazır. Ürün adına tıkladığımızda bizi urunDetay.aspx sayfasına yönlendirecek ve giderken QueryString içerisinde urunId bilgisini de götürecek linklerimiz hazır.
2. Sayfanın Hazırlanması (Ürün Detayları Sayfası):
Bu sayfaya da bir adet SqlDataSource ekleyelim.
Urunler tablosuna bağlarken Where komutuna tıklayalım ve resimdeki gibi ayarlayalım:
4 numaralı alana QueryString'te urunId bilgisini taşıyan parametrenin adını yazmalıyız.
5 nolu alan isteğe bağlıdır. QueryString ile istenen bilgi gelmezse varsayılan olarak kullanılmasını istediğimiz değeri buraya yazabiliriz.
Add butonuna tıkladığımızda şartımız sorguya eklenecek, OK butonuna tıklayarak devam edebiliriz.
DataSource bu şekilde hazırlandıktan sonra gelen bilgileri gösterecek bir nesne lazım. ListView, FormView, DetailsView vb görüntüleme nesnelerinden birini kullanabiliriz. İlk sayfada ListView kullanmıştık. Bu sefer FormView kullanalım.
FormView ile ListView arasındaki fark:
FormView oluşturduğumuzda ItemTemplate, InsertItemTemplate, EditItemTemplate görünümleri otomatik olarak oluşturulur. Ayrıca bu etiketler arasına tüm alanlar için asp.net kontrolleri (label, textbox vb) eklenir. Bunlardan istemediklerimizi silebilir ve düzenleyebiliriz.
ListView oluşturduğumuzda ise hiçbir Template otomatik oluşturulmaz. Tüm görünümleri oluşturmak bize kalmıştır.
Ayrıca FormView aynı anda sadece bir kayıt gösterebilir. ListView ise birden fazla kaydı liste şeklinde gösterebilir.
FormView içerisini de aşağıdakine benzer şekilde düzenleyelim:
<asp:FormView ID="FormView1" runat="server" DataKeyNames="urunId" DataSourceID="SqlDataSource1">
<ItemTemplate>
<h1><%# Eval("marka") %></h1>
<h2><%# Eval("urunAdi") %></h2>
<p class="fiyat"><%# Eval("fiyati") %> TL</p>
<p><%# "Kalan Adet: "+Eval("stokAdeti") %></p>
<asp:Image ID="Image1" ImageUrl="kargoBeles.jpg" Visible='<%# Eval("kargoBedavaMı") %>' runat="server" />
<asp:Image ID="Image2" ImageUrl="superHizli.jpg" Visible='<%# Eval("superHızlıMı") %>' runat="server" />
<p>Kdv:<%# Eval("kdv") %></p>
<div class="ozellik">
<%# Eval("ozellikler") %>
</div>
</ItemTemplate>
</asp:FormView>
Kırmızı renkte belirtilen yerlere özellikle dikkat ediniz.
asp.net ürün detay sayfası oluşturma, tıklanan ürünün ayrıntılarını başka sayfada listeleme, kayıtları listeleyip otomatik link verme, asp.net product details page tutorial, tıklanan kaydın ayrıntılarını listeleme
KONU İLE İLGİLİ ÖRNEKLER
Bu konu ile ilgili örnek bulunmamaktadır.
22996 kez okundu.