使用 AngularJS 的 ASP.NET MVC 酒店预订系统
4.83/5 (25投票s)
使用 MVC、AngularJS 和 WebAPI 创建一个简单的基于 Web 的酒店客房预订系统的教程
引言
在本文中，我们将学习如何使用 MVC、AngularJs 和 WEB API 创建一个简单的基于 Web 的酒店客房预订系统。
什么是 SHANU 酒店客房预订？
SHANU 酒店客房预订是一个基于 Web 的简单酒店客房预订系统。用户可以添加他们的酒店客房详情，并为预订日期预留房间。SHANU 酒店预订有两个模块
- 仪表板
- 房间/预订 CRUD（添加房间和预订）
此应用程序有两个模块
- 房间状态（仪表板）
- 房间/预订 CRUD（添加房间和管理预订）
房间状态
这是主仪表板模块。用户可以在仪表板页面上查看所有空闲/已占用和已预留的房间信息。此模块将帮助用户轻松查看可用的空闲房间。可用的空闲房间将显示为绿色，已占用房间将显示为红色，已预留房间将显示为黄色。这种颜色差异对用户查看哪些房间是空闲、已占用和已预留非常有用。
在此仪表板页面上，除了房间号和状态外，我们还可以看到付款状态（已付款或未付款）、已付预付款、已付总金额以及预订开始和结束日期等详细信息。
房间/预订 CRUD（添加房间和管理预订）
在此模块中，我们将管理房间和房间预订信息。
房间详情
在这里，用户可以添加带有房间号、房间类型和房间价格详情的房间详情。
房间/预订 CRUD
这是我们的主要部分，用户将在此为访客预订房间。在这里，我们选择房间号、预订开始和结束日期、预订状态（空闲、已占用和已预留）、付款类型（已付款、未付款和预付款）、已付预付款和已付总金额。我们还可以编辑和删除预订详情。
必备组件
Using the Code
创建数据库和表
以下是创建数据库、表和示例插入查询的脚本。请在您的 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 - 单击Visual Studio 2015。单击新建，然后单击项目，选择Web，然后选择ASP.NET Web 应用程序。输入您的项目名称，然后单击确定。
选择MVC、WEB API，然后单击确定。
使用 ADO.NET 实体数据模型添加数据库
右键单击我们的项目，然后单击添加，然后单击新项。选择数据，然后选择ADO.NET Entity Data Model，为我们的 EF 命名，然后单击
选择“从数据库创建 EF 设计器”，然后单击下一步。
单击新建连接以连接我们的 SQL Server 数据库。
连接到我们的数据库。单击下一步以选择我们的表和存储过程以进行菜单管理。
现在选择我们所有的表和存储过程详细信息，然后单击完成。
添加 Web API Controller 的过程
右键单击Controllers 文件夹，单击添加，然后单击Controller。
选择Web API 2 Controller – Empty，单击添加，然后为我们的 WEB API 控制器命名。
使用 WEBAPI 控制器进行 CRUD 操作
选择Controller并添加一个空的 Web API 2 Controller。为 Web API Controller 提供名称，然后单击OK。在本例中，我们将 Web API Controller 命名为“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操作。
查询操作
我们使用get方法通过实体对象获取AlbumMaster 和 MusicDetail 表的所有详细信息，并将结果作为IEnumerable返回。我们在 AngularJS 中使用此方法，并在 MVC 页面上从 AngularJS 控制器显示结果。使用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过程。此insert方法将返回数据库插入记录的结果。我们将获取结果并在 AngularJS Controller 中将其显示到 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的代码。
// to Search all Room Booking Details
[HttpGet]
public IEnumerable<USP_RoomBooking_SelectALL_Result>
getRoomBookingDetails(string RoomID)
{
if (RoomID == null)
RoomID = "";
return objapi.USP_RoomBooking_SelectALL(RoomID).AsEnumerable();
}
// to Search all Room Dashbard Details
[HttpGet]
public IEnumerable<USP_HotelStatus_Select_Result>
getRoomDashboardDetails(string RoomNo)
{
if (RoomNo == null)
RoomNo = "";
return objapi.USP_HotelStatus_Select(RoomNo).AsEnumerable();
}
// To Insert /Update Room Booking
[HttpGet]
public IEnumerable<string> insertRoomBooking
(string BookingID, string RoomID, string BookedDateFR,
string BookedDateTO, string BookingStatus, string PaymentStatus,
string AdvancePayed, string TotalAmountPayed)
{
if (BookingID == null)
BookingID = "0";
if (RoomID == null)
RoomID = "0";
if (BookedDateFR == null)
{
BookedDateFR = "";
}
else
{
BookedDateFR = BookedDateFR.Substring(0, 10);
}
if (BookedDateTO == null)
{
BookedDateTO = "";
}
else
{
BookedDateTO = BookedDateTO.Substring(0, 10);
}
if (BookingStatus == null)
BookingStatus = "";
if (PaymentStatus == null)
PaymentStatus = "";
if (AdvancePayed == null)
AdvancePayed = "";
if (TotalAmountPayed == null)
TotalAmountPayed = "";
return objapi.USP_RoomBooking_Insert(BookingID, RoomID,
BookedDateFR, BookedDateTO, BookingStatus, PaymentStatus,
AdvancePayed, TotalAmountPayed).AsEnumerable();
}
// To Delete Music Details
[HttpGet]
public IEnumerable<string> deleteROom(string BookingID)
{
if (BookingID == null)
BookingID = "0";
return objapi.USP_RoomBooking_Delete(BookingID).AsEnumerable();
}
接下来，我们将创建我们的 AngularJs Controller 和视图页面，以执行我们的 CRUD 操作来管理酒店客房和房间预订。
房间/房间预订 CRUD
创建 AngularJS 控制器
首先，在Scripts 文件夹内创建一个文件夹，我们将文件夹命名为“MyAngular”。
现在将您的 Angular Controller 添加到该文件夹中。
右键单击MyAngular文件夹，单击添加和新项。选择Web，然后选择AngularJS Controller，并为 Controller 提供一个名称。我将我的 AngularJS Controller 命名为“Controller.js”。
创建 AngularJS Controller 后，我们可以看到默认情况下，Controller 将包含带有默认模块定义等代码。
如果 AngularJS 包缺失，请将该包添加到您的项目中。
右键单击您的 MVC 项目，然后单击管理 NuGet 程序包。
搜索AngularJS，然后单击安装。
创建 AngularJS 脚本文件的过程
Modules.js：在这里，我们将添加 AngularJS JavaScript 的引用，并创建一个名为“AngularJs_Module”的 Angular 模块。
// <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']);
})();
Controllers：在 AngularJS Controller 中，我完成了所有业务逻辑，并将数据从 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 Booking 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 Controller 名称和方法来获取详细信息。
最终结果将使用 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 occurred 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 occurred 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 occurred 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 occurred while loading posts!";
});
}
else {
$scope.Message = "All the fields are required.";
}
};
房间状态仪表板模块
这是我们的主模块，用户可以在其中查看所有房间状态（空闲/已占用或已预留）及其所有详细信息。
在这里，我们创建了另一个 AngularJs Controller，并将其命名为HomeController。在此 Controller 中，我们将获取专辑和音乐的详细信息以播放我们的歌曲。
在主页中，我们每行只显示 4 个房间状态详细信息。为了在主页索引视图页面中固定前四个列，我们添加了此 CSS 样式。
在仪表板中，我们根据房间状态显示Room详情。
我们为房间使用了三种状态：
Free（我们为空闲房间使用绿色）Occupied（我们为已占用房间使用红色）Reserved（我们为已预留房间使用黄色）
在我们的仪表板视图页面中，我们添加此Style以根据Status更改颜色。
在 HTML 部分，我们在div标签中使用此样式以每行显示四个列，其Background颜色根据房间状态而定。
<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: Status == t;>
<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>
关注点
希望大家喜欢这个 Shanu 酒店客房预订的基于 Web 的系统。
这是一个使用 MVC 和 AngularJs 开发的简单的基于 Web 的酒店客房预订系统。可以根据您的需求扩展此应用程序以添加更多功能。请注意，在运行此程序之前，请根据您的 SQL Server 设置在 webconfig 中进行更改，并且不要忘记运行 zip 文件中附带的所有 SQL 查询。
历史
- 2016 年 10 月 21 日：初始版本