7/16/2017 Angular Demo Application With ASP.

NET Core MVC (Rent A Car)

In Focus

Angular Demo Application With ASP.NET Core
DevOps - What, Why And How

MVC (Rent A Car) Ask a Question Contribute

Saineshwar Bageri Jun 26 2017 Article

27 18 37.5k

Download 100% FREE Spire O ce APIs

Link to Source code.

This project is a simple "rent a car" project developed in ASP.NET Core MVC and Angular with SQL Server
2008 R2 as back-end.

This application has 2 modules.

1. User end
2. Admin end

User Process

Renting a car is common nowadays. We have seen most people want rented cars; they do not want to
purchase their own car but still they want a car for tour or visiting their native places. But for renting a car,
you need to go to tours and travels consultants and ask them if there are any 6 seater or 5 seater cars
available. Then, depending on the terms and conditions, we are able to rent this car.

Meanwhile, in this project, we have tried to automate this process by creating an application where the user
needs to register himself on a portal. Then, he can log in with his credentials and book a car. After booking,
the next step is to make a payment. If you have booked a car and you have not made a payment, then you
have not booked a car at all. Along with this, you can also cancel your booking. In this application, you can
easily check your booking history and transaction history.

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 1/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Features

1. Booking
2. All Booking Details Ask a Question
3. All Pending Booking Details
4. All Payment Details
5. Cancel Booking

Admin Process

In this application the admin can addnew cars, he can also view all bookings which have occurred along with
that all payment transactions and also can cancel bookings.

Features

1. Add Car Details and Photo

2. All Pending Booking Details
3. All Payment Details
4. Cancel Booking

Platform Used

This application is developed using Angular, Microsoft Visual Studio Community 2017, and SQL Server 2008
R2 Express Edition.

Note

Its just Angular As you might have already guessed, the term Angular 2 is also kind of deprecated once
we get to version 4, 5 etc. That said, we should start naming it simply Angular without the version su x.

Microsoft Visual Studio Community 2017

Link to download.

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 2/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Ask a Question

Microsoft SQL Server 2008

Link to download.

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 3/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Ask a Question

Node

Link to download.

Original source of image.

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 4/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Angular

Angular 2.3.1
Ask a Question

Original source of image.

Database

1. BankTB
Table contains list of bank names

2. Booking
Table contains all booking details

3. CarTB
Table contains all car details
http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 5/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Ask a Question

4. PaymentTB
Table contains all Payment details

5. TokenManager
Table contains all user token details

6. Usermaster
Table contains all User details e.g. (Username, Password)

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 6/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Ask a Question

7. UserType
Table contains all User type details e.g. (Admin, User)

After completing with database part next we are going to have a look at project structure.

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 7/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

External Packages Used in Project

1. Mydatepicker Ask a Question

It is simple date picker use for selecting date on User Registration form

2. ng2-progressbar
It is simple progress bar to display in progress while posting or getting data.

3. date time picker

It is simple date time picker

4. dev express
It is simple date time picker

It is good to show entire package.json le

01. {
02. "version": "1.0.0",
03. "name": "angular2_aspmvc_core1_getting_started",
04. "private": true,
05. "dependencies": {
06. "@angular/common": "^2.3.1",
07. "@angular/compiler": "^2.3.1",
08. "@angular/core": "^2.3.1",
09. "@angular/forms": "^2.3.1",
10. "@angular/http": "^2.3.1",
11. "@angular/platform-browser": "^2.3.1",
12. "@angular/platform-browser-dynamic": "^2.3.1",
13. "@angular/router": "^3.3.1",
14. "@angular/upgrade": "^2.3.1",
15. "body-parser": "1.14.1",
16. "bootstrap": "3.3.5",
17. "es6-shim": "^0.35.0",
18. "fancybox": "3.0.0",
19. "jquery": "2.1.4",
20. "core-js": "^2.4.1",
21. "reflect-metadata": "^0.1.3",
22. "rxjs": "5.0.0-beta.12",
23. "systemjs": "0.19.27",
24. "zone.js": "^0.6.23",
25. "angular2-in-memory-web-api": "0.0.20",
26. "mydatepicker": "2.0.3",
27. "ng2-progressbar": "1.3.0",
28. "ng2-bootstrap": "1.6.3",
29. "datetime-picker": "0.6.0",
30. "ng2-datetime-picker": "0.15.1",
31. "devextreme": "17.1.3",
32. "devextreme-angular": "17.1.3",
33. "jszip": "^3.1.2"
34. },
35. "devDependencies": {
36. "del": "2.1.0",
37. "gulp": "3.9.0",
38. "gulp-typescript": "^2.13.4",
39. "gulp-watch": "4.3.5",
40. "merge": "1.2.0",
41. "typescript": "^2.0.2",
42. "typings": "^1.3.3",
43. "rimraf": "^2.5.4"
44. },
45. "scripts": {
46. "postinstall": "typings install"
47. }
48. }
http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 8/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

