11/5/2007
Merhaba serinin ilk iki makalesinde, FRP Kitap Merkezi sitesinin tasarımını oluşturmuş, database kurulumu yapmış ve bu database’den sayfalarımıza veri çekmiştik. Bu makalemizde dinamik olarak oluşturduğumuz listedeki kitapların detay sayfalarını oluşturmayı ve bu sayfalara dinamik link vermeyi inceleyeceğiz.

Başlayalım. Hemen hızlıca master page’den bir sayfa yaratıyoruz. Content alanını aktif hale getirdikten sonra sayfayı oneBook.aspx olarak kaydediyoruz. (Bu işlemlerin nasıl yapıldığını bilmiyorsanız serinin ilk makalesinde bulabilirsiniz.) Bu sayfada her kitabın detaylarını göstereceğiz. Her seferinde tek bir kaydı göstermek için FormView ideal bir kontroldür.

Toolbox>ASP.NET Controls>Data>FormView’u oneBook.aspx content alanına sürükleyip bırakıyoruz.

FormView’un yanındaki oka tıklayarak Common FormView Tasks kutucuğunu açıyoruz. Choose Data Source’dan New Data Source’u seçiyoruz. Configure Select Statement ekranına kadar yapılan ayarları bu serinin ikinci makalesinde bulabilirsiniz. Bu ekranda farklılığımız oluşacak. “Specify columns from a table or view” işaretli iken “kitapDetay” ı seçiyoruz. Tüm kolonları seçmek için “*” işaretliyoruz. Şimdi “WHERE” butonuna basıyoruz.

“WHERE” için kural yaratacağız. Column’da kitapDetayID’yi seçiyoruz. Böylece her seferinde sayfada gözükmesi için kitapDetay’ın ID sini kullanacağız. Operator “=” olacak. Source için “QueryString”i seçiyoruz. QueryString field’a kendi belirleyeceğimiz bir ismi yazabiliriz.Bu ismi boşluk, Türkçe karakter ve farklı semboller içeremeyecek şekilde yazıyoruz. Default value’ya ise “-1” yazıyoruz. Bunun sebebi şu; biz ID’lerimizin 1’den başlayarak ilerlediğini biliyoruz. Ama kullanıcılar eğer karşılığı olmayan bir linke girerlerse onlara bir mesaj vermek istiyoruz. Bunun içinde kullanılmayacağına emin olacağımız bir sayı kullanıyoruz.Tüm ayarlardan ADD butonuna basıp OK ile bu ekrandan çıkıyoruz.

Select Statement’da yazdıklarımızın sonucu gözükmekte. Next ile devam ediyoruz.

Gelen ekranda “Test Query” butonuna basıyoruz.

Gelen ekranda Value değereini 1,2, vs yapıp OK’e bastığınızda o ID’li kitapDetay bilgilerinin gözüküyor olması lazım.

Sayfanızı browserda kontrol ederseniz boş gelecektir. Ama adres çubuğunun sonunu oneBook.aspx?one_book=7 şeklinde değiştirirseniz kitaoDetayID’si 7 olan bilgilerin geliyor olması lazım. Peki biz bu sayfada sadece detayları mı göreceğiz, kitapların listesindeki gibi resmi, yazarı, yayın evi olmayacak mı? Şimdi o konuyu halledelim. Bunun için uygun olan yöntem “kitap” ve “kitapDetay” şeklindeki iki ayrı tabloyu tek seferde çekebilmek. Bunun için biraz daha kod eklemesi yapacağız.

FormView’un yanındaki oka tıklayarak Common FormView Tasks kutucuğunu açıyoruz. Configure Data Source’u tıklıyoruz. Gelen ekranı NEXT ile geçiyoruz. Configure Select Statement ekranında “Specify a custom SQL or stored procedure”u işaretleyip next’e basıyoruz.

Gelen ekranda Select tabı seçiliyken SQL Statement’e alttaki satırı yazıyoruz.

SELECT * FROM [kitap] inner join [kitapDetay] on kitap.kitapID=kitapDetay.kitapDetayID WHERE ([kitapDetayID] = @kitapDetayID)

Yukarıdaki satırı açıklamaya çalışayım. (SELECT * FROM [kitap]) ile kitap table’ındaki her şeyin seçileceğini ve (inner join [kitapDetay]) ile bu seçime kitapDetay table’ındaki her şeyin ekleneceğini (on kitap.kitapID=kitapDetay.kitapDetayID) ile ise eşleşmenin kitap table’nın kitapID’si ile kitapDetay table’nın kitapDetayID’si eşit olanlar arasında olacağını bildiriyoruz. WHERE ve sonrasını ise Expression Web’e hazırlatmıştık.

Alttaki ekranı zaten hazırlamıştık Next ile geçiyoruz.

Bu soruya DİKKAT. Burada No dememiz gerekiyor aksi takdirde FormView’un Edit Template özelliklerini kaybedeceğiz.

