توضیحات و دانلود

بازیابی و نمایش تصویر از پایگاه داده در ASP.Net MVC
0 0
بازیابی و نمایش تصویر از پایگاه داده در ASP.Net MVC

با سلام در این مقاله با یک مثال توضیح خواهیم داد که چگونه می توان تصاویر ذخیره شده در پایگاه داده را در View در ASP.Net MVC 5 Razor نمایش داد.
تصاویر ذخیره شده به عنوان داده های باینری به صورت BYTE Array گرفته و سپس BYTE Array به رشته BASE64 تبدیل می شود و سپس در View در ASP.Net MVC 5 Razor نمایش داده می شود.
بانک اطلاعات
برای این مقاله یک جدول ساده با ساختار زیر ایجاد کرده ایم.

سه رکورد در جدول قرار دارد که سه تصویر در آن ذخیره شده است.

توجه :

فایل پشتیبان بانک اطلاعاتی در نمونه پیوست موجود است.
Model
کلاس Model دارای خصوصیات زیر است. ویژگی اضافی IsSelected برای نمایش مورد انتخاب شده در DropDownList پس از ارسال فرم استفاده می شود.

public class ImageModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string ContentType { get; set; }
    public byte[] Data { get; set; }
    public bool IsSelected { get; set; }
}

فضاهای نام
باید نامهای زیر را وارد کنید.

using System.Data;
using System.Configuration;
using System.Data.SqlClient;

Controller
Controller از دو روش تشکیل شده است.
روش انجام عملیات GET
در داخل این روش ، سوابق جدول داده ها با استفاده از مجموعه کلاس ImageModel جمع و برای پر کردن DropDownList نمایش داده می شود.
روش انجام عملیات POST
در داخل این روش Action ، سوابق موجود در جدول پایگاه داده با استفاده از مجموعه کلاس ImageModel جمع و با استفاده از روش Find و عبارت Lambda ، تصویر مورد نظر تعیین می شود.
داده های باینری تصویر یعنی بایت Array به یک رشته Base64 و به شی Base64String ViewBag تبدیل می شوند.
سرانجام لیست تصاویر به Viewبرگشت داده می شوند.

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        List<ImageModel> images = GetImages();
        return View(images);
    }
 
    [HttpPost]
    public ActionResult Index(int imageId)
    {
        List<ImageModel> images = GetImages();
        ImageModel image = images.Find(p => p.Id == imageId);
        if (image != null)
        {
            image.IsSelected = true;
            ViewBag.Base64String = "data:image/png;base64," + Convert.ToBase64String(image.Data, 0, image.Data.Length);
        }
        return View(images);
    }
 
    private List<ImageModel> GetImages()
    {
        string query = "SELECT * FROM tblFiles";
        List<ImageModel> images = new List<ImageModel>();
        string constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand(query))
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                con.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        images.Add(new ImageModel
                        {
                            Id = Convert.ToInt32(sdr["Id"]),
                            Name = sdr["Name"].ToString(),
                            ContentType = sdr["ContentType"].ToString(),
                            Data = (byte[])sdr["Data"]
                        });
                    }
                }
                con.Close();
            }
 
            return images;
        }
    }
}

View
در داخل View، کلاس ImageModel به عنوان IEnumerable اعلام شده است و مشخص می کند که آن به عنوان یک مجموعه در دسترس خواهد بود.
Viewشامل یک فرم HTML است که با استفاده از روش Html.BeginForm با پارامترهای زیر ایجاد شده است.
ActionName - نام عمل در این حالت Index است.
ControllerName - نام Controller در این حالت Home است.
FormMethod - این روش فرم یعنی GET یا POST را مشخص می کند. در این حالت روی POST تنظیم می شود.
در داخل View، یک حلقه روی Model اجرا می شود تا DropDownList را ایجاد کند. خصوصیات IsSelected برای تنظیم ویژگی انتخاب شده عنصر OPTION استفاده می شود. تصویر در پایگاه داده با استفاده از یک عنصر  تصویر HTML نمایش داده می شود.

@using Display_Image_Database_MVC.Models
@model IEnumerable<Display_Image_Database_MVC.Models.ImageModel>
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <span>Select Image:</span>
        <select name="ImageId" onchange="document.forms[0].submit();">
            <option value="0">Please select</option>
            @foreach (ImageModel image in Model)
            {
                if (image.IsSelected)
                {
                    <option value="@image.Id" selected="selected">@image.Name</option>
                }
                else
                {
                    <option value="@image.Id">@image.Name</option>
                }
            }
        </select>
    }
    @if (ViewBag.Base64String != null)
    {
        <hr/>
        <img alt="" src="@ViewBag.Base64String" style="height:100px;width:100px;"/>
    }
</body>
</html>

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :