Yazı Font Küçült Yazı Font Büyült

DataList Nesnesinde Resim Gösterilmesi

 

Merhaba arkadaşlar bu makalemizde DataList nesnesinde image larımızı göstereceğiz. İlk önce sql veritabanımızı Şekil 2 deki gibi oluşturun. Id sütunundaki Identity Specification özelliğini True yapın. Sonraki adımda projenize FileUpload, TextBox, Button ve DataList nesnesi ekleyin. Burada FileUpload nesnesi ile seçtiğimiz imagelar a ait description tanimlama bilgileri textbox a yazılarak butona basıldığında veritabanına kayıt işlemini gerçekleştireceğiz. Veritabanına kaydedilen imagelar aynı zamanda DataList nesnesinde de gözükecektir. Bu örnekte Datalist nesnesini 4 sutun yaptım. Siz isterseniz RepeatColumns dan RepeatColumns="4" istediğiniz kadar sütun ekleyebilirsiniz. Ayrıca Datalist in border style ini BorderStyle="Dotted" den değiştirebilirsiniz.

 

Şimdilik bu kadar… Makalenin sizlere faydalı olması dileğiyle.

 

Screenshot

Resim1

Şekil 1

Resim2

Şekil 2

Resim3

Şekil 3

Resim4

Şekil 4

Default.aspx.cs

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;

using System.IO;

 

 

public partial class _Default : System.Web.UI.Page

{

    SqlConnection baglan = new SqlConnection("Data Source=(LocalDB)\\v11.0;AttachDbFilename=|DataDirectory|\\image.mdf;Integrated Security=True;Connect Timeout=30");

 

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            BindDataList();

        }

 

    }

 

    protected void BindDataList()

    {

 

        baglan.Open();

 

        SqlCommand command = new SqlCommand("Select ImageName,Description From Picture", baglan);

        SqlDataAdapter da = new SqlDataAdapter(command);

        DataTable dt = new DataTable();

        da.Fill(dt);

        dlist.DataSource = dt;

        dlist.DataBind();

        baglan.Close();

    }

 

 

    protected void btnSave_Click(object sender, EventArgs e)

    {

       

        //Dosya adini aliyoruz.

        string fname = Path.GetFileName(FileUpload1.PostedFile.FileName);

        //Resimleri images klasorune kaydediyoruz.

        FileUpload1.SaveAs(Server.MapPath("images/" + fname));

      

        baglan.Open();

        // image adini and tanimlamayi veritabanimiza kaydediyoruz.

        SqlCommand cmd = new SqlCommand("Insert into Picture(ImageName,Description) values(@ImageName,@Description)", baglan);

       

        cmd.Parameters.AddWithValue("@ImageName", fname);

        cmd.Parameters.AddWithValue("@Description", txtImgDescription.Text);

        cmd.ExecuteNonQuery();

     

        baglan.Close();

        txtImgDescription.Text = string.Empty;

        BindDataList();

 

    }

}

 

Default.aspx

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html>

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

   

        <asp:FileUpload ID="FileUpload1" runat="server" Width="227px" />

        <br />

        <br />

        <asp:TextBox ID="txtImgDescription" runat="server"></asp:TextBox>

        <asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" Text="Save" Width="76px" />

        <br />

        <br />

   

        <asp:DataList ID="dlist" runat="server" RepeatColumns="4" CellPadding="5">

<ItemTemplate>

<asp:Image ID="Image1"  ImageUrl='<%# Bind("ImageName", "~/images/{0}") %>' alt='<%#Eval("Description") %>' runat="server" Width="150" Height="150" />

</ItemTemplate>

<ItemStyle BorderColor="Red" BorderStyle="Dotted" BorderWidth="3px" HorizontalAlign="Center"

VerticalAlign="Bottom" />

</asp:DataList>

 

    </div>

    </form>

</body>

</html>

 

Bir makalenin daha sonuna geldik. Bir sonraki makalede görüşmek üzere. Bahadır ŞAHİN