Aynı sebeple dikkat gösteriyoruz ve Yes’e basıyoruz.

Böylece kitapla ilgili her bilgiyi çekmiş olduk.

Şimdi Edit Template’i seçip Display; Item Template’de iken düzenlemelerimizi yapalım. kitapID’yi siliyoruz. kitapIsmi başlığını siliyoruz label’ı kalıyor. kitapYazar başlığını Yazar olarak değiştiriyoruz. kitapImage’i tamamen siliyoruz. kitapID1’i siliyoruz. kitapDetayID’yi siliyoruz. kitapBaskiYili başlığını Baskı Yılı olarak değiştiriyoruz. yayinEvi başlığını Yayın Evi olarak değiştiriyoruz. sayfaSayisi başlığını Sayfa Sayısı olarak değiştiriyoruz. aciklama başlığını siliyoruz.

Şimdi Edit Template’de iken imaj ekliyoruz. İmaj ekleme işlemleri için serinin ikinci makalesinden yararlanabilirsiniz.. “kitapIsmiLabel” CSS’den .boldText’i uygulayıp sağında bir kez Enter’a basıyoruz. Yazar, Baskı Yılı, Yayın Evi, Sayfa Sayısı başlıklarını seçip her birine .boldText uyguluyoruz. “sayfaSayisiLabel”‘ından sonra bir boşluk bırakıyoruz.

Her şey düzgün görünüyor. Şimdi sayfa boş olduğunda ya da yanlış girildiğinde girilecek olan mesajı hazırlayalım. FormView, Edit Templates’i açıyoruz. Display olarak EmptyDataTemplate’i seçiyoruz.

Boş alana istediğimiz mesajı yazıyoruz. Alttaki mesaj için “buraya tıklayınız”ı seçip hyperlink ile bookLists.aspx’e link veriyoruz.

Sonuç.

Şimdi her kitap tanıtımın altına da kitap listesine dönmek için bir link koyalım. FormView, Edit Templates’i açıyoruz. Display olarak FooterTemplate’i seçiyoruz. Boş alana içerikle arasında sınırı belirlemesi için ilk önce Toolbox>HTML>Tags altından Horizontal Line’ı sürükleyip bırakıyoruz. Altına da mesajımızı yazıp gerekli olan kelimeleri bookLists.aspx’e linkliyoruz.

Sonuç.

Evet her kitap için detay sayfasını dinamik olarak hazırladığımıza göre şimdi kitapların listesinde her kitaba kendi detayına linkli olacak şekilde ayarlamalıyız. Bunun için bookLists.aspx sayfasını tekrar açıyoruz. Bu sayfadaki DataList’in Edit Templates’ini açıyoruz. Item Tepmlate’e “kitapIsmiLabel”ın üstüne Toolbox>ASP.NET Controls>Standard’dan HyperLink’i sürükleyip bırakıyoruz.

HyperLink’in sağındaki oka tıklayarak Common HyperLink Tasks kutucuğunu açıyoruz ve buradaki Edit DataBindings’e tuklıyoruz.

Gelen ekranda Bindable Properties’de ilk önce Text’i seçiyoruz. Field binding işaretli iken Bound to’da kitapIsmi’ni seçiyoruz.

Bindable Properties’de bu sefer NavigateUrl’yi seçiyoruz. Field binding işaretli olacak. Bound to olarak kitapID’yi seçiyoruz. Format’a oneBook.aspx?one_book={0} satırını yazıyoruz. Ardından OK..

kitapIsmiLabel’ını siliyoruz.

Sonuç. Kitap imajının yanında yine ismi var ama bu sefer kendi detay sayfasına linkli.

Buraya kadar her şey yolunda. Şimdi bookLists.aspx sayfasındaki her kitabın imajını güzel bir teknikle kendi detayına linkleyelim. Her şeyden önce DataList’in Edit Template’ine basarak Item Template’ni açıyoruz. Buradaki imaj kontrolünü siliyoruz.

İmajı sildiğimiz yere tekrar HyperLink sürükleyip Edit DataBindings’ine tıklıyoruz.

Bindable Properties’de ImageUrl. Filed binding işaretli Bound to’da kitapImage’i seçiyoruz. Formata images/books/thumb/{0} yazıyoruz.

Bindable Properties’de bu sefer NavigateUrl. Bound to’da kitapID seçiyoruz. Format’a oneBook.aspx?one_book={0} satırını yazıyoruz. Ardından OK..

Böylece her kitabın imajı da kendi detay sayfasına linklenmiş oldu.

Sonuç. bookLists.aspx sayfası.

oneBook.aspx?one_book=4 sayfası.

Bu makalede DataList ile çekilmiş verilerin her biri için FormView kullanarak detay sayfası oluşturmayı ve bu veriler için kendi detayına dinamik olarak link vermeyi anlattım.

İyi çalışmalar

Teşekkürler