ASPNET MVC ile Resim Yükleme (Upload_1)

Öncelikle bir MVC projesi oluşturuyoruz. Ardından ResimData isimli bir veritabanı ve ResimYukle isimli bir tablo.

Tablonun fieldleri şöyle :
 resimId,resimAdi,resimUzanti,resimTuru,resimBoyutu,resimAciklama

Bağlantiyi EntityFrameworkle yaptım. Adını uploadentity.edmx olarak belirttim. Verileri aktarırken entitye ulaşmak içinde ResimDataEntities ismini ayrıyeten verdim. Entity ile tablo bilgilerini alırken verdiğimiz isim.

Connection stringimiz :

  <connectionStrings>

    <add name="ResimDataEntities" connectionString="metadata=res://*/Models.uploadentity.csdl|res://*/Models.uploadentity.ssdl|res://*/Models.uploadentity.msl;provider=System.Data.SqlClient;provider connection string=&quot;data source=.;initial catalog=ResimData;integrated security=True;multipleactiveresultsets=True;App=EntityFramework&quot;" providerName="System.Data.EntityClient" />

  </connectionStrings>

//Layout Sayfamız

<!DOCTYPE html>

<html>

<head>

    <title>Ana Sayfa</title>

    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>

</head>

<body>

    <div class="page">

        <div id="header">

            <div id="title">

                <h1>MVC Resim Yükleme</h1>

            </div>

            <div id="menucontainer">

                <ul id="menu">

                    <li>@Html.ActionLink("Ana Sayfa", "Index", "Home")</li>

                    <li>@Html.ActionLink("Yardım", "About", "Home")</li>

                    <li>@Html.ActionLink("Resim Ekle", "Ekle", "Home")</li>

                </ul>

            </div>

        </div>

        <div id="main">

            @RenderBody()

        </div>

        <div id="footer">

        </div>

    </div>

</body>

//index.cshtml

@model IEnumerable<fileUpload_mvc.Models.ResimYukle>

@{

    ViewBag.Title = "Ana Sayfa";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>Ana Sayfa</h2>

<p>

    @Html.ActionLink("Resim Ekle", "Ekle")<!-- Ekle Actionumuza link veriyoruz ve Ana sayfamızda varolan kayıtları listeliyoruz.-->

</p>

<table>

    <tr>

        <th>

            Resim Adı

        </th>

        <th>

            Resim Uzantısı

        </th>

        <th>

            Resim Türü

        </th>

        <th>

            Resim Boyutu

        </th>

        <th>

            Resim Açıklama

        </th>

        <th></th>

    </tr>

@foreach (var item in Model) {

    <tr>

        <td>

            @Html.DisplayFor(modelItem => item.resimAdi)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.resimUzanti)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.resimTuru)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.resimBoyutu)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.resimAciklama)

        </td>

        <td>

        <!--Gördüğünüz gibi  Ekle Actionumuza parametre belirtmiyoruz sadece link veriyoruz. Çünkü yeni kayıt yapacağız.-->

            @Html.ActionLink("Detay", "Detay", new { id = item.resimId }) |

            @Html.ActionLink("Sil", "Delete", new { id = item.resimId }) |

            @Html.ActionLink("Resim Ekle", "Ekle", new {id = UrlParameter.Optional})

        </td>

    </tr>

}

</table>

//Ekle.cshtml

@model IEnumerable<fileUpload_mvc.Models.ResimYukle>

