Asp.Net'te DataList Kontrolü

Bu makalemde datalist kontrolünü kullanarak veritabanındaki resimleri web sayfası üzerinde göstermekten söz edeceğim.

Öncelikle veritabanımıza (adı HOTEL) Resimler diye tablo oluşturalım.tablomuzun içine ResimID ve ResimUrl diye iki tane property ekliyelim. ResimUrl özelliğine resimlerimiz hangi dosya içinde bulunduğunun uzantısı ekliyoruz.

Database kısmında bu işlemleri yaptıktan sonra visual studio tarafına geçerek Galeri adında bir tane web page açalım..

Galeri sayfasının html kısmına bir tane datalist ekliyelim ve aşağıdaki kodları yazalım.

<asp:Content ID="Content1" ContentPlaceHolderID="cphMaster" runat="server">
    <asp:DataList ID="dlOdalar" runat="server" RepeatColumns="3" RepeatDirection="Vertical">
        <HeaderTemplate>
            <h3>
                << Resimlerimiz >>
            </h3>
        </HeaderTemplate>
        <ItemTemplate>
            <div style="width:300; height=250; border-style:solid">
                <asp:Image ID="resim" Width="310" Height="200" ImageUrl='<%#Eval("ResimUrl")%>' runat="server" />
            </div>
        </ItemTemplate>
    </asp:DataList>
</asp:Content>
 

Bu kodu yazdıktan sonra web sayfamızın cod behind kısmına geçerek gerekli kodumuzu page'in load olayına yazıyoruz.

protected void Page_Load(object sender, EventArgs e)
        {
            

            string connectionString = "Data source=.;Initial Catalog=HOTEL;Integrated Security=true";
            SqlConnection connection = new SqlConnection(connectionString);
            if (connection.State == ConnectionState.Closed)
                connection.Open();

            SqlCommand command = new SqlCommand("select * from Resimler ", connection);
            SqlDataReader dr = command.ExecuteReader();

            dlOdalar.DataSource = dr;
            dlOdalar.DataBind();
            connection.Close();

        } 

Code behind kısmında bunları yaptıktan sonra sayfamızı çalıştırarak web üzerinde resimleri görebiliriz.

Bir makalenin daha sonuna geldik. Bir sonraki makalede görüşmek üzere...