Royaume du Maroc

Ministère de l’Enseignement Supérieur, de la Recherche

Scientifique et de l'Innovation

Université Chouaib Doukkali,

Ecole Nationale des Sciences Appliquées d’El Jadida (ENSA)
2021-2022

Introduction To .NET
to build Web Applications Using C# Under Visual Studio

2ITE
Lecture 3

Dr.-Ing. Fouad KHARROUBI

 Dot Net Core 3-Part 2
Simple Console Application Vs Code

Dr-Ing Fouad KHARROUBI

12/20/2021 2
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code

Dr-Ing Fouad KHARROUBI

12/20/2021 3
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
40. How to use this template page _layout.cshtml that we just created? Lets go for example to
Index.cshtml

Dr-Ing Fouad KHARROUBI

12/20/2021 4
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
41. Let’s run it

Dr-Ing Fouad KHARROUBI

12/20/2021 5
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
42. Let’s add Bootsrap

Dr-Ing Fouad KHARROUBI

12/20/2021 6
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
43. Click on Download

Dr-Ing Fouad KHARROUBI

12/20/2021 7
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
44. Then click on Download Bootstrap

Dr-Ing Fouad KHARROUBI

12/20/2021 8
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
45. Wait till downloading it

Dr-Ing Fouad KHARROUBI

12/20/2021 9
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
46. Then copy the zip file (remember! if we choose an MVC project (either via the console
way /Vs code or via Visual studio) all these things will be generated automatically including
bootstrap!)

Dr-Ing Fouad KHARROUBI

12/20/2021 10
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
47. Extract the zip file!

Dr-Ing Fouad KHARROUBI

12/20/2021 11
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
48. Then go to:bootstrap-3.3.7-distboostrap-3.3.7-distcss then copy the file
bootsrap.min.css

Dr-Ing Fouad KHARROUBI

12/20/2021 12
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
49. Then under the static file wwwroot create a new folder called css

Dr-Ing Fouad KHARROUBI

12/20/2021 13
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
50. Right click on wwwroot and select Reveal in Explorer (or Shift+Alt+R)

Dr-Ing Fouad KHARROUBI

12/20/2021 14
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
51. Then let’s paste the file bootstrap.min.css inside the css folder

Dr-Ing Fouad KHARROUBI

12/20/2021 15
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
52. Remember that inside the folder “Shared” under Views. We have already created a file
called _layout.cshtml which contains this code :

Dr-Ing Fouad KHARROUBI

12/20/2021 16
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
53. Then in _Layout.cshtml add this line code as follows:

Dr-Ing Fouad KHARROUBI

12/20/2021 17
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
54. Then in Index.cshtml add this lines of code: (check the former Index.cshtml tos ee the
difference)

Dr-Ing Fouad KHARROUBI

12/20/2021 18
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
55. Then run the project and check it out in your browser!

Dr-Ing Fouad KHARROUBI

12/20/2021 19
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
56. Those who want to add a Bootstrap Header

Dr-Ing Fouad KHARROUBI

12/20/2021 20
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
57. Then copy this simple example of Bootstrap navbar header

Dr-Ing Fouad KHARROUBI

12/20/2021 21
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
58. Then paste the selected code inside _Layout.cshtml

Dr-Ing Fouad KHARROUBI

12/20/2021 22
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
59. Re-orginised the code inside_Layout.cshtml like below and delete
<header>HEADER</header>

Dr-Ing Fouad KHARROUBI

12/20/2021 23
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
60. If everything is okay then via localhost:5000/Test/Index you will get:

Dr-Ing Fouad KHARROUBI

12/20/2021 24
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
61. Now lets create a class under the folder Model called Student.cs

Dr-Ing Fouad KHARROUBI

12/20/2021 25
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
62. Since we are talking about a Model (student.cs) remember these things( see more details
in Lecture 4)

Dr-Ing Fouad KHARROUBI

12/20/2021 26
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
63. Add this code to your Student.cs

Dr-Ing Fouad KHARROUBI

12/20/2021 27
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
64. Then in TestController.cs under Controller add this code:

Dr-Ing Fouad KHARROUBI

12/20/2021 28
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
65. Then go to List.cshtml under Views->Test and add this code:

Dr-Ing Fouad KHARROUBI

12/20/2021 29
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code

66. If everything is okay then via localhost:5000/Test/List you will get this table:

