GridView Kontrolü – 4 – GridView Içerisinde Resim Gösterme

Merhaba bu makalemizde sikça kullandigimiz Gridview kontrolü içinde resim görüntüleme konusuna deginecegiz. Oldukça basit bir islem olan bu konuyu bir örnekle anlatalim.

Örnek Projeyi için buradan indirebilirsiniz.

Örnek projemizde kullanacagimiz veritabani tablosuna ait script söyle:

CREATE TABLE [dbo].[Urun](

      [UrunKey] [uniqueidentifier] NOT NULL,

      [UrunAdi] [nvarchar](50) NULL,

      [Fiyat] [decimal](6, 2) NULL,

      [Açýklama] [nvarchar](50) NULL,

      [UrunResimUrl] [nvarchar](300) NULL,

 CONSTRAINT [PK_Urun_1] PRIMARY KEY CLUSTERED

(

      [UrunKey] ASC

)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]

) ON [PRIMARY]

GO

ALTER TABLE [dbo].[Urun] ADD  CONSTRAINT [DF_Urun_UrunKey]  DEFAULT (newid()) FOR [UrunKey]

GO

 

.

Yukaridaki tabloyu veritabaninizda olusturun ve içine örnek bilgiler girin. Bizim veritabanimizda ki bilgiler;

UrunKey

UrunAdi

Fiyat

Açiklama

UrunResimUrl

46DA7A30-0F6B-49E7-BBA2-0C6986119C4E

Samsung D880

410.00

çift sim kartli

resimler/d880.jpg

F59A766A-F30B-4CA2-A4F9-1A23292B6C0D

HP Pavilion dv2100

1400.00

19 inç monitor

resimler/lcd.jpg

4738CE9C-AE6A-45A6-8E09-3637689A90E0

Samsung 19 inc LCD

250.00

super hizli bilgisayar

resimler/pavilion.jpg

 

                Simdi gelelim projemizin aspx sayfasindaki html koduna. Html kodunuzu asagidaki gibi düzenleyin.

<asp:GridView BorderStyle="None" AutoGenerateColumns="false" ID="UrunlerGridView"

    runat="server">

    <Columns>

        <asp:TemplateField>

            <HeaderTemplate>

                <table width="100%" cellpadding="0" cellspacing="0" style="font-weight: normal; border-style: none;

                    border-width: 0">

                    <tr>

                        <td colspan="4">

                        </td>

                    </tr>

            </HeaderTemplate>

            <ItemTemplate>

                <tr>

                    <td>

                        <a href="http://www.yazilimmutfagi.com">

                            <asp:Image ID="Image1" Width="80px" Height="80px" ImageUrl=’<%#Bind("UrunResimUrl") %>

                                runat="server" />

                        </a>

                    </td>

                    <td>

                        <asp:Label ID="Label1" runat="server" Text=’<%#Bind("UrunAdi") %>‘></asp:Label>

                    </td>

                    <td>

                        <asp:Label ID="Label2" runat="server" Text=’<%#Bind("Açiklama") %>‘></asp:Label>

                    </td>

                    <td>

                        <asp:Label ID="Label3" runat="server" Text=’<%#Bind("Fiyat") %>‘></asp:Label>

                    </td>

                </tr>

                <tr>

                    <td colspan="4">

                        <hr />

                    </td>

                </tr>

            </ItemTemplate>

            <FooterTemplate>

                </table>

            </FooterTemplate>

        </asp:TemplateField>

    </Columns>

</asp:GridView>

Daha sonra veritabanimizdaki verileri çekip grid içine atmak için asagidaki kodu yaziniz.

protected void Page_Load(object sender, EventArgs e)

{

    if (!IsPostBack)

    {

        UrunleriGetir();

    }

}

 

private void UrunleriGetir()

{

    string query = "SELECT * FROM Urun";

    DataSet ds = SorguCalistir(query);

    UrunlerGridView.DataSource = ds;

    UrunlerGridView.DataBind();

 

}

public DataSet SorguCalistir(string query)

