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

آپلود و نمایش تصویر با استفاده از مسیر ذخیره شده در پایگاه داده در WebGrid با استفاده از Entity Framework در ASP.Net MVC
0 0
آپلود و نمایش تصویر با استفاده از مسیر ذخیره شده در پایگاه داده در WebGrid با استفاده از Entity Framework در ASP.Net MVC

در این مقاله توضیح میدهیم كه چگونه یك تصویری را با استفاده از مسیر ذخیره شده در پایگاه داده در WebGrid با استفاده از Entity Framework در ASP.Net MVC Razor بارگذاری و نمایش دهد.فایل های تصویری آپلود می شوند و در یك پوشه (دایركتوری) روی دیسك ذخیره می شوند. مسیر فایل های آپلود شدهبا استفاده از  Entity در یك جدول پایگاه داده قرار گیرد.در نهایت با استفاده از مسیر، فایل های تصویری بازیابی و در WebGrid نمایش داده شده و با قابلیت بزرگنمایی jQuery قابل مشاهد هستند.

ابتدا یك پایگاه داده  ایجاد كنید سپس یك جدول با نام File  ایجاد كنید كه دارای سه فیلد با خصوصیات زیر میباشد

  1. فیلد FileId از نوع int  و خصوصیت IDENTITY
  2. فیلد Name از نوع varchar كه نام عكس را در خود نگه داری میكند.
  3. و فیلد Path  از نوع  varcharكه مسیر عكس را در خود نگه داری میكند.

 

سپس در محیط ویژوال استدیو از طیق Entity Framework به پایگاه داده وصل شوید

Controller

Controller متشكل از دو روش عمل است.

عملیات GET

در داخل این روش عمل، تمام فایل های تصویر از پایگاه داده با استفاده از Entity Framework استخراج می شوند و به View باز می گردند.

عملیات POST برای آپلود فایل های تصویری

در این روش زمانی كه روی Button آپلود كلیك می شود فراخوانی می شود، و فایل را بعنوان پارامتر به HttpPostedFileBase ارسال میكند.

تصویر آپلود شده برای اولین بار در پوشه ذخیره می شود و سپس نام و مسیر فایل تصویر در جدول با استفاده از Entity Framework ذخیره می شود .

public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            FilesEntities entities = new FilesEntities();
            return View(entities.Files.ToList());
        }
 
        [HttpPost]
        public ActionResult Index(HttpPostedFileBase postedFile)
        {
            //گرفتن نام عكس از آدرس.
            string fileName = System.IO.Path.GetFileName(postedFile.FileName);
 
            //تنظیم مسیر فایل تصویر.
            string filePath = "~/Uploads/" + fileName;
 
            //ذخیره كردن عكس در پوشه.
            postedFile.SaveAs(Server.MapPath(filePath));
 
            //ذخیره كردن مشخصات فایل تصویر در پایگاه داده.
            FilesEntities entities = new FilesEntities();
            entities.Files.Add(new File
            {
                Name = fileName,
                Path = filePath
            });
            entities.SaveChanges();
 
            //بازگشت به اكشن index.
            return RedirectToAction("Index");
        }
    }

View

درون قسمت View، در خط اول، كلاس  Entity Model به عنوان IEnumerable اعلام می شود كه مشخص می كند كه آن به عنوان مجموعه ای در دسترس است.

فرم آپلود تصویر

این فرم شامل آپلود فایل HTML و دكمه ارسال است. هنگامی كه روی دكمه كلیك می شود، روش Action Index برای مدیریت عملیات     POST  است

نمایش فایل های تصویر

برای نمایش تصاویردر WebGrid از تابع GetHtml كه تصاویر را با استفاده ازModel  نمایش میدهد.

زوم كردن فایل های تصویر

یك متد OnClick روی جی كوئری به تمام عناصر HTML در WebGrid اختصاص داده شده است . هنگامی كه روی یك عنصر HTML صفحه كلیك می شود، عنصر Image در اندازه بزرگ در یك پنجره جی كوئری نمایش داده می شود.

@model  IEnumerable<WebGrid_Image_Path_Database_EF_MVC.File>
 
@{
    Layout = null;
    WebGrid webGrid = new WebGrid(source: Model, canSort: false, canPage: false);
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body {
            font-familyArial;
            font-size10pt;
        }
 
        .Grid {
            border1px solid #ccc;
            border-collapsecollapse;
        }
 
            .Grid th {
                background-color#F7F7F7;
                font-weightbold;
            }
 
            .Grid th.Grid td {
                padding5px;
                border1px solid #ccc;
            }
 
            .Grid.Grid table td {
                border0px solid #ccc;
            }
 
                .Grid img {
                    height150px;
                    width150px;
                    cursorpointer;
                }
 
        #dialog img {
            height550px;
            width575px;
            cursorpointer;
        }
    </style>
</head>
<body>
    @using (Html.BeginForm("Index""Home"FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <input type="file" name="postedFile" value="انتخاب عكس" />
        <input type="submit" id="btnUpload" value="آپلود و ذخیره" />
    }
    <hr />
    @webGrid.GetHtml(
        htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
        columns: webGrid.Columns(
                 webGrid.Column("FileId""كد عكس"),
                 webGrid.Column("Name""نام عكس"),
                 webGrid.Column("Path""عكس",
                 format: @<text><img alt="@item.Name"
                                     src="@Url.Content(item.Path)" /></text>)))
    <div id="dialog" style="displaynone"></div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/start/jquery-ui.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#dialog").dialog({
                autoOpen: false,
                modal: true,
                height: 600,
                width: 600,
                title: "بزرگنمایی تصویر"
            });
            $(".Grid img").click(function () {
                $('#dialog').html('');
                $('#dialog').append($(this).clone());
                $('#dialog').dialog('open');
            });
        });
    </script>
 
</body>
</html>


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

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