All installed npm dependencies.

Ask a Question

Model Folder contains all Models created in this application.

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 9/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Ask a Question

Controller Folder contains all Web API created in this application.

This folder contains all Web API controllers which are used for various purposes such as registering new
User, Validating Login Credentials, Booking a car and much more.

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 10/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Ask a Question

Database rst

In this project, we are going to use Database-First approach to access database using Entity Framework.

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 11/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Ask a Question

Everyone is new to .NET Core. So, here comes how to set the Connection string in .NET Core.

Setting dependency injection for getting instance of DatabaseContex at Controllers

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 12/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Ask a Question

Security

For securing the application and maintaining session, we have generated Token.

Filters to Validate

1. Admin Filter
Token to validate User is Admin and along with that it checks if token is expired or not.

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 13/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Ask a Question

2. User Filter
Token to validate User only (not admin user) and along with that it checks if token is expired or not.

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 14/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Angular

Angular app folder contains entire Angular application in it. And we are using ASP.NET CORE MVC that is why
we need to keep all les in a wwwroot folder such that theyAsk areaaccessible
Question to the browser.

Node_modules

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 15/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Ask a Question

Module

This is the main le where the entire application component needs to be declared and entire Routing is
de ned here.

AuthGuard

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 16/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

In this application, I have created 2 authgaurd.

1. User (auth.guard.ts)
To check user is logged in or not. Ask a Question
2. Admin (auth.adminguard.ts)
To check Admin is logged in or not.

The above shows how the directory and folder structure looks, now lets check out our screens.

Starting with Registration Screen

Registration Screen

After the user is registered then he is redirected to login page.

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 17/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Login Screen

Ask a Question

After login screen now lets check System User Screen.

User Dashboard

After logging in application the rst screen visible to the user is UserDashboard. It has all links to easy access
for the user.

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 18/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Ask a Question

Booking

Payment

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 19/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Ask a Question

If you do not want to do payment here then you can leave here and come back after some time to do
payment then you need to see all pending booking details page to repay.

All Pending Booking Details

On this page you will see all payment pending bookings records, to make repayment you need click on Make
Payment button.

1. Make payment.

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 20/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Ask a Question

2. Delete Booking.

After making Payment

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 21/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Ask a Question

All Booking Details

You can see all booking details from the User dashboard by clicking on All Booking Details link.

All booking records are displayed according to date.

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 22/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Ask a Question

All Payment Details

You can see all payment details from User dashboard by clicking on All payment Details link.

All payment records are displayed according to date.

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 23/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Ask a Question

Change Password

Admin Section

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 24/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Ask a Question

Admin Dashboard

After logging in to application the rst screen visible to the user is Admin Dashboard. It has all links to easy
access to the user.

Add Car

Adding new cars

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 25/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Ask a Question

Upload photo

Uploading photo of the car which we have added

Show all Cars

From dashboard click on show all cars to see all cars which are added by admin.

All Car Details

Display all cars.

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 26/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Ask a Question

Edit Car Details

For editing car details

Show All Payments

From dashboard click on show all payments to see all payments done by users.

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 27/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Ask a Question

Show All Bookings

Finally, we have completed the project successfully and I believe that people who are new to Angular have
learned a lot from this project.

All Courses on Udemy at $10 USD. Use Code JULY20310

Angular Angular Demo Application ASP.NET Core MVC

Saineshwar Bageri

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 28/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Indian Software Developer and MVP from c-sharpcorner working on .Net Web Technology (
Asp.net , C# , Sqlserver , MVC , Windows ,Console Application, javascript , jquery , json ,
ORM Dapper) and also freelance... Read more
Ask a Question
http://dotnet-sai.blogspot.in

