GridView Kontrolü - 4 - GridView İçerisinde Resim Gösterme

 

Merhaba bu makalemizde sıkça kullandığımız Gridview kontrolü içinde resim görüntüleme konusuna değineceğiz. Oldukça basit bir işlem olan bu konuyu bir örnekle anlatalım.

 

Örnek projemizde kullanacağımız veritabanı tablosuna ait script şö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

 

 

 

Yukarıdaki tabloyu veritabanınızda oluşturun ve içine örnek bilgiler girin. Bizim veritabanımızda ki bilgiler;

UrunKey	UrunAdi	Fiyat	Açıklama	UrunResimUrl
46DA7A30-0F6B-49E7-BBA2-0C6986119C4E	Samsung D880	410.00	çift sim kartlı	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 hızlı bilgisayar	resimler/pavilion.jpg

 

 

                Şimdi gelelim projemizin aspx sayfasındaki html koduna. Html kodunuzu aşağıdaki 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çıklama") %>'></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 veritabanımızdaki verileri çekip grid içine atmak için aşağıdaki kodu yazınız.

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üğünüz gibi GridView içinde resim görüntülemek bu kadar basit bir işlem. Projemizi çalıştırdığımız zaman karşımıza aşağıdaki ekran çıkıyor. Bir sonraki makalemizde görüşmek üzere.

Yorum Yapabilmek İçin Üye Girişi Yapmanız Gerekmektedir.

gridview kontrolü - 4 - gridview � çerisinde resim gösterme