使用 MVC、AngularJs 和 Web API 2 进行图像预览
4.22/5 (8投票s)
使用 MVC、AngularJS 和 Web API 2 创建一个简单的图像幻灯片
引言
在我之前的文章中，我解释了 AngualrJS 与 MVC 和 WCS REST 服务。本文将详细介绍如何使用 MVC 和 AngularJs 以及 Web API 2 创建一个简单的图像幻灯片。
您也可以查看我之前关于使用 MVC 和 WCF REST 服务进行 AngularJs 的文章
- MVC AngularJs 和 WCF REST 服务用于“读心术”问答游戏
- MVC、AngularJs 和 WCF REST 服务用于主从详细信息网格
- 使用 MVC 和 WCF REST 进行 AngularJs 过滤、排序和动画
- 使用 MVC 和 WCF REST 服务进行 AngularJs 购物车
- 使用 MVC 和 WCF REST 进行 AngularJs 动态菜单创建
必备组件
Visual Studio 2015。您可以从 这里 下载。 (在我的示例中，我使用了 Visual Studio Community 2015 RC。)
本文将详细介绍以下内容
- 使用 EF 和 WEB API 从数据库中选择图像详细信息。
- 使用 AngularJs 和 MVC Controller 方法将图像上传到我们的根文件夹。
- 使用 AngularJs、MVC 和 WEB API 将上传的图像详细信息插入数据库。
- 通过点击 预览图像 来显示动画图像。
本文的基本构思来源于我关于 基于 Windows 窗体的图像幻灯片应用程序 的文章。
Using the Code
1. 创建数据库和表
我们将在 ImageDB 数据库下创建一个 ImageDetails 表。以下是创建数据库、表和示例 insert 查询的脚本。在您的 SQL Server 中运行此脚本。我使用的是 SQL Server 2012。
注意：在我的项目文件夹中，我为示例显示准备了所有图像。
-- =============================================
-- Author : Shanu
-- Create date : 2015-05-15
-- Description : To Create Database,Table and Sample Insert Query
-- Latest
-- Modifier : Shanu
-- Modify date : 2015-05-15
-- =============================================
--Script to create DB,Table and sample Insert data
USE MASTER
GO
-- 1) Check for the Database Exists .If the database is exist then drop and create new DB
IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'ImageDB' )
DROP DATABASE DynamicProject
GO
CREATE DATABASE ImageDB
GO
USE ImageDB
GO
-- 1) //////////// ItemMasters
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'ImageDetails' )
DROP TABLE ImageDetails
GO
CREATE TABLE [dbo].[ImageDetails](
[ImageID] INT IDENTITY PRIMARY KEY,
[Image_Path] [varchar](100) NOT NULL,
[Description] [varchar](200) NOT NULL)
INSERT INTO [ImageDetails] ([Image_Path],[Description]) VALUES ('1.jpg','Afreen')
INSERT INTO [ImageDetails] ([Image_Path],[Description]) VALUES ('2.jpg','Purple Tulip')
INSERT INTO [ImageDetails] ([Image_Path],[Description]) VALUES ('3.jpg','Afreen')
INSERT INTO [ImageDetails] ([Image_Path],[Description]) VALUES ('4.jpg','Tulip')
INSERT INTO [ImageDetails] ([Image_Path],[Description]) VALUES ('5.jpg','Tulip')
INSERT INTO [ImageDetails] ([Image_Path],[Description]) VALUES ('6.jpg','Flowers')
INSERT INTO [ImageDetails] ([Image_Path],[Description]) VALUES ('7.jpg','Flowers')
INSERT INTO [ImageDetails] ([Image_Path],[Description]) VALUES ('8.jpg','Flowers')
INSERT INTO [ImageDetails] ([Image_Path],[Description]) VALUES ('9.jpg','Flowers')
INSERT INTO [ImageDetails] ([Image_Path],[Description]) VALUES ('10.jpg','Flowers')
INSERT INTO [ImageDetails] ([Image_Path],[Description]) VALUES ('11.jpg','Afraz&Afreen')
INSERT INTO [ImageDetails] ([Image_Path],[Description]) VALUES ('12.jpg','LoveLock')
INSERT INTO [ImageDetails] ([Image_Path],[Description]) VALUES ('13.jpg','Rose')
INSERT INTO [ImageDetails] ([Image_Path],[Description]) VALUES ('14.jpg','Yellow Rose')
INSERT INTO [ImageDetails] ([Image_Path],[Description]) VALUES ('15.jpg','Red rose')
INSERT INTO [ImageDetails] ([Image_Path],[Description]) VALUES ('16.jpg','Cherry blossom')
INSERT INTO [ImageDetails] ([Image_Path],[Description]) VALUES ('17.jpg','Afreen')
INSERT INTO [ImageDetails] ([Image_Path],[Description]) VALUES ('18.jpg','fish Market')
INSERT INTO [ImageDetails] ([Image_Path],[Description]) VALUES ('19.jpg','Afraz')
select * from [ImageDetails]
2. 在 Visual Studio 2015 中创建我们的第一个 MVC Web 应用程序
现在，我们在 Visual Studio 2015 中创建我们的第一个 MVC Web 应用程序。
安装 Visual Studio 2015 后，单击 开始，然后选择 程序，然后选择 Visual Studio 2015。然后单击 Visual Studio 2015 RC。
单击 新建 -> 项目 -> 选择 Web -> ASP.NET Web 应用程序。选择您的项目位置并输入您的 Web 应用程序名称。
选择 MVC，并在“为以下项添加文件夹和核心引用：”中选择 Web API (如下图所示)，然后单击 确定。
现在我们已经创建了 MVC 应用程序。下一步，我们将把 SQL Server 数据库添加为应用程序的实体数据模型。
使用 ADO.NET 实体数据模型添加数据库
右键单击我们的项目，然后单击 添加 -> 新建项。
选择 数据，然后选择 ADO.NET 实体数据模型，然后为我们的 EF 提供名称并单击 添加。
选择 从数据库的 EF 设计器，然后单击 下一步。
在这里，单击 新建连接 并提供您的 SQL Server 服务器名称并连接到您的数据库。
在这里，我们可以看到我提供了我的 SQL Server 名称、ID 和密码。连接后，数据库被选为 ImageDB，因为我们使用我的 SQL 脚本创建了数据库。
单击 下一步 并选择要使用的表，然后单击 完成。
在这里，我们可以看到我已经选择了我们的表 Imagedetails。此表将用于获取和插入我们所有的图像。
在这里，我们可以看到我们已经创建了 shanuItemDetailsModel1。
创建实体后，下一步是在我们的控制器中添加 WEB API 并编写一个函数来获取和插入记录。
添加 WEB API 控制器的步骤
右键单击 Controllers 文件夹，然后单击 添加，然后单击 Controller。
由于我们将创建 WEB API Controller，请选择 Controller，然后选择 添加空的 WEB API 2 Controller。为 Web API Controller 提供名称并单击 确定。在这里，我的 Web API Controller 名称为“ImageController”。
由于我们创建了 Web API Controller，我们可以看到我们的 Controller 继承了 ApiController。
众所周知，Web API 是构建浏览器和移动设备 HTTP 服务的简单便捷的方式。Web API 具有 Get/Post/Put 和 Delete 四种方法，其中
Get用于请求数据。(Select)Post用于创建数据。(Insert)Put用于更新数据。- `Delete` 用于删除数据。
在我们的示例中，我们将使用 Get 和 Post，因为我们需要从数据库获取所有图像名称和描述，并向数据库插入新的图像名称和图像描述。
Get 方法
接下来，我们需要创建一个实体对象并编写 Get 和 Post 方法。
我们将使用 get 方法通过实体对象获取 ImageDetails 表的所有详细信息，并将结果返回为 IEnumerable。我们将在 AngularJs 中使用此方法，并在 AngularJs Controller 中使用 Ng-Repeat 在 MVC 页面中显示结果。我们可以逐步看到详细信息如下：
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 方法，我们将 Image 详细信息插入数据库。如果在 Action 结果中使用 HttpResponseMessage，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 模块和 Controller。让我们看看如何创建我们的 AngularJS Controller。在 Visual Studio 2015 中，添加 AngularJS Controller 非常容易。让我们一步一步地了解如何创建和编写我们的 AngularJS Controller。
创建 AngularJs Controller
首先，在 Script 文件夹中创建一个文件夹，我给文件夹命名为“MyAngular”。
现在将您的 Angular Controller 添加到该文件夹中。
右键单击 MyAngular 文件夹，然后单击 添加 和 新建项。选择 Web。选择 AngularJs Controller 并为 Controller 提供名称。我给我的 AngularJs Controller 起的名字是“Controller.js”。
创建 AngularJs Controller 后，我们可以看到默认情况下，Controller 将包含带有默认模块定义的代码。
我像下面这样修改了前面的代码，添加了一个模块和一个 Controller。
如果 AngularJs 包丢失，请将该包添加到您的项目中。
右键单击您的 MVC 项目，然后单击管理 NuGet 程序包。搜索 AngularJs，然后单击安装。
现在我们可以看到所有 AngularJs 包都已安装，并且我们可以在 Scripts 文件夹中看到所有文件。
在我之前关于 AngularJs 的文章中，我解释了如何使用 AngularJs 的 ng-repeat 来显示 AngularJs 的数据，以及如何从 WCF 接收数据到 Angular Services，如何在 AngularJs 中进行简单的动画，以及如何使用 AngularJs 和 MVC Controller 上传图像。要了解更多关于每个主题的详细信息，请参阅我之前的文章，您可以在本文顶部找到每个文章的链接。
现在，在我的 Controller 中，我将像下面这样更改代码，加入我的模块和 Controller。
首先，我们将添加所有 AngularJs 的引用，然后创建一个模块。我给我的模块起的名字是“RESTClientModule”。由于我们需要使用简单的动画，我们将“ngAnimate”添加到我们的模块中。
在 Controller 中，为了使用动画，我使用了 $timeout，为了文件上传，我使用了服务 FileUploadService。首先，我们从以下开始：
1. 变量声明
首先，我声明了所有需要使用的局部变量和当前日期，并将日期存储起来，以此类推，我声明了所有需要使用的变量。
$scope.date.
2. 方法
为了从我们的 Web API 获取 Image 详细信息，我们使用 $http.get 方法，如下所示：
$http.get('/api/Image/').success(function (data)
在这里，我们接收所有数据并存储结果于
$scope.Images = data;
我将在 ng-repeat 中使用 Images 来逐一显示图像。
/// <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 occurred while loading posts!";
});
预览图像，点击以使用简单的动画显示实际图像。我将在 AngularJs 的图像点击事件中调用此方法，作为 ng-Click= onShowImage(currentImage)
$scope.onShowImage = function (Image_Path) {
$scope.ShowImage = false;
$scope.AnimationImageName = Image_Path
$timeout(function () {
$scope.ShowImage = true;
}, 400);
}
在这里，我们可以看到，当用户单击具有简单动画的图像时，我将显示动画图像。
为了上传图像并将图像名称和图像描述插入数据库，在保存项目按钮点击时，我将调用此函数。
在此方法中，我将检查是否上传了有效图像，如果所有条件都为 true，则将图像传递给服务 FileUploadService。如果上传成功，则通过调用 Web API post 方法将 ImageName 和 Image Description 的 Image 详细信息插入数据库，并传递用于 insert 的数据。$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 occurred while Adding Image! " + 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 方法名称，在那里我们将图像上传到我们的根文件夹。下面是用于在 MVC Controller 中上传图像的代码。
[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 } };
}
我们可以看到一个将图像上传到我们应用程序的示例。浏览并选择要上传到我们根文件夹的图像。
输入图像的描述，然后单击 保存项目 以上传图像并将项目保存到数据库。图像保存后，我们可以看到成功消息，如下所示：
现在我们可以看到我们的新图像已上传到我们的根文件夹并插入到数据库中。在图像列表中，我们可以看到我们的新图像。
支持的浏览器：Chrome 和 Firefox。
历史
- 2015 年 6 月 2 日：初始版本