{

    SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=Ornek;Integrated Security=True");

    con.Open();

    SqlDataAdapter da = new SqlDataAdapter(query, con);

    da.SelectCommand.ExecuteNonQuery();

    DataSet dt = new DataSet();

    da.Fill(dt);

    return dt;

}

.

Gördügünüz gibi GridView içinde resim görüntülemek bu kadar basit bir islem. Projemizi çalistirdigimiz zaman karsimiza asagidaki ekran çikiyor. Bir sonraki makalemizde görüsmek üzere.

9 thoughts on “GridView Kontrolü – 4 – GridView Içerisinde Resim Gösterme

  1.  bu sekilde kullanim dogru degildir. ayni matikta bende kullandim fakat gridin de ciktisi tablo oldugundan footertemplate içerisindeki kapatma tagini almadan gridin kapatma tagini table kapatma tagi olarak algiliyor ve masterda ne vbarsa bunlari tek tabloda gösteriyor. yani css cosuyor . böyle sorunlar karsilasan varsa yorum atsin

  2. Mrb Öncelikle Örneginiz Çok Güzel Olmus Bunun Için Tesekkür Ederim Fakat C# Kismini Neden Bu Kadar Karmasik Yaptiniz Onu Anlamadim Daha Kolay Bi Yoluda Vardi C# Yeni Baslayan Biri Olarak Arastirarak Baska Bi Sekilde Çektim Verileri Void Mslada Gösterdim Su Sekilde Yaprim

    SqlConnection

    conn = new SqlConnection("Data Source=.;Initial Catalog=Ornek;integrated Security=True");SqlDataAdapter adp =

  3. örneginiz için çok tesekkürler,  briaz daha açik anlatlsaydi daha yardmci olabilirdi. itemtemplate ler misal.
    benim sorum ben örneginizi vb diline uyarladim ama explorer sayfasinda resim cikmiyor yanlis bisey mi yapiyorum diye ayrica bir label e imageurl deki yolu da atama yaptim ve label de tam olarak veritabanindaki resmin yolu çikiyor ama grid de resim yok. Sorun nerde olabilir acaba.?
    tesekkürler.

  4. derya hanim,

    gridview e direk olarak ftp adresini url olarak gösterirseniz sorun olmamasi lazim. ama ftpnin kullanici adi ve sifresi olmamasi gerekir, yani yetki kisitlamasi olmayacak aksi taktirde sorun olur. eger yetki sinirlamasi varsa, gridin bind oldugu sirada ftp adresine erisip resimlerin urllerini alarak ftpye gostermeniz yeterli olacaktir.

    zaman bulabilirsem bununla ilgili bir örnek yapmaya calisirim

  5. Ben burada yaptiginiz örnekten biraz dha farkli bisiy yapmak istesem.. mesela  programa ekledigim bir klasördeki .bmp leri çeksem.. burda sorun yok ..ama bu klasörü ben serverdan çektim.. belli araliklarla güncellmek yerine ftp ile bende olmayan resimleri servardan çekmek istesem…nasil yapardim..ben c# ile ftpden resim çekiyorum.. her seferinde servera gitmicem… sadece bende olmayanlari çekicem  Grid viewla bunu yapabilirmiyim..yani ftp ye baglanti yapabilirmiyim.. yoksa dinamik kotroller olusturup içinemi atiyim ama 300 – 400 satirlik bir tablodan bahsediyoruz.. herseyi dianmik olusturmak istesem çok büyük zaman kaybi olmaz mi? Gridview beni kurtarabilir mi…

  6. Yorumunuz ve tavsiyeniz için tesekkür ederiz. Sitemiz 3 ay önce faliyete geçti ve yavas yavas eksikleri tamamliyoruz. Tavsiyenizi dikkate alacagimi söylemek istedim. Tesekkürler

  7. çok güzel bir örnek,devamini bekliyorum.ancak kodlari bir code tagi arasina koysaniz daha anlasilir gibime geliyor.

Guests için bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir