使用 ASP.NET MVC 和 AngularJS 实现酒店预订系统

栏目: ASP.NET · 发布时间: 6年前

内容简介:使用 ASP.NET MVC 和 AngularJS 实现酒店预订系统

在这篇文章中,我们将学习如何创建一个简单的基于web的酒店房间预订系统, 使用 MVC, AngularJS, 和 WebAPI。

介绍

使用 ASP.NET MVC 和 AngularJS 实现酒店预订系统

在这篇文章中,我们将学习如何创建一个简单的基于web的酒店房间预订系统, 使用 MVC, AngularJS, 和 WebAPI。

什么是SHANU酒店房间预订?

SHANU 酒店客房预订是一个基于Web的简单的酒店客房预订系统。 用户可以添加酒店房间的详细信息和房间预订日期。 SHANU酒店预订有两个模块1) 仪表板 2) 房间/预订 CRUD (添加房间和预订)。

这个应用程序有两个模块

  1. 房间状态 (仪表板)
  2. 房间/预订 CRUD (添加房间和管理预订)

房间状态:  这是主要的仪表板模块。用户可以在仪表板页面查看所有的空闲/占用和预订房间信息。此模块将帮助用户轻松查看可用的空闲房间。 可用的空闲房间为绿色,占用的房间为红色,预留的房间为黄色。 这种颜色差异将有助于用户看到哪些房间是空闲的,占用了和被预留的。

使用 ASP.NET MVC 和 AngularJS 实现酒店预订系统

在这个仪表板页面中,随着房间号和状态,我们也能看到详细信息,比如付款状态是未付还是已付,预先支付的金额,总金额和预定的时间从哪天到哪天。

房间/预订CRUD (添加房间和管理预订):

使用 ASP.NET MVC 和 AngularJS 实现酒店预订系统

在这个模块,我们将管理房间和房间预订信息。

房间详情页:

使用 ASP.NET MVC 和 AngularJS 实现酒店预订系统

在这里用户可以添加房间细节和房间房号,房间类型和价格的细节。

房间/预订CRUD:

使用 ASP.NET MVC 和 AngularJS 实现酒店预订系统

这是我们的主要部分,用户将以访客的身份预订房间。 在这里,我们选择房间号,预订日期,预订状态为免费,占用和保留,支付类型为支付,未支付和预付, 预付金额及已付总金额。 我们还可以编辑和删除预订细节。

先决条件

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 . 请输入您的项目名称,然后单击“确定”。

使用 ASP.NET MVC 和 AngularJS 实现酒店预订系统

选择MVC,Web API,点击OK。

使用 ASP.NET MVC 和 AngularJS 实现酒店预订系统

添加使用ADO.NET实体数据模型的数据库

右键单击项目,单击 添加, 然后 新项目. 选择 数据,然后 ADO.NET Entity Data Model ,填写名称,然后点击增加

使用 ASP.NET MVC 和 AngularJS 实现酒店预订系统

选择" EF Designer from database" 然后点击下一步.

使用 ASP.NET MVC 和 AngularJS 实现酒店预订系统

单击新建连接来连接我们的SQL Server数据库.

使用 ASP.NET MVC 和 AngularJS 实现酒店预订系统

连接到我们的数据库。单击“下一步”选择菜单管理的表和存储过程.。

使用 ASP.NET MVC 和 AngularJS 实现酒店预订系统

现在选择所有表和存储过程详细信息,然后单击“完成”.。

使用 ASP.NET MVC 和 AngularJS 实现酒店预订系统

添加Web API控制器程序

右键单击 (Controller)控制器 文件夹, 单击“添加”,然后单击“控制器”。

使用 ASP.NET MVC 和 AngularJS 实现酒店预订系统

选择 Web API 2 Controller – Empty, 点击添加并给我们的web API控制器命名。

使用 ASP.NET MVC 和 AngularJS 实现酒店预订系统

处理 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  

使用 ASP.NET MVC 和 AngularJS 实现酒店预订系统

创建 AngularJS 控制器

首先,在 Scripts 目录下创建一个目录,给它取名为 “ MyAngular ”。

使用 ASP.NET MVC 和 AngularJS 实现酒店预订系统

现在在这个目录下添加 Angular 控制器。

右键单击 MyAngular 目录,然后点击添加新项(Add an New Item)。选择 Web 再选择 AngularJS 控制器(AngularJS Controller) ,然后对控制器命名。我把这个 AngularJS 控制器命名为 “ Controller.js ”。

使用 ASP.NET MVC 和 AngularJS 实现酒店预订系统

AngularJS 控制器创建好之后,我们可以看到控制器的默认代码中已经定义好了模块。

如果没有 AngularJS 包,那就在项目里添加这个包。

右键单击 MVC 项目,然后点击管理 NuGet 包(Manage NuGet Packages)。

使用 ASP.NET MVC 和 AngularJS 实现酒店预订系统

搜索到 AngularJS,选中并安装。

使用 ASP.NET MVC 和 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.";
        }
    };

房间状态仪表盘模块:

这是主模块,我们在这里检查所有状态状态是空闲/占用还是保留,并显示房间的细节。

使用 ASP.NET MVC 和 AngularJS 实现酒店预订系统

我们又创建了一个 AngularJS 控制器并命名为 HomeController。我们在这个控制器上获取专辑(Albums)和音乐详情并播放我们的音乐。

在主页上,一行只显示 4 个房间的状态和详情。为了固定为 4 列,我们首先在呈现主页的 index 视图页面添加相应的样式表。

在仪表盘我们根据房间的状态来显示其详情。

我们的房间有 3 种状态

  1. 空闲 (使用绿色表示空闲的房间)
  2. 占用 (使用红色表示被占用的房间)
  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 实现酒店预订系统》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

通灵芯片

通灵芯片

Daniel Hillis / 崔良沂 / 上海世纪出版集团 / 2009-1 / 19.80元

本书深入浅出地阐述了计算机科学中许多基本而重要的概念,包括布尔逻辑、有限自动机、编程语言、图灵机的普遍性、信息论、算法、并行计算、量子计算、神经网络、机器学习乃至自组织系统。 作者高屋建瓴式的概括,既不失深度,又妙趣横生,相信读者读后会有很多启发。 目录: 序言:石的奇迹 第一章 通用件 第二章 万能积木 第三章 程序设计 第四章 图灵机的普适性 第......一起来看看 《通灵芯片》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

随机密码生成器
随机密码生成器

多种字符组合密码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换