ذخیره عکس در دیتابیس و نمایش آن در View در ASP.NET MVC

ذخيره عکس در ديتابيس و نمايش آن در MVC
ذخيره عکس در ديتابيس و نمايش آن در MVC

ذخیره و بازیابی عکس در دیتابیس SQL Server با #C

با سلام خدمت تمامی همراهان مقالات آموزشی طراحی سایت با ASP.NET  ، در این مقاله آموزشی قصد داریم تا نحوه ذخیره عکس در دیتابیس و دریافت عکس از دیتابیس و نمایش آن در View را به شما عزیزان آموزش دهیم .

هرچند ذخیره تصویر در دیتابیس و یا بانک اطلاعاتی باعث سنگینی دیتابیس می‌شود اما در بعضی مواقع نیاز داریم که فایل ها و عکس‌هایی که برایمان از اهمیت خاصی برخوردار هستند را درون دیتابیس ذخیره کنیم . در این مقاله آموزشی به شما نحوه ذخیره یا آپلود عکس در دیتابیس را آموزش خواهم داد پس با این مقاله آموزشی همراه باشید و مراحل زیر به ترتیب انجام دهید.

مراحل ذخیره و بازیابی عکس در DataBase در MVC

گام اول : ساخت یک پروژه از نوع MVC

برای شروع کار ابتدا یک پروژه خالی از نوع MVC ایجاد نمایید. برای این منظور ابتدا در ویژوال 2015 یک پروژه‌ی جدید از نوع ASP.NET Web Application ایجاد کرده و سپس نام دلخواهی برای پژوه‌ی خود قرار دهید سپس در قسمت ASP.NET 4.5.2 Templates گزینه Empty را انتخاب نموده و در قسمت Add folders and core references for تیک MVC را بزنید و سپس بر روی دکمه OK کلیک نمایید تا یک پروژه خالی از نوع MVC برای شما ایجاد شود.

گام دوم : ساخت دیتابیس به روش EF Code First

حال با روش EF Code First یک دیتابیس برای ذخیره عکس در SQL SERVER ایجاد می نماییم برای این منظور درون پوشه‌ی Model یک class به نام ImageDB یا نام دلخواه خود ایجاد نمایید. سپس کدهای زیر را درون این class کپی کنید. توجه داشته باشید که حتما نوع فیلد image را برابر []byte قرار دهید چون می‌خواهیم عکس را به آرایه ای از بایت ها تبدیل کرده و سپس درون دیتابیس ذخیره کنیم توجه داشته باشید که اگر می‌خواهید خودتان به صورت دستی دیتابیس خود را در SQL SERVER  ایجاد کرده و جدولی برای ذخیره عکس در آن بسازید حتما نوع فیلد Image را در SQL SERVER برابر Image قرار دهید.

کدهای درون class

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Web;

namespace ImageInDB.Models
{
    public class ImageDB
    {
        public int id { get; set; }

        [Display(Name = "تصوير", Prompt = "تصوير", Description = "تصوير")]
        [Column(TypeName = "image")]
        public byte[] Image { get; set; }
    }
}

حال برای ساخت دیتابیس به روش EF Code First باید یک برای Context پروژه خود ایجاد نمایید برای این منظور بر روی پوشه Model کلیک راست کرده و گزینه Add و سپس گزینه Class را انتخاب نمایید حال یک نام برای کلاس context انتخاب کنید ما نام “ImageInDBContext” را برای کلاس Context انتخاب می کنم . کدهای زیر درون کلاس Context کپی نمایید.

کدهای درون کلاس context

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;

namespace ImageInDB.Models
{
    public class ImageInDBContext : DbContext
    {
        public ImageInDBContext() : base("name=ImageInDBContext")
        {
        }
        public System.Data.Entity.DbSet<ImageInDB.Models.ImageDB> ImageDB { get; set; }
    }
}

