IEEE Toronto Centennial Workshop: Building An ASP.NET Core Application

Restaurant Delivery
Thiago Silva
Kevin Trinh

This is a hand on
ASP.NET Core MVC application
built with Entity Framework Core
using the database first approach

What are we building ?
1
Create a SQL db
with defined
schema.
Create a ASP.Net
Core app and
scaffold the
models.
Add a bootstrap
cards display on
the home page.
Construct some
crud functionality,
including image
upload
2 3 4

Open Sql server
management studio
Connect to your local db
Create a new database
1
2
3

4
5
Name your new database,
preferably “RestaurantDelivery”
Once created, right click on it and
select New Query

7
6
Copy the query block /*Creation*/
in the comments into the query
window and run it with “F5”
Next, copy and past the
/*Validation*/ block and check the
tables data. The result should be
close to this example ---->

1
Open visual studio and
select “Create a new
project”

2
Select “ASP.NET Core Web
Application” project type

3
Select “ASP.NET
Core Web
Application” project
type.
Name your project
and select its
location

4 Next, choose “Web
application (Model-
View-Controller)”
option.
*make sure to mark ASP.NET Core 2.1 or
higher

5
Next, right click on the
project and select
“Manage NuGet
Packages”
6
Click on Browse and look
for EnityFrameworkCore.
In the results, select and
install the package
Microsoft.Entity.Framewor
kCore.Tools
*select the highest version lower than 3.0

1 Locate the Package
Manager Console on
the bottom of visual
studio window.
2 Paste the scaffolding
command and press
“Enter”
*Attention to the database name and
context name you give.
3 Check if the models
were created

4 Adjust the Context class by removing the
code selected. The connection string will
be passed later.

4
(Optional)Adjust the
navigation properties
names on the Order
class file
5
Add the connection string
entry to your
appsettings.json

5 Right click on the project
and create a new folder.
Name it “Repository”

6 Right click on
the repository
folder and add a
new interface.
Name it
“IRepository”
Code in the
comments.
*Adjust the namespace
accordingly

7 Right click on
the repository
folder and add a
new class.
Name it
“RetaurantRepo
sitory”
Code in the
comments.
*Adjust the namespace
accordingly

8 Go to the
Startup.cs file
and inject the
DbContext and
the new
Repository as
shown.

9 Right click on the Controller folder
and add a new Controller

10 Select the option show
11 Select Restaurant model class and your
context respectively, click Add

13
Go to the
RestaurantsController
class and adjust it to use
the respository we
implemented before
*Code on the comments.
Adjust the namespace
12
Next, there will be a new
controller and some new
files on restaurants folder

13 Add a new
menu item
on the nav
bar on the
_Layout file
14
Change your run
option to use kerstel
(your project name)

1
Right click on
Respository folder and
add new class.
Name it
MenuItemRespository
*Code in the comments

2
Do it again but this
time name the new
file as
OrderRespository
*Code also in the
comments
3
Repository folder
should look like this:

4 Right click on the Controller folder
and add a new Controller
5 Select Order model and your context
respectively, than adjust the
controller code with the one in the
comments to make it use the
respective repository

6 Again, right click on the Controller
folder and add a new Controller
7 Select MenuItem model and your
context respectively, than adjust it
using the comments

8 Check out your Controllers and
View folders, they should look like
this

9 Open the Index file
on Orders folder
and fix navigation
properties

10 On the _Layout file add
two more items on the nav
bar

11 Finally, adjust your
startup.cs to inject the new
repositories

1
To add an image to the top left side of
on the nav bar, download some image
you like and add the snippet as shown
on the _Layout file

2 Something is missing !
Move on and open the
Index file on the
Restaurants view folder
3
Add the snippet
as shown

3 Change the
restaurant view
Edit to have a
new input and a
different value
for the enctype
property

4 The Index view should
be adjusted to show
the image

5 Now, go to the
RestaurantsController, and observe
edit method that handle the image
input

1 Open the
HomeControlle
r
and change it
to receive the
restaurant
repository

2 Change the
Index Home
view to show
one card for
each restaurant
received

IEEE Toronto Centennial Workshop: Building An ASP.NET Core Application

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a IEEE Toronto Centennial Workshop: Building An ASP.NET Core Application

Semelhante a IEEE Toronto Centennial Workshop: Building An ASP.NET Core Application (20)

Último

Último (20)

IEEE Toronto Centennial Workshop: Building An ASP.NET Core Application