内容简介：使用 ASP.NET MVC 和 AngularJS 实现酒店预订系统
在这篇文章中，我们将学习如何创建一个简单的基于web的酒店房间预订系统， 使用 MVC, AngularJS， 和 WebAPI。
介绍
在这篇文章中，我们将学习如何创建一个简单的基于web的酒店房间预订系统， 使用 MVC, AngularJS， 和 WebAPI。
什么是SHANU酒店房间预订?
SHANU 酒店客房预订是一个基于Web的简单的酒店客房预订系统。 用户可以添加酒店房间的详细信息和房间预订日期。 SHANU酒店预订有两个模块1) 仪表板 2) 房间/预订 CRUD (添加房间和预订)。
这个应用程序有两个模块
- 房间状态 (仪表板)
- 房间/预订 CRUD (添加房间和管理预订)
房间状态： 这是主要的仪表板模块。用户可以在仪表板页面查看所有的空闲/占用和预订房间信息。此模块将帮助用户轻松查看可用的空闲房间。 可用的空闲房间为绿色，占用的房间为红色，预留的房间为黄色。 这种颜色差异将有助于用户看到哪些房间是空闲的，占用了和被预留的。
在这个仪表板页面中，随着房间号和状态，我们也能看到详细信息，比如付款状态是未付还是已付，预先支付的金额，总金额和预定的时间从哪天到哪天。
房间/预订CRUD (添加房间和管理预订)：
在这个模块，我们将管理房间和房间预订信息。
房间详情页：
在这里用户可以添加房间细节和房间房号,房间类型和价格的细节。
房间/预订CRUD：
这是我们的主要部分，用户将以访客的身份预订房间。 在这里，我们选择房间号，预订日期，预订状态为免费，占用和保留，支付类型为支付，未支付和预付, 预付金额及已付总金额。 我们还可以编辑和删除预订细节。
先决条件
Visual Studio 2015:你可以从 这里 下载它。
代码
创建数据库和表
下面是用来创建数据库、表以及一些样本数据的 SQL 脚本。在你的 SQL Server 数据库中执行此脚本。我这里用的是 SQL Server 2014.
-- =============================================
-- Author : Shanu
-- Create date : 2016-10-20
-- Description : To Create Database
-- =============================================
--Script to create DB,Table and sample Insert data
USE MASTER;
-- 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] = 'HotelDB' )
BEGIN
ALTER DATABASE HotelDB SET SINGLE_USER WITH ROLLBACK IMMEDIATE
DROP DATABASE HotelDB ;
END
CREATE DATABASE HotelDB
GO
USE HotelDB
GO
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'HotelMaster' )
DROP TABLE HotelMaster
GO
CREATE TABLE HotelMaster
(
RoomID int identity(1,1),
RoomNo VARCHAR(100) NOT NULL ,
RoomType VARCHAR(100) NOT NULL ,
Prize VARCHAR(100) NOT NULL
CONSTRAINT [PK_HotelMaster] PRIMARY KEY CLUSTERED
(
RoomID ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
Insert into HotelMaster(RoomNo,RoomType,Prize) Values('101','Single','50$')
Insert into HotelMaster(RoomNo,RoomType,Prize) Values('102','Double','80$')
select * from HotelMaster
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'RoomBooking' )
DROP TABLE RoomBooking
GO
CREATE TABLE RoomBooking
(
BookingID int identity(1,1),
RoomID int ,
BookedDateFR VARCHAR(20) NOT NULL ,
BookedDateTO VARCHAR(20) NOT NULL ,
BookingStatus VARCHAR(100) NOT NULL,
PaymentStatus VARCHAR(100) NOT NULL,
AdvancePayed VARCHAR(100) NOT NULL,
TotalAmountPayed VARCHAR(100) NOT NULL,
CONSTRAINT [PK_RoomBooking] PRIMARY KEY CLUSTERED
(
[BookingID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
select * from RoomBooking
存储过程 :在你的SQL Server上一个一个运行一下存储过程
USE HotelDB
GO
-- =============================================
-- To Select all Hotels
-- EXEC USP_HotelMaster_Select ''
-- =============================================
CREATE PROCEDURE [dbo].[USP_HotelMaster_Select]
(
@RoomNo VARCHAR(100) = ''
)
AS
BEGIN
SELECT RoomID,RoomNo , RoomType,Prize
FROM HotelMaster
WHERE
RoomNo like @RoomNo +'%'
Order By RoomNo
END
-- To insert
-- EXEC [USP_Hotel_Insert] ''
-- =============================================
CREATE PROCEDURE [dbo].[USP_Hotel_Insert]
(
@RoomNo VARCHAR(100) = '',
@RoomType VARCHAR(100) = '',
@Prize VARCHAR(100) = ''
)
AS
BEGIN
IF NOT EXISTS (SELECT * FROM HotelMaster WHERE RoomNo=@RoomNo)
BEGIN
INSERT INTO HotelMaster (RoomNo,RoomType,Prize)
VALUES (@RoomNo,@RoomType,@Prize)
Select 'Inserted' as results
END
ELSE
BEGIN
Select 'Exists' as results
END
END
-- =============================================
-- To Select all RoomBooking
-- EXEC USP_RoomBooking_SelectALL ''
-- =============================================
CREATE PROCEDURE [dbo].[USP_RoomBooking_SelectALL]
(
@RoomID VARCHAR(100) = ''
)
AS
BEGIN
SELECT A.RoomNo,
B.BookingID,
B.RoomID ,
B.BookedDateFR,
B.BookedDateTO,
B.BookingStatus ,
B.PaymentStatus,
B.AdvancePayed,
B.TotalAmountPayed
FROM HotelMaster A
Inner join RoomBooking B
ON A.RoomID=B.RoomID
WHERE
A.RoomID like @RoomID +'%'
END
-- To insert
-- EXEC USP_RoomBooking_Insert ''
-- =============================================
CREATE PROCEDURE [dbo].[USP_RoomBooking_Insert]
(
@BookingID VARCHAR(100) = '',
@RoomID VARCHAR(100) = '',
@BookedDateFR VARCHAR(100) = '',
@BookedDateTO VARCHAR(100) = '',
@BookingStatus VARCHAR(100) = '',
@PaymentStatus VARCHAR(100) = '',
@AdvancePayed VARCHAR(100) = '',
@TotalAmountPayed VARCHAR(100) = ''
)
AS
BEGIN
IF NOT EXISTS (SELECT * FROM RoomBooking WHERE RoomID=@RoomID )
BEGIN
INSERT INTO RoomBooking
(RoomID , BookedDateFR, BookedDateTO, BookingStatus , PaymentStatus, AdvancePayed, TotalAmountPayed )
VALUES
( @RoomID , @BookedDateFR, @BookedDateTO, @BookingStatus , @PaymentStatus, @AdvancePayed, @TotalAmountPayed )
Select 'Inserted' as results
END
ELSE
BEGIN
UPDATE RoomBooking
SET BookedDateFR = @BookedDateFR ,
BookedDateTO = @BookedDateTO,
BookingStatus = @BookingStatus,
PaymentStatus = @PaymentStatus,
AdvancePayed = @AdvancePayed,
TotalAmountPayed = @TotalAmountPayed
WHERE
RoomID = @RoomID
Select 'Updated' as results
END
END
-- =============================================
-- To Select all user roles
-- EXEC USP_RoomBooking_Delete ''
-- =============================================
Create PROCEDURE [dbo].[USP_RoomBooking_Delete]
(
@BookingID VARCHAR(20) = ''
)
AS
BEGIN
Delete from RoomBooking WHERE BookingID = @BookingID
Select 'Deleted' as results
END
-- =============================================
-- To Select all Hotels
-- EXEC USP_HotelStatus_Select ''
-- =============================================
Create PROCEDURE [dbo].[USP_HotelStatus_Select]
(
@RoomNo VARCHAR(100) = ''
)
AS
BEGIN
SELECT A.RoomNo,
ISNULL(B.BookedDateFR, '' ) as BookedDateFR,
ISNULL(B.BookedDateTO, '' ) as BookedDateTO,
ISNULL(B.BookingStatus, 'Free' ) as BookingStatus,
ISNULL(B.PaymentStatus, '' ) as PaymentStatus,
ISNULL(B.AdvancePayed, '0' ) as AdvancePayed,
ISNULL(B.TotalAmountPayed, '0$' ) as TotalAmountPayed
FROM HotelMaster A
Left Outer join RoomBooking B
ON A.RoomNo=B.RoomID
Order By A.RoomNo
END
在Visual Studio 2015中创建您的MVC Web应用程序
在安装我们的Visual Studio 2015后， 单击“开始”,然后程序并选择Visual Studio 2015 - Click Visual Studio 2015 . 单击“新建”，然后选择“Web“项目，然后选择 ASP.NET Web Application . 请输入您的项目名称，然后单击“确定”。
选择MVC，Web API，点击OK。
添加使用ADO.NET实体数据模型的数据库
右键单击项目，单击 添加， 然后 新项目. 选择 数据，然后 ADO.NET Entity Data Model ，填写名称，然后点击增加
选择" EF Designer from database" 然后点击下一步.
单击新建连接来连接我们的SQL Server数据库.
连接到我们的数据库。单击“下一步”选择菜单管理的表和存储过程.。
现在选择所有表和存储过程详细信息，然后单击“完成”.。
添加Web API控制器程序
右键单击 （Controller）控制器 文件夹， 单击“添加”，然后单击“控制器”。
选择 Web API 2 Controller – Empty， 点击添加并给我们的web API控制器命名。
处理 WEBAPI Controller 的 CRUD功能
选择控制器并添加一个空的Web API 2控制器。向Web API控制器提供您的名称，然后单击“确定”.。在这里为我们的Web API控制器名字为“HotelAPIController”。
我们已经创建了Web API控制器，我们可以看到我们的控制器已经继承了ApiController。
我们都知道Web API是一个简单和容易的方法来为浏览器和手机建立HTTP服务。
Web API有以下四种方法 GET/POST/PUT和DELETE：
- Get 用于请求数据。 (Select)
- Post 用于创建数据。 (Insert)
- Put 用于更新数据。
- Delete 用于删除数据。
Get 方法
我们的示例中只使用了Get 方法，因为我们只用了一个存储过程。我们需要为实体创建一个对象，然后写 Get 方法来进行选择(Select)/插入(Insert)/更新(Update) 和删除(Delete) 操作。
选择(Select) 操作
我们用一个 Get 方法来获取 AlbumMasater 和 MusicDetail 表的详细信息，这里用到了实体对象，返回的结果是 IEnumerable。我们在 AngularJS 中使用这个方法并通过 AngularJS 控制器将结果显示在 MVC 页面中。Ng-Repeat 能帮助我们绑定详细信息。
这里我们看到 getHotelRooms 方法中将搜索参数传入 USP_HotelMaster_Select 存储过程。在存储过程中如果没有指定参数，我们使用 "%" 返回所有记录。
// To select Hotel Details
[HttpGet]
public IEnumerable<USP_HotelMaster_Select_Result> getHotelRooms(string RoomNo)
{
if (RoomNo == null)
RoomNo = "";
return objapi.USP_HotelMaster_Select(RoomNo).AsEnumerable();
}
插入操作
和select一样，我们将所有的参数传递给插入的存储过程。 这个insert方法将会返回数据库是否成功插入数据的结果。我们将得到结果，并从AngularJS的控制器显示到MVC应用中。
// To insert Hotel Room Details
[HttpGet]
public IEnumerable<string> insertHotelRoom(string RoomNo, string RoomType, string Prize)
{
if (RoomNo == null)
RoomNo = "";
if (RoomType == null)
RoomType = "";
if (Prize == null)
Prize = "";
return objapi.USP_Hotel_Insert(RoomNo, RoomType, Prize).AsEnumerable();
}
同样是酒店房间，我们将使用这些方法来对房间预订详情做CRUD的操作，在这里就是代码中的Select（查询），Insert（插入），Update（更新）和Delete（删除）。
接下来我们会创建 AngularJS 控制器和视图页面，通过 CRUD 操作来管理酒店房间及其预订。
房间/房间预订 CRUD
创建 AngularJS 控制器
首先，在 Scripts 目录下创建一个目录，给它取名为 “ MyAngular ”。
现在在这个目录下添加 Angular 控制器。
右键单击 MyAngular 目录，然后点击添加新项(Add an New Item)。选择 Web 再选择 AngularJS 控制器(AngularJS Controller) ，然后对控制器命名。我把这个 AngularJS 控制器命名为 “ Controller.js ”。
AngularJS 控制器创建好之后，我们可以看到控制器的默认代码中已经定义好了模块。
如果没有 AngularJS 包，那就在项目里添加这个包。
右键单击 MVC 项目，然后点击管理 NuGet 包(Manage NuGet Packages)。
搜索到 AngularJS，选中并安装。
创建 AngularJS 脚本文件程序
Modules.js:我们创建一个名为 “ AngularJs_Module ” 的 Angular 模块，并将其中添加对 AngularJS JavaScript 的引用。
/// <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("AngularJs_Module", ['ngAnimate']);
})();
控制器:在 AngularJS 的控制器中我们已经完成了所有的商业逻辑并从 Web API 中返回所需的数据给 MVC HTML 页面。
1. 变量声明
首先我们声明了即将要用到的本地变量：
app.controller("AngularJs_Controller", function ($scope, $timeout, $rootScope, $window, $http) {
$scope.date = new Date();
$scope.MyName = "shanu";
// For Hotel Room Details
$scope.RoomID = 0;
$scope.RoomNo = "";
$scope.RoomType = "";
$scope.Prize = "";
// For Hotel Room Bookin Details
$scope.BookingID = 0;
$scope.RoomIDs = "";
$scope.BookedDateFR = $scope.date;
$scope.BookedDateTO = $scope.date;
$scope.BookingStatus = "";
$scope.PaymentStatus = "";
$scope.AdvancePayed = "0$";
$scope.TotalAmountPayed = "0$";
方法
Select方法
在 select 方法中，我们要使用 $http.get 从 Web API 获取详细的房间、预订信息和房间状态，并将其显示在仪表盘上。在 get 方法中我们会提供 API 控制器的史称和方法来获取详情。
最后的结果会使用 data-ng-repeat 显示在 MVC HTML 页面中。
// This method is to get all the Room Details.
selectRoomDetails('');
selectRoomBookingDetails('');
selectAvailableStatus('');
function selectRoomDetails(RoomNo) {
$http.get('/api/HotelAPI/getHotelRooms/', { params: { RoomNo: RoomNo } })
.success(function(data) {
$scope.HotelRoomData = data;
if ($scope.HotelRoomData.length > 0) {
}
})
.error(function() {
$scope.error = "An Error has occured while loading posts!";
});
}
function selectRoomBookingDetails(RoomID) {
$http.get('/api/HotelAPI/getRoomBookingDetails/', { params: { RoomID: RoomID } })
.success(function(data) {
$scope.RoomBookingData = data;
if ($scope.RoomBookingData.length > 0) {
}
})
.error(function() {
$scope.error = "An Error has occured while loading posts!";
});
}
function selectAvailableStatus(RoomNo) {
$http.get('/api/HotelAPI/getRoomDashboardDetails/', { params: { RoomNo: RoomNo } })
.success(function(data) {
$scope.RoomAvailableData = data;
if ($scope.RoomAvailableData.length > 0) {
}
})
.error(function() {
$scope.error = "An Error has occured while loading posts!";
});
}
插入房间详情
在这个方法中我们传入了用户输入的房间详情信息，并插入到数据库中。
//Save Hotel Room
$scope.saveRoom = function () {
$scope.IsFormSubmitted2 = true;
$scope.Message = "";
if ($scope.IsFormValid2 = false) {
$http.get('/api/HotelAPI/insertHotelRoom/', { params: { RoomNo: $scope.RoomNo, RoomType: $scope.RoomType, Prize: $scope.Prize } }).success(function (data) {
$scope.roomInserted = data;
alert($scope.roomInserted);
cleardetails();
selectRoomDetails('');
})
.error(function () {
$scope.error = "An Error has occured while loading posts!";
});
}
else {
$scope.Message = "All the fields are required.";
}
};
房间状态仪表盘模块：
这是主模块，我们在这里检查所有状态状态是空闲/占用还是保留，并显示房间的细节。
我们又创建了一个 AngularJS 控制器并命名为 HomeController。我们在这个控制器上获取专辑(Albums)和音乐详情并播放我们的音乐。
在主页上，一行只显示 4 个房间的状态和详情。为了固定为 4 列，我们首先在呈现主页的 index 视图页面添加相应的样式表。
在仪表盘我们根据房间的状态来显示其详情。
我们的房间有 3 种状态
- 空闲 (使用绿色表示空闲的房间)
- 占用 (使用红色表示被占用的房间)
- 保留 (使用花色表示保留的房间)
在面板视图页面中，我们使用了不同颜色来标识不同的房间状态。
在 HTML 部分，我们在 div 标签中使用如下样式使得一行显示4列，每一个单元格的背景色是根据房间的状态来决定的。
<div class="columns">
<div ng-repeat="details in RoomAvailableData">
<table style='width: 99%;table-layout:fixed;'>
<tr ng-class="{actualColor: details.BookingStatus == 'Free', changeColor1: details.BookingStatus == 'Occupied', changeColor2: details.BookingStatus == 'Reserved'}">
<td align="center" >
<table style='width: 99%;table-layout:fixed;'>
<tr>
<td> </td>
</tr>
<tr>
<td align="center">
<b>Room NO : {{details.RoomNo}}</b>
</td>
</tr>
<tr>
<td align="center">
<b>Status : {{details.BookingStatus}}</b>
</td>
</tr>
<tr>
<td align="center">
<span style="font-size:medium">
Payment Status :<b> {{details.PaymentStatus}}</b>
</span>
</td>
</tr>
<tr>
<td align="center">
<span style="font-size:medium">
Advance Paid :<b> {{details.AdvancePayed}}</b>
</span>
</td>
</tr>
<tr>
<td align="center">
<span style="font-size:medium">
Total Amount Paid : <b>{{details.TotalAmountPayed}}</b>
</span>
</td>
</tr>
<tr>
<td align="center">
<span style="font-size:small">
Booked From : {{details.BookedDateFR}} ~ {{details.BookedDateTO}}
</span>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
尾声
希望你喜欢这个基于 Web 的 Shanu Hotel Room Booking 系统。
这是一个基于 Web 的酒店预订系统，使用 MVC 和 AngularJs 来实现。这个应用可以扩展，根据你的需求添加更多功能。注意在运行这个程序之前，要根据你自己的 SQL Server 设置来修改 web.config，而且不要忘了执行 Zip 附件中的 SQL 语句。
以上所述就是小编给大家介绍的《使用 ASP.NET MVC 和 AngularJS 实现酒店预订系统》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
