WEB DİZAYN
ARAMA
Daha önce kayıt ettiğimiz verileri arayarak istediğimiz sonucu bir Gridview'de göstermeye ve eklediğimiz Gridviewede resim göstermeyi anlatacağım.İlk olarak aşağıdaki gibi bir tasarım yapalım.
Sonrada aşağıdaki kodu ara butonuna çift tıklayarak yazınız.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
namespace favori
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
string yol = "Data Source=AKBV-BILGISAYAR\\SQLEXPRESS;Initial Catalog=Favoriasp;Integrated Security=True";
SqlConnection baglan=new SqlConnection(yol);
string firma, isim, sektor;
firma = this.TextBox1.Text;
isim = this.TextBox2.Text;
sektor = this.TextBox3.Text;
string sorgu = "select * from kart where firma_adi='" + firma + "' or isim='" + isim + "' or sektor='" + sektor + "' ";
SqlDataAdapter sadp = new SqlDataAdapter(sorgu,baglan);
DataSet ds = new DataSet();
sadp.Fill(ds);
this.GridView1.DataSource = ds.Tables[0];
this.GridView1.DataBind();
}
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
}
}
}
Yukarıda geçen kodda arama fonksiyonu yaptıktan sonra bunu gridview'de göstermemizi sağlar. Peki Gridview'e nasıl resim ekleriz. Bunuda Sıra ile anlatayım.
Şimdi bu butona tıklayalım. Aşağıdaki pencere karşımıza gelecektir.
Buradan Edit Columns seçeneğini kullanarak sütunlarımızı düzenleyebiliriz. Hemen tıklayalım ve aşağıdaki pencereyi görelim.
Burada 1 nolu kısım; gridview kontrolümüzde görüntüleyebileceğimiz kontrolleri görmekteyiz. 2 nolu alan ise görüntülenmek üzere seçilen kontrollerin listelendiği kısımdır. 3 nolu alanda ise; seçilen kontrollerle ilgili özellik ayarlamalarının yapıldığı kısımdır. Şimdi biz her üçünü de nasıl kullanacağımızı ayrıntılı bir şekilde açıklayalım.
Öncelikle 1 nolu kısımdan ImageField seçeneğini seçerek Add butonuna tıklayalım. Şimdi de 2 nolu kısma eklenen bu alanla ilgili özellikleri ayarlamak için 3 nolu kısmı kullanacağız. ' nolu kısımda ki ImageField alanını seçtiğimizde 3 nolu kısımda özellik listesi görüntülenecektir. Şimdi aşağıdakine benzer bir ekranla karşı karşıya olmanız gerekmektedir.
Hemen ImageField alanında olması gereken ayarlamaları yapalım. Öncelikle resim bilgileri veritabanından çekileceğinden dolayı Data kısmında ayarlamalar gerçekleştireceğiz.
Yukarıda ki görüntüye baktığımızda DataImageUrlField kısmına veritabanında resim bilgisinin alınacağı tablo alanımızı belirttik. DataImageUrlFotmatString kısmında ise resimlerin hangi klasörden hangi isimle çekileceği belirtilmiştir. Buna göre resimler, ana dizinde ki resimler klasörü altında bulunmaktadır. Burada ki {0} bilgisi ise görüntülenecek resim bilgisinin hemen yukarıda belirttiğimiz resim alanından çekilecektir.
Artık bu anda resimlerimiz sayfada görüntülenecektir. Ancak görüntüleme işi orijinal boyutlarıyla gerçekleştirilecektir. Çünkü resim boyutlarını kısıtlamadık. Bunun için yine aynı kısımdan yani yukarıda ki görüntüden gerçekleştirilecektir. Styles bölümünde ki ControlStyle kısmında ki width özelliğini 60px olarak ayarlayalım. Böylece resimlerin küçük boyutları karşımıza gelsin.
Bütün ayarlamalarımız bittiğine göre artık projemizi çalıştırabiliriz. Çalıştırdığımda karşımıza aşağıda ki görüntü gelecektir.
