در این مقاله آموزش می دهیم که چگونه یک Slideshow برای تصویر با استفاده از MVC، AngularJS و Web API ایجاد کنیم.

در این مقاله موارد زیر توضیح داده شده اند:

- انتخاب تصویر از پایگاه داده با استفاده از EF و Web API

- آپلود تصویر به پوشه ریشه با استفاده از AngularJs و کنترلر MVC

- وارد کردن تصاویر آپلود شده به پایگاه داده با استفاده از Angular JS، MVC و WEB API

- نمایش تصاویر متحرک با کلیک بر روی تصویر پیش نمایش

بخش کد:

ایجاد پایگاه داده و جدول

ما در اینجا یک جدول ImageDetails در پایگاه داده ImageDB ایجاد می کنیم. کد اسکریپت ایجاد پایگاه داده و جدول در فایل ضمیمه موجود است. این اسکریپت را در نرم افزار SQL SERVER اجرا کنید.

توجه: در این پروژه تمام تصاویر برای نمایش موجود است.

ایجاد یک اپلیکیشن MVC

حالا باید یک اپلیکیشن MVC در Visual Studio ایجاد کنیم. برای این کار از منوی File مسیر زیر را انتخاب می کنیم:

Click New -> Project - > Select Web -> ASP.NET Web Application

محل ذخیره سازی پروژه را انتخاب کرده و نام مناسبی برای آن قرار دهید.

از Template های موجود MVC را انتخاب کرده و OK را انتخاب کنید.

در مرحله بعد باید پایگاه داده SQL SERVER را با Entity Data Model به اپلیکیشن خود اضافه کنیم.

اضافه کردن پایگاه داده با استفاده از ADO.NET Entity Data Model

بر روی نام پروژه راست کلیک کرده و سپس ADD و در آخر New Item را بزنید.

از قسمت سمت چپ Data را انتخاب کرده و بعد ADO.NET Entity Data Model را انتخاب کنید سپس نام مناسبی برای EF قرار داده و Add را بزنید.

EF Designer from database را انتخاب و بعد Next را بزنید.

در اینجا بر روی New Connection کلیک و نام SQL-Server Server خود را انتخاب و به پایگاه داده متصل شوید.

بعد از اتصال به پایگاه داده، ImageDB که از قبل ایجاد کرده بودید را انتخاب کنید.

بر روی Next کلیک کرده و جدول را انتخاب و Finish را بزنید.

در اینجا می توانید جدول انتخاب شده Imagedetails را ببینید. این جدول برای وارد کردن تصاویر استفاده می شود.

در اینجا می توانیم shanuItemDetailsModel1 خود را بسازیم.

زمانی که entity ایجاد شود مرحله بعد اضافه کردن WEB API به کنترلر و نوشتن یک تابع برای وارد کردن رکوردها می باشد.

روش اضافه کردن WEB API Controller

بر روی پوشه Controllers راست کلیک کرده و بر روی Add و سپس Controller کلیک کنید.

از آنجایی که ما می خواهیم  کنترلر از نوع Web API ایجاد کنیم بعد از انتخاب Controller گزینه Empty WEB API 2 Controller را بزنید. نام خود را برای Web API controller انتخاب کرده و OK را بزنید. در اینجا ما نام ImageController را انتخاب کرده ایم.

از آنجا که یک Web API controller ایجاد کرده ایم می توانیم ببینیم که کنترلر ما از ApiController ارث بری می کند.

همانطور که می دانید Web API یک روش ساده و راحت برای ایجاد سرویس های HTTP برای مرورگر ها و موبایل ها می باشد. Web APIs چهار متد Get، Post، Put و Delete را دارد.

در این مثال ما از  هر دو متد Get و Post استفاده خواهیم کرد از آنجایی که باید نام تمام تصاویر و توضیحات را بگیریم و نام و توضیحات تصاویر جدید را به پایگاه داده وارد کنیم.

متد Get

در این مرحله باید یک آبجکت برای entity ایجاد و متدهای Get و Post خود را بنویسیم.

از یک متد Get برای دریافت تمام جزئیات جدول ImageDetails استفاده خواهیم کرد که از آبجکت entity استفاده می کند و ما نتایج را به صورت IEnumerable برمی گردانیم. ما این متد را در AngularJs خود استفاده خواهیم کرد و نتیجه را در یک صفحه MVC از کنترلر AngularJs با استفاده از Ng-Repeat نشان خواهیم داد. جزئیات در کد زیر آمده است:

public class ImageController : ApiController  
{  
    ImageDBEntities objAPI = new ImageDBEntities();  
  
  
/get all Images  
    [HttpGet]  
    public IEnumerable<ImageDetails> Get()  
    {  
        return objAPI.ImageDetails.AsEnumerable();  
        //return objAPI.ImageDetails.AsEnumerable().OrderByDescending(item => item.ImageID );  
  
    }  
  
  
} 