Dr-Ing Fouad KHARROUBI

12/20/2021 30
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
67. Is it always good idea to add this code for the layout in every file?
@{
Layout=“_Layout”
}
The answer is no! to solve this problem let’s create a file called _ViewStart.cshtml under the
folder Views

Dr-Ing Fouad KHARROUBI

12/20/2021 31
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
68. Let’s check them out!

Dr-Ing Fouad KHARROUBI

12/20/2021 32
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
69. Till now we used MVC using the manual way, however we could directly mention it from
the beginning and generate all the necessary files!

Dr-Ing Fouad KHARROUBI

12/20/2021 33
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
70. Then all files will be automatically generated

Dr-Ing Fouad KHARROUBI

12/20/2021 34
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
71. Here u go!

Dr-Ing Fouad KHARROUBI

12/20/2021 35
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
72. Or we can do it also via Visual Studio (Please check Lecture 4)

Dr-Ing Fouad KHARROUBI

12/20/2021 36
ENSAJ-UCD
 Dot Net Core 3: Web MVC Application Vs Code
73. Here u go!

Dr-Ing Fouad KHARROUBI

12/20/2021 37
ENSAJ-UCD
 Dot Net Core 3
Web MVC Entity Framework Web API Vs Code

Dr-Ing Fouad KHARROUBI

12/20/2021 38
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
1. What is Entity Framework Core?

Dr-Ing Fouad KHARROUBI

12/20/2021 39
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
2. How to use Entity Framework Core? Lets add this service under ConfigureServices in
Startup.cs

In another word we define persistence unit which defines a set of all entity classes that are
managed by EntityManager instances in an application. This set of entity classes represents the
data contained within a single data store. Persistence units are defined by
the persistence.xml
12/20/2021
configuration file. Dr-Ing Fouad KHARROUBI 40
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
3. To be able to add Entity Framework Core to our Library, we will need to add it as a
dependency in MyWebApp.csproj! How to do so? Let’s use NuGet

Dr-Ing Fouad KHARROUBI

12/20/2021 41
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
4. Go to google and type this:

Dr-Ing Fouad KHARROUBI

12/20/2021 42
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
5. Then copy this dependency to be able to add Entity Framework Core:

Dr-Ing Fouad KHARROUBI

12/20/2021 43
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
6. Then paste the dependency to be able to add Entity Framework Core and wait!

Dr-Ing Fouad KHARROUBI

12/20/2021 44
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
7. If everything is okay then this code will be added in your MyWebApp.csproj

Dr-Ing Fouad KHARROUBI

12/20/2021 45
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
7. We will do the same for the dependency related Entity Framework Core In Memory

Dr-Ing Fouad KHARROUBI

12/20/2021 46
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
8. Lets add these name spaces in Startup.cs

Dr-Ing Fouad KHARROUBI

12/20/2021 47
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
9. Lets add this service under ConfigureServices in Startup.cs

MyDbContext is the name of my class!

DbStudents is the name of my data base!
Dr-Ing Fouad KHARROUBI
12/20/2021 48
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
10. Right click to generate the code of MyDbContext class!

Dr-Ing Fouad KHARROUBI

12/20/2021 49
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
11. Here is the generated code!

Dr-Ing Fouad KHARROUBI