و سپس connectionStrings زیر را برای ارتباط پروژه با دیتابیس به Web.Config اضافه نمایید.

  <connectionStrings>
    <add name="ImageInDBContext" connectionString="Data Source=(local); Initial Catalog=ImageDB; Integrated Security=True; MultipleActiveResultSets=True;"
      providerName="System.Data.SqlClient" />
  </connectionStrings>

گام سوم : ایجاد Controller برای دریافت و ذخیره عکس

خب حالا نوبت به ایجاد کنترلر می‌رسد برای ساخت کنترلر ابتدا روی پوشه Controller راست کلیک کرده و گزینه Add انتخاب کنید سپس بر روی گزینه Controller کلیک کرده و با انتخاب گزینه MVC 5 Controller – Empty یک کنترل جدید از نوع Empty بسازید ما نام controller خود را SaveToDB قرار می‌دهیم سپس درون این کنترلر یک Action Method به نام Index قرار دهید این اکشن متد تصویر را که از نوع HttpPostedFileBase است، به عنوان پارامتر ورودی دریافت و سپس آن را به آرایه ای از بایت‌ها تبدیل کرده و درنهایت در data base ذخیره می‌نماید. برای دریافت عکس و ذخیره آن در دیتابیس کدهای زیر را درون کنترلر  کپی نمایید.

کدهای درون Cotroller

using ImageInDB.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ImageInDB.Controllers
{
    public class SaveToDBController : Controller
    {
        // GET: SaveToDB
        private ImageInDBContext db = new ImageInDBContext();
        public ActionResult Index(HttpPostedFileBase Image)
        {
            if (Image != null)
            {
                byte[] uploadFile = new byte[Image.InputStream.Length];
                Image.InputStream.Read(uploadFile, 0, uploadFile.Length);

                ImageDB ImageDB = new ImageDB()
                {
                    Image = uploadFile,
                };
                db.ImageDB.Add(ImageDB);
                db.SaveChanges();
            }
            return View();
        }
    }
}

گام سوم : ایجاد View برای ارسال عکس به Controller  

حال باید یک View برای اکشن متد Index  بسازید برای این کار درون متد Index راست کلیک کرده و گزینه Add view را انتخاب کنید پس از ساخت ویو درون آن یک تگ Input از نوع file و یک تگ input از نوع submit برای ارسال فرم به Controller قرار می‌دهیم.