متد Post

با استفاده از متد Post ما تصاویر را وارد پایگاه داده می کنیم . اگر HttpResponseMessage در Action result استفاده شود، Web API مقدار برگشتی را به پیغام پاسخ HTTP تبدیل می کند.

public class ImageController : ApiController  
{  
    ImageDBEntities objAPI = new ImageDBEntities();  
  
    //get all Images  
    [HttpGet]  
    public IEnumerable<ImageDetails> Get()  
    {  
       return objAPI.ImageDetails.AsEnumerable();  
        //return objAPI.ImageDetails.AsEnumerable().OrderByDescending(item => item.ImageID );  
  
    }  
  
    //insert Image  
    public HttpResponseMessage Post(ImageDetails imagedetails)  
    {  
        if (ModelState.IsValid)  
        {  
            objAPI.ImageDetails.Add(imagedetails);  
            objAPI.SaveChanges();  
            HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, imagedetails);  
            response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = imagedetails.Image_Path}));  
            return response;  
        }  
        else  
        {  
            return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);  
        }  
    }  
} 

حالا ما کلاس Web API Controller خود را ایجاد کرده ایم. مرحله بعدی ایجاد ماژول و کنترلر AngularJs است.

ایجاد کنترلر AngularJs

در ابتدا یک پوشه داخل فولدر Script ایجاد کرده و نام آن را MyAngular قرار می دهیم.

حالا کنترلر Angular خود را داخل این پوشه اضافه می کنیم.

بر روی پوشه MyAngular راست کلیک کرده و سپس Add and New Item را می زنیم. Web را انتخاب و سپس AngularJs Controller را میزنیم و بعد یک نام برای Controller قرار می دهیم.

زمانی که AngularJs Controller ایجاد شد می توانیم ببینیم که به طور پیش فرض کنترلر کدهایی برای تعریف ماژول را دارد.

ما کد قبلی را تغییر داده  و مانند زیر یک ماژول و یک کنترلر اضافه می کنیم.

اگر AngularJs package را در پروژه ندارید ابتدا آن را به پروژه خود اضافه کنید.

بر روی پروژه MVC خود راست کلیک کرده و Manage NuGet Packages را بزنید و AngularJs را جستجو کرده و آن را نصب کنید.

حالا می توانیم تمام AngularJs packages را ببینیم که نصب شده است و تمام فایل ها را در فولدر اسکریپت ها مشاهده می کنیم.

حالا در کنترلر خود code را با ماژول و کنترلر خود به صورت زیر جایگزین می کنیم. در ابتدا تمام رفرنس ها را به AngularJs اضافه کرده و یک ماژول ایجاد می کنیم. ما نام RESTClientModule را برای ماژول خود قرار داده ایم. از آنجاییکه می خواهیم از یک انیمیشن ساده استفاده کنیم پس ngAnimate را به ماژول خود اضافه می کنیم.

در کنترلر برای استفاده از انیمیشن از $timeout استفاده کرده و برای فایل آپلود از سرویس FileUploadService استفاده می کنیم. در ابتدا به صورت زیر شروع می کنیم:

تعریف متغیرها

در ابتدا تمام متغیرهای محلی که نیاز داریم را تعریف کرده و داده جاری و ذخیره سازی داده را به طور مشابه تعریف می کنیم .

$scope.date.

متدها

برای دریافت جزئیات عکس از Web API خودمان، از متد $http.get به صورت زیر استفاده می کنیم:

