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
 
Şekil 1
Şekil 2
Şekil 3
Ş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

About Bahadır Şahin

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.

0 comments:

Öne Çıkan Yayın

GridView da Seçili Satırı DetailsView da Göstermek

Merhaba arkadaşlar bu makalemizde GridView nesnesi ile birlikte DetailsView nesanesini birlikte kullanacağız. GridView da seçili satırın de...