89 8.9m 3

View Previous Comments

27 18

Type your comment here and press Enter Key (Minimum 18 characters)

---------------------------Microsoft Visual Studio --------------------------- The attribute "Version" in element

<DotNetCliToolReference> is unrecognized. F:\Angular-Demo-Application-
master\WebAngularRAC\WebAngularRAC.csproj --------------------------- OK ---------------------------
Mohamed Ibrahim Jul 15, 2017
1447 1 0 0 0 Reply

Sir please explain the di b/w Asp.net and Asp.net Core ?

Nithish Podduturi Jul 11, 2017
1431 17 0 0 0 Reply

Nice article Sir ! it will helpful to me as a beginner !

Nithish Podduturi Jul 11, 2017
1431 17 0 0 0 Reply

Nuget Reference showing waring sign... If i am installing using nuget console command completed
successfully. But showing warning sign please help me solve this problem...
Navneet Kumar Jul 01, 2017
1405 43 6.1k 0 0 Reply

Thank You sir for sharing

Dinesh Kumar Sharma Jun 30, 2017
1421 27 1.2k 1 0 Reply

Nice article with easily understandable screenshots. Keep it up.

Madhanmohan Devarajan Jun 28, 2017
280 4.8k 360.4k 1 0 Reply

Very Good Article...

naveen kumar Jun 28, 2017
1442 6 0 1 0 Reply

Great article ,Nice Explore scenario

Sagar Pardeshi Jun 28, 2017
90 14.2k 2.7m 1 0 Reply

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 29/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Very Good article. Thanks for sharing.

Vignesh Mani Jun 27, 2017
146 10.2k 492k 1 0 Reply
Ask a Question
I am getting is error "An Error has occured please try again after some time !" while logging in.
Cannot login. Can you please tell me the x?
Rohanjoy Bhattacharya Jun 27, 2017
1297 151 12.1k 1 1 Reply

Check your api localhost port and have you looked Readme_First.rar and check database
settings sir
Saineshwar Bageri Jun 27, 2017
89 14.3k 8.9m 0

Comment Using

2 Comments Sort by Oldest

Add a comment...

Mohsin Azam Afridi Kohat University of Science & Technology (KUST)

looks great ,will give you review after implementing as i am new to ang2 ,anyways great effort

Like Reply Jul 6, 2017 12:51pm

Akshay Porwal Software Engineer at ValueLabs

Awesome sir ...helpful article for the beginner ...
Like Reply Jul 6, 2017 7:41pm

Facebook Comments Plugin

File APIs for .NET

Aspose are the market leader of .NET APIs for le business formats natively work with
DOCX, XLSX, PPT, PDF, MSG, MPP, images formats and many more!

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 30/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Ask a Question

TRENDING UP

01 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

02 AngularJS Vs. ReactJS - A Critical Analysis

03 JavaScript For Querying An Entity And Updating Attribute Values In Form

04 Getting Started With Angular 2

05 Building Web Apps With ASP.NET Core And DotVVM

06 Debugging With Chrome In Visual Studio 2017

07 CRUD Operation Using Stored Procedure In ASP.NET GridView Real Time

08 Angular Facebook User Authentication

09 How To Download SQL Records In Excel Format Using MVC

10 The Principles Of Good Programming

View All

Follow @csharpcorner 95K followers

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 31/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

C# Corner
1,283,287 likes

Ask a Question

Liked Learn More

You and 78 other friends like this

Philadelphia
New York
London
Delhi

Join C# Corner
A community of 2.3 million developers worldwide

Enter your email address Sign Up

Learn ASP.NET MVC Learn ASP.NET Core Learn Python Learn JavaScript Learn Xamarin
Learn Oracle More...
Home Events Consultants Jobs Career Advice Stories

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 32/33
7/16/2017 Angular Demo Application With ASP.NET Core MVC (Rent A Car)

About Us Contact Us Privacy Policy Terms Media Kit Sitemap Report a Bug FAQ
Ask a Question
2017 C# Corner. All contents are copyright of their authors.

http://www.c-sharpcorner.com/article/angular-demo-application-with-asp-net-core-mvc-rent-a-car/ 33/33