$http.get('/api/Image/').success(function (data) 

در اینجا ما تمام داده ها را دریافت و نتیجه را به صورت زیر ذخیره می کنیم:

$scope.Images = data;   

ما این تصاویر را در ng-repeat برای نمایش تصاویر به صورت یک به یک استفاده خواهیم کرد.

/// <reference path="../angular.js" />    
/// <reference path="../angular.min.js" />     
/// <reference path="../angular-animate.js" />     
/// <reference path="../angular-animate.min.js" />     
  
  
var app;  
  
  
(function () {  
    app = angular.module("RESTClientModule", ['ngAnimate']);  
})();  
  
  
app.controller("AngularJs_ImageController", function ($scope, $timeout, $rootScope, $window, $http, FileUploadService) {  
    $scope.date = new Date();  
    $scope.MyName = "Shanu";  
    $scope.Imagename = "";  
    $scope.ShowImage = false;  
    $scope.Description = "";  
    $scope.AnimationImageName = "1.jpg";  
    $scope.ImagesALLVal=[];  
    $scope.icountval = 0  
  
  
    //get all image Details  
    $http.get('/api/Image/').success(function (data) {  
        $scope.Images = data;      
        if ($scope.Images.length > 0) {  
            $scope.onShowImage($scope.Images[0].Image_Path);  
        }  
    })  
    .error(function () {  
        $scope.error = "An Error has occured while loading posts!";  
  
    });

برای پیش نمایش تصویر کلیک کنید تا تصویر واقعی با یک انیمیشن ساده نشان داده شود.ما این متد را در رویداد کلیک تصویر از AngularJs as ng-Click= onShowImage(currentImage)  فراخوانی خواهیم کرد.

$scope.onShowImage = function (Image_Path) {  
     $scope.ShowImage = false;  
     $scope.AnimationImageName = Image_Path  
     
     $timeout(function () {  
         $scope.ShowImage = true;  
     }, 400);  
      
 }.

در اینجا می توانیم ببینیم زمانی که کاربر روی تصویر کلیک می کند، تصویر متحرک نمایش داده می شود.

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

در این متد ما کنترل می کنیم که یک تصویر معتبر آپلود شده است و اگر همه چیز درست باشد آنگاه تصویر به سرویس FileUploadService ارسال می شود. اگر آپلود موفقیت آمیز باشد آنگاه نام و توضیحات عکس با فراخوانی متد post در Web API در پایگاه داده وارد شده و داده برای درج ارسال می شود. $http.post('/api/Image/', ItmDetails).

//Save File  
$scope.SaveFile = function () {  
    $scope.IsFormSubmitted = true;  
  
    $scope.Message = "";  
  
    $scope.ChechFileValid($scope.SelectedFileForUpload);  
  
    if ($scope.IsFormValid && $scope.IsFileValid) {  
  
        FileUploadService.UploadFile($scope.SelectedFileForUpload).then(function (d) {  
  
            var ItmDetails = {  
                Image_Path: $scope.Imagename,  
                Description: $scope.Description  
            };  
            $http.post('/api/Image/', ItmDetails).success(function (data) {  
                alert("Added Successfully!!");  
                $scope.addMode = false;  
                $scope.Images.push(data);  
                $scope.loading = false;  
            }).error(function (data) {  
                $scope.error = "An Error has occured while Adding Customer! " + data;  
                $scope.loading = false;  
            });  
            alert(d.Message + " Item Saved!");  
            $scope.IsFormSubmitted = false;  
            ClearForm();  
  
        }, function (e) {  
            alert(e);  
        });  
    }  
    else {  
        $scope.Message = "All the fields are required.";  
    }  
  
};

fac.UploadFile = function (file)

در این متد ما از  $http.post استفاده می کنیم. در اینجا ما فایل تصویر خود را به MVC Home Controller فرستاده و متد HTTPost ما به صورت زیر می شود:

.factory('FileUploadService', function ($http, $q) {  
  
    var fac = {};  
    fac.UploadFile = function (file) {  
        var formData = new FormData();  
        formData.append("file", file);  
  
        var defer = $q.defer();  
        $http.post("/Home/UploadFile", formData,  
            {  
                withCredentials: true,  
                headers: { 'Content-Type': undefined },  
                transformRequest: angular.identity  
            })  
        .success(function (d) {  
            defer.resolve(d);  
        })  
        .error(function () {  
            defer.reject("File Upload Failed!");  
        });  
  
        return defer.promise;  
  
    } 

توجه داشته باشید که برای $http.post(“”) نیاز داریم نام MVC Controller و متد HTTPost خود را فراهم کنیم که ما تصاویر را به فولدر ریشه آپلود می کنیم.

[HttpPost]  
public JsonResult UploadFile()  
{  
    string Message, fileName;  
    Message = fileName = string.Empty;  
    bool flag = false;  
    if (Request.Files != null)  
    {  
        var file = Request.Files[0];  
        fileName = file.FileName;  
        try  
        {  
            file.SaveAs(Path.Combine(Server.MapPath("~/Images"), fileName));  
            Message = "File uploaded";  
            flag = true;  
        }  
        catch (Exception)  
        {  
            Message = "File upload failed! Please try again";  
        }  
  
    }  
    return new JsonResult { Data = new { Message = Message, Status = flag } };  
} 

ما می توانیم یک مثال برای آپلود تصویر به اپلیکیشن خود را ببینیم. تصویر را جستجو و انتخاب کنید تا به فولدر ریشه شما آپلود شود.

توضیحات عکس را وارد و بر روی دکمه ذخیره کلیک کنید تا در پایگاه داده ذخیره شود. زمانی که تصویر ذخیره شود می توانید پیغام موفقیت را به صورت زیر مشاهده کنید:

حالا می توانیم ببینیم که تصویر جدید ما در فولدر ریشه ما آپلود شده و در پایگاه داده وارد شده است.

مرورگرهایی که از این برنامه پشتیبانی می کنند کروم و فایر فاکس هستند.