12/20/2021 50
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
12. How to make the ORM! (check Calling base class constructor in C#)

Dr-Ing Fouad KHARROUBI

12/20/2021 51
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
13. How to make the ORM! Lets create a collection of students!

Dr-Ing Fouad KHARROUBI

12/20/2021 52
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
14. How to make the ORM! Lets edit the Model Student.cs (for annotations we use [])
Here annotation [table ]and [key] are options not must!

Dr-Ing Fouad KHARROUBI

12/20/2021 53
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
15. Lets create a class called: StudentsRestServices.cs

Dr-Ing Fouad KHARROUBI

12/20/2021 54
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
16. Lets type this code in StudentsRestServices.cs

Dr-Ing Fouad KHARROUBI

12/20/2021 55
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
17. Lets inject the service MyDbContext via the contructor of the class StudentsRestService

Dr-Ing Fouad KHARROUBI

12/20/2021 56
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
18. Now let’s imagine we want to check a list of students (we can use a list/collection of type
Enumerable)

Dr-Ing Fouad KHARROUBI

12/20/2021 57
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
19. You can choose any other method you want!

Dr-Ing Fouad KHARROUBI

12/20/2021 58
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
20. Lets use some Annotations!

Dr-Ing Fouad KHARROUBI

12/20/2021 59
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
21. If we want to add students lets create a method which returns a student

Dr-Ing Fouad KHARROUBI

12/20/2021 60
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
22. To force Web API to read a simple type from the request body, add
the [FromBody] attribute to the parameter:

Dr-Ing Fouad KHARROUBI

12/20/2021 61
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
23. To access this method (Save) we need to use the annotation [HttpPost] and let’s check
the result out!

Dr-Ing Fouad KHARROUBI

12/20/2021 62
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
24. Since it is empty list we will get this:

Dr-Ing Fouad KHARROUBI

12/20/2021 63
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
25. To add students we can use ARC Advanced REST client as a Tool

Dr-Ing Fouad KHARROUBI

12/20/2021 64
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
26. Under Body you can set the name as well s the score! Then click on send

Dr-Ing Fouad KHARROUBI

12/20/2021 65
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
27. It has been added with success!

Dr-Ing Fouad KHARROUBI

12/20/2021 66
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
28. Let’s add another one!

Dr-Ing Fouad KHARROUBI

12/20/2021 67
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
29. Let’s check the list of students! (notice the default auto-increment)

Dr-Ing Fouad KHARROUBI

12/20/2021 68
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
30. Let’s create a method to let us get students via their Ids !

Dr-Ing Fouad KHARROUBI

12/20/2021 69
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
31. Don’t forget to add System.Linq

Dr-Ing Fouad KHARROUBI

12/20/2021 70
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
32. This method should return a student not IEnmerable <student>

Dr-Ing Fouad KHARROUBI

12/20/2021 71
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
33. If we run again it is empty because we are using InMemory !

Dr-Ing Fouad KHARROUBI

12/20/2021 72
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
34. Let’s add students again!

Dr-Ing Fouad KHARROUBI

12/20/2021 73
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
35. if we check using api/students/1

Dr-Ing Fouad KHARROUBI

12/20/2021 74
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
36. if we check using api/students/2

Dr-Ing Fouad KHARROUBI

12/20/2021 75
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
37. Let’s create a method to let us to Delete students via the Id!

Dr-Ing Fouad KHARROUBI

12/20/2021 76
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
38. Let’s create a method to let us update data related to a student!

Dr-Ing Fouad KHARROUBI

12/20/2021 77
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
39. The same as earlier, before testing we should re-add students!

Dr-Ing Fouad KHARROUBI

12/20/2021 78
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
40. Let’s check “update” (we use PUT)

Dr-Ing Fouad KHARROUBI

12/20/2021 79
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
41. Let’s check

Dr-Ing Fouad KHARROUBI

12/20/2021 80
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
42. Let’s check “Delete” (we use PUT)

Dr-Ing Fouad KHARROUBI

12/20/2021 81
ENSAJ-UCD
 Dot Net Core 3: Web MVC Entity Framework Web API Vs Code
43. Let’s check

Dr-Ing Fouad KHARROUBI

12/20/2021 82
ENSAJ-UCD
 References
Books:
[B1]: Learn ASP.Net Web Application Framework. Tutorials Point : www.tutorialspoint.com
[B2]: Stephen R.G Fraser: Managed C++ and .Net Development, 2003

Links:
[L1]https://en.wikipedia.org/wiki/ASP.NET
[L2]
https://www.codeproject.com/Articles/170105/Comparison-of-MVC-implementation-between-J-EE-and
[L3]= https://docs.microsoft.com/en-us/aspnet/core/choose-aspnet-framework
[L4]= https://docs.microsoft.com/en-us/aspnet/overview
[L5]= https://docs.microsoft.com/en-us/aspnet/core/index
https://www.youtube.com/watch?v=5du3msVI6K0&list=RDCMUCCwIYNpQVHZTd3Vx_krnmdA&start_radio=1&t=
0
https://www.youtube.com/watch?v=dm8GayJnHok
https://www.youtube.com/watch?v=4gme7OcfZ1g

A part of this PPT is based on the course of Pr.Mohamed Youssfi from ENSET Mohamadia Morocco.
https://docs.microsoft.com/en-us/aspnet/core/fundamentals/host/generic-host?view=aspnetcore-5.0

Dr-Ing Fouad KHARROUBI

12/20/2021 83
ENSAJ-UCD