Professional Documents
Culture Documents
In Focus
Angular Demo Application With ASP.NET Core
DevOps - What, Why And How
27 18 37.5k
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.
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
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.
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
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.
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
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)
2. ng2-progressbar
It is simple progress bar to display in progress while posting or getting data.
4. dev express
It is simple date time picker
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)
Ask a Question
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
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.
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)
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.
Registration Screen
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
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.
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.
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
You can see all booking details from the User dashboard by clicking on All Booking Details link.
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
You can see all payment details from User dashboard by clicking on All payment Details link.
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
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
From dashboard click on show all cars to see all cars which are added by admin.
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
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
Finally, we have completed the project successfully and I believe that people who are new to Angular have
learned a lot from this project.
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
Type your comment here and press Enter Key (Minimum 18 characters)
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
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)
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
Add a comment...
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
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
Philadelphia
New York
London
Delhi
Join C# Corner
A community of 2.3 million developers worldwide
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