@{

    ViewBag.Title = "Resim Ekle";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>Resim Ekle</h2>

<form action="" method="post" enctype="multipart/form-data">

  <!--Resim yülkleyeceğimiz için input file diyorouz. name vve id sini resimDosyasi şeklinde belirtiyoruz. Bunu controllerimizde kullanacağız.  -->

  <label for="file">Resim Seç :</label>

  <input type="file" name="resimDosyasi" id="resimDosyasi" />

  <input type="submit" value="Resmi Yükle" />

</form>

//Delete.cshtml

@model fileUpload_mvc.Models.ResimYukle

@{

    ViewBag.Title = "Delete";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>Sil</h2>

<h3>Silmek istediğinizden eminmisiniz?</h3>

<fieldset>

    <legend>Resim Yükle</legend>

    <div class="display-label"> Resim Adı</div>

    <div class="display-field">

        @Html.DisplayFor(model => model.resimAdi)

    </div>

    <div class="display-label"> Resim Uzantısı</div>

    <div class="display-field">

        @Html.DisplayFor(model => model.resimUzanti)

    </div>

    <div class="display-label"> Resim Türü</div>

    <div class="display-field">

        @Html.DisplayFor(model => model.resimTuru)

    </div>

    <div class="display-label"> Resim Boyutu</div>

    <div class="display-field">

        @Html.DisplayFor(model => model.resimBoyutu)

    </div>

    <div class="display-label"> Resim Açıklama</div>

    <div class="display-field">

        @Html.DisplayFor(model => model.resimAciklama)

    </div>

</fieldset>

@using (Html.BeginForm()) {

    <p>

        <input type="submit" value="Sil" /> |

        @Html.ActionLink("Ana Sayfa", "Index")

    </p>

}

//Detay.cshtml

@model fileUpload_mvc.Models.ResimYukle

@{

    ViewBag.Title = "Resim Detay";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>Resim Detay</h2>

<fieldset>

    <legend>Resim Detay</legend>

    <div class="display-label">Resim Adı</div>

    <div class="display-field">

        @Html.DisplayFor(model => model.resimAdi)

    </div>

    <div class="display-label">Resim Uzantısı</div>

    <div class="display-field">

        @Html.DisplayFor(model => model.resimUzanti)

    </div>

    <div class="display-label">Resim Türü</div>

    <div class="display-field">

        @Html.DisplayFor(model => model.resimTuru)

    </div>

    <div class="display-label">Resim Boyutu</div>

    <div class="display-field">

        @Html.DisplayFor(model => model.resimBoyutu)

    </div>

    <div class="display-label">Resim Açıklama</div>

    <div class="display-field">

        @Html.DisplayFor(model => model.resimAciklama)

    </div>

</fieldset>

<p>

    @Html.ActionLink("Ana Sayfa", "Index")

</p>

//Buda Controllerimiz

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using fileUpload_mvc.Models;

using System.Data.Objects.DataClasses;

using System.IO;

namespace fileUpload_mvc.Controllers

{

    public class HomeController : Controller

    {

        //

        // GET: /Home/

        private ResimDataEntities RsmYukle = new ResimDataEntities();

//Entity mize verdiğimiz isim burdan bir nesne oluşturuyoruz.

        public ActionResult Index()

        {

            return View(RsmYukle.ResimYukle.ToList());

//ResimYukle tablomuzun adı.Listeleme yapıyoruz.

        }

        public ActionResult Ekle()

        {

            return View();

        }

        //Burada resim ekleme işlemi yapıyoruz.

        [HttpPost]

        [ValidateInput(false)]

        public ActionResult Ekle(HttpPostedFileBase resimDosyasi)

//Ekle.cshtml sayfasından gelen resimDosyasi değişkeni. Yüklenecek resmi veriyor bize.

        {

            try

            {

                if (resimDosyasi.ContentLength > 0)//Resim seçilmişse

                {

                    var resimAdi = Path.GetFileName(resimDosyasi.FileName);//Resmin neme ini al.

                    var resimYolu = Path.Combine(Server.MapPath("~/App_Data/Resimler"), resimAdi);

//Resmi belirtilen yola yükle.

                    resimDosyasi.SaveAs(resimYolu);//Kaydet.

                    //Burada yüklenen resmin detay bilgilerini tabloya kaydediyoruz.

                    ResimYukle resimDosya = new ResimYukle();

                    resimDosya.resimAdi = Path.GetFileName(resimDosyasi.FileName);

                    resimDosya.resimUzanti = Path.GetExtension(resimYolu);

                    resimDosya.resimBoyutu = resimDosyasi.ContentLength.ToString();

                    resimDosya.resimTuru = resimDosyasi.ContentType;

                    RsmYukle.ResimYukle.AddObject(resimDosya);//Entity aracılığı ile verileri tabloya kaydediyoruz

                    RsmYukle.SaveChanges();

                }

            }

            catch (Exception exeption)

            {

                exeption.Message.ToString();

            }

            return View();

        }

        public ActionResult Delete(int id)

        {

            return View(RsmYukle.ResimYukle.ToList().Where(x => x.resimId == id).SingleOrDefault());//Silinecek olan kaydı burada görüyoruz

        }

        [HttpPost]

        [ValidateInput(false)]

        public ActionResult Delete(int id, FormCollection collect)//Silinecek olan kaydın id bilgisi alıyoruz

        {

            try

            {

                ResimYukle resimDosya = new ResimYukle();

                resimDosya = RsmYukle.ResimYukle.ToList().Where(x => x.resimId == id).SingleOrDefault();//Eşitliği burada buluyoruz.

                RsmYukle.ResimYukle.DeleteObject(resimDosya);//Ve resmi sliyoruz.

                RsmYukle.SaveChanges();//Kayıt işlemi.

                return View("Index", RsmYukle.ResimYukle.ToList());

            }

            catch (Exception exeption)

            {

                exeption.Message.ToString();

            }

            return View("Index", RsmYukle.ResimYukle.ToList());

        }

        public ActionResult Detay(int id)//Resmin detayını görmek istersek bu metot bize bunu veriyor.

        {

            return View(RsmYukle.ResimYukle.ToList().Where(x => x.resimId == id).SingleOrDefault());

        }

    }

}

Github Source Code

Benzer İçerikler

JSF EĞİTİM SETİ

WordPress

Blogger

ASPNET MVC ile basitçe Resim Yükleme işlemini gerçekleştirdik.Veritabanına Resmin Bir kısım özelliklerini kaydettik. Resim Yükleme (1) makalesini incelerseniz orada listeleme işlemide yaptık. Yani aslında resim yükleme silme ve düzenleme işlemleri ile ilgili ne varsa uygulamalı olarak göstermeye çalıştım.Umarım sizede faydalı olur.Memnuniyetlerinizi dostlarınıza. Şikayetlerinizi trafiğe bildirin.

Soysal Medyada Paylaş