@{
    ViewBag.Title = "Index";
}
<div style="direction:rtl;">
    <h3>ذخیره عکس در دیتابیس</h3>

    @using (Html.BeginForm("Index", "SaveToDB", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        @Html.AntiForgeryToken()

        <div class="col-md-12">
            <div class="col-md-2">
                <input type="file" name="Image" />
            </div>
            <div class="col-md-3">
                <input type="submit" value="ذخیره عکس" />
            </div>
        </div>
    }
</div>

گام چهارم : اجرای View و ذخیره عکس در دیتابیس

حالا صفحه View را اجرا نمایید و فایل خود انتخاب کرده و سپس بر دکمه ذخیره عکس کلیک نمایید به همین راحتی شما موفق شدید که عکس خود را درون دیتابیس ذخیره نمایید. عکسی که آپلود کرده اید به صورت تصویر زیر درون دیتابیس ذخیره می شود .

آپلود عکس در دیتابیس در mvc
آپلود عکس در دیتابیس در mvc

گام پنجم : بازیابی عکس از دیتابیس و ارسال آن به View

حال برای گرفتن عکس از دیتابیس و نمایش آن در View ، دو متد GetImageFromDataBase و RetrieveImage را به کنترلر SaveToDB اضافه نمایید، متد GetImageFromDataBase یک متغیر به نام id که همان id عکس در دیتابیس است را به عنوان ورودی می‌گیرد و با دستور LINQ تصویر را از دیتابیس خوانده و در متغیر cover قرار می‌دهد و متد RetrieveImage متد GetImageFromDataBase را فراخوانی کرده و عکس را در قالب Image ارسال میکند.

کدهای متد GetImageFromDataBase و RetrieveImage

 using ImageInDB.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ImageInDB.Controllers
{
    public class SaveToDBController : Controller
    {
        // GET: SaveToDB
        private ImageInDBContext db = new ImageInDBContext();
        public ActionResult Index(HttpPostedFileBase Image)
        {
            if (Image != null)
            {
                byte[] uploadFile = new byte[Image.InputStream.Length];
                Image.InputStream.Read(uploadFile, 0, uploadFile.Length);

                ImageDB ImageDB = new ImageDB()
                {
                    Image = uploadFile,
                };
                db.ImageDB.Add(ImageDB);
                db.SaveChanges();
            }
            return View();
        }


        public ActionResult RetrieveImage(int id)
        {
            try
            {
                byte[] cover = GetImageFromDataBase(id);
                if (cover != null)
                {
                    return File(cover, "image/jpg");
                }
                else
                {
                    return null;
                }
            }
            catch
            {
                return View("Error");
            }
        }

        public byte[] GetImageFromDataBase(int Id)// ای دی عکس را میگیرد
        {
            byte[] cover = (from temp in db.ImageDB where temp.id == Id select temp.Image).First();
            return cover;
        }
    }
}

گام ششم : ایجاد یک Controller برای دریافت عکس ها از دیتابیس

حال درون کنترلر SaveToDB یک action method برای گرفتن عکس ها از دیتابیس و ارسال آن ها به View ایجاد نمایید ما نام متد خود را ShowImages می‌گذاریم سپس کدهای زیر درون این متد کپی کنید.

  public ActionResult ShowImages()
        {
            var GetImages = (from d in db.ImageDB select d).ToList();
            return View(GetImages);
        }

گام هفتم : ایجاد یک view برای نمایش عکس ها دریافت شده از دیتابیس

حال برای اکشن متد ShowImages یک ویو ساخته و کدهای زیر درون آن کپی نمایید . در قسمت تگ image متد RetrieveImag فراخوانی شده و id عکس به عنوان پارامتر ورودی به آن ارسال شده است.

@model IEnumerable<ImageInDB.Models.ImageDB>
@{
    ViewBag.Title = "ShowImages";
}


@foreach (var item in Model)
{
    <img src="@Url.Action("RetrieveImage", "SaveToDB", new { id = item.id})"/>
}

گام هشتم : اجرای و نمایش عکس های ذخیره شده در دیتابیس

حال ویو را اجرا کرده و تصاویر ذخیره شده در دیتابیس را مشاهده نمایید. به همین راحتی شما موفق شدید که عکس های ذخیره شده در دیتابیس را خوانده و در View نمایش دهید.

بسیار خب به پایان این مقاله آموزش ذخیره و بازیابی عکس با سی شارپ در ASP.NET MVC رسیدیم امیدوارم که مطالب این جلسه آموزشی برای شما عزیزان مفید واقع بشود اگر سوالی در ارتباط با مقالات ASP.NET MVC داشتید حتما در قسمت نظرات مطرح کنید . شما عزیزان از طریق منوی سمت چپ می‌توانید سایر مقالات آمورشی ASP.NET MVC را مطالعه نمایید .

فیلم آموزشی asp.net core 2

آرزو ابراهیمی
بیش از 6 سال است که زمینه طراحی و توسعه سایت فعالیت می‌کنم، طراح و برنامه نویس انواع سامانه‌های تخصصی پزشکی، مناقصات، فروشگاهی و … بودم و هستم و هدفم در سایت میزفا ارائه اطلاعات بروز و ناب در زمینه طراحی سایت است. تا از این طریق بتونم تجربیات و دانسته های خودم را با تمامی علاقمندان به مباحث طراحی سایت به اشتراک بزارم .

فیلم آموزشی asp.net core 2

27 نظر

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر