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

Lecture 1

Dr.-Ing. Fouad KHARROUBI

 Dr-Ing Fouad KHARROUBI
12/6/2021 2
ENSAJ-UCD
 Dr-Ing Fouad KHARROUBI
12/6/2021 3
ENSAJ-UCD
 .NET Ecosystem?

Dr-Ing Fouad KHARROUBI

12/6/2021 4
ENSAJ-UCD
 MVC

As you can see from the above diagram, the .NET ecosystem has three major high-level
components - .NET Framework, .NET Core, and Xamarin.
Xamarin is not a debate at all. When you want to build a mobile (iOS, Android, and Windows
Mobile) apps using C#, Xamarin is your only choice
Dr-Ing Fouad KHARROUBI
12/6/2021 5
ENSAJ-UCD
 MVC

Dr-Ing Fouad KHARROUBI

12/6/2021 6
ENSAJ-UCD
 MVC

Dr-Ing Fouad KHARROUBI

12/6/2021 7
ENSAJ-UCD
 Dr-Ing Fouad KHARROUBI
12/6/2021 8
ENSAJ-UCD
 Dr-Ing Fouad KHARROUBI
12/6/2021 9
ENSAJ-UCD
 Dr-Ing Fouad KHARROUBI
12/6/2021 10
ENSAJ-UCD
 Dr-Ing Fouad KHARROUBI
12/6/2021 11
ENSAJ-UCD
 MVC

Dr-Ing Fouad KHARROUBI

12/6/2021 12
ENSAJ-UCD
So, what to choose between .NET Core and .NET?

MVC

Dr-Ing Fouad KHARROUBI

12/6/2021 13
ENSAJ-UCD
 So, what to choose between .NET Core and .NET?

Dr-Ing Fouad KHARROUBI

12/6/2021 14
ENSAJ-UCD
 So, what to choose between .NET Core and .NET?

Dr-Ing Fouad KHARROUBI

12/6/2021 15
ENSAJ-UCD
 What Is the .NET Framework?

MVC

Dr-Ing Fouad KHARROUBI

12/6/2021 16
ENSAJ-UCD
 .Net Framework Platform and Tools
(asp.net architecture)

Internet Information Services (IIS, formerly Internet

Information Server) is an extensible web server created by
Microsoft for use with the Windows NT family. IIS
supports HTTP, HTTPS, FTP, FTPS, SMTP and NNTP

Dr-Ing Fouad KHARROUBI

12/6/2021 17
ENSAJ-UCD
 .Net Framework Platform and Tools
(asp.net security architecture)

Dr-Ing Fouad KHARROUBI

12/6/2021 18
ENSAJ-UCD
 What Is the .NET Framework?
According to [B2]

Dr-Ing Fouad KHARROUBI

12/6/2021 19
ENSAJ-UCD
 What Is the .NET Framework?
According to [B2]

Dr-Ing Fouad KHARROUBI

12/6/2021 20
ENSAJ-UCD
 What Is the .NET Framework?

Dr-Ing Fouad KHARROUBI

12/6/2021 21
ENSAJ-UCD
 .NET Framework Advantages

Dr-Ing Fouad KHARROUBI

12/6/2021 22
ENSAJ-UCD
 .NET Framework Advantages
According to [B2]

Dr-Ing Fouad KHARROUBI

12/6/2021 23
ENSAJ-UCD
 What is ASP.NET?

MVC

Dr-Ing Fouad KHARROUBI

12/6/2021 24
ENSAJ-UCD
 What is ASP.NET?
According to Wikipedia [L1]:

Dr-Ing Fouad KHARROUBI

12/6/2021 25
ENSAJ-UCD
 What is ASP.NET?
According to Wikipedia [L1]:

The Common Language

Runtime (CLR), the virtual
machine component of Microsoft's .NET
framework, manages the execution of
.NET programs. A process known as just-
in-time compilation converts compiled
code into machine instructions which the
computer's CPU then executes.

Dr-Ing Fouad KHARROUBI

12/6/2021 26
ENSAJ-UCD
 What is ASP.NET?
According to Wikipedia [L1]:

SOAP (originally Simple Object Access Protocol) is a

protocol specification for exchanging structured
information in the implementation of web services in
computer networks. It uses XML Information Set for its
message format, and relies on application layer protocols,
most often Hypertext Transfer Protocol (HTTP) or for
message negotiation and transmission. Simple Mail
Transfer Protocol (SMTP),

Dr-Ing Fouad KHARROUBI

12/6/2021 27
ENSAJ-UCD
 What is ASP.NET?
According to [B1]

Dr-Ing Fouad KHARROUBI

12/6/2021 28
ENSAJ-UCD
 ASP.NET supports a number of
programming models for building web
applications

Dr-Ing Fouad KHARROUBI

12/6/2021 29
ENSAJ-UCD
 What is ASP.NET?
According to [L7]

MVC

Dr-Ing Fouad KHARROUBI

12/6/2021 30
ENSAJ-UCD
 Comparison between JEE and ASP.NET, Who is the best?!

Dr-Ing Fouad KHARROUBI

12/6/2021 31
ENSAJ-UCD
 Comparison between JEE and ASP.NET, Who is the best?!
According to [L2]

Dr-Ing Fouad KHARROUBI

12/6/2021 32
ENSAJ-UCD
 Comparison between JEE and ASP.NET, Who is the best?!
1.The model – Javabean in JEE and .NET class in ASP.NET

Dr-Ing Fouad KHARROUBI

12/6/2021 33
ENSAJ-UCD
 Comparison between JEE and ASP.NET, Who is the best?!
2.The Controller – Servlet in JEE and HttpHandler in ASP.NET

Dr-Ing Fouad KHARROUBI

12/6/2021 34
ENSAJ-UCD
 Comparison between JEE and ASP.NET, Who is the best?!
2.The Controller – Servlet in JEE and HttpHandler in ASP.NET

Dr-Ing Fouad KHARROUBI

12/6/2021 35
ENSAJ-UCD
 Comparison between JEE and ASP.NET, Who is the best?!
2.The Controller – Servlet in JEE and HttpHandler in ASP.NET

Dr-Ing Fouad KHARROUBI

12/6/2021 36
ENSAJ-UCD
 Comparison between JEE and ASP.NET, Who is the best?!
3.The mapping XML files – Web.xml in JEE and Web.config in ASP.NET

Dr-Ing Fouad KHARROUBI

12/6/2021 37
ENSAJ-UCD
 Comparison between JEE and ASP.NET, Who is the best?!
3.The mapping XML files – Web.xml in JEE and Web.config in ASP.NET

Dr-Ing Fouad KHARROUBI

12/6/2021 38
ENSAJ-UCD
 Comparison between J2EE and ASP.NET, Who is the best?!
3.The mapping XML files – Web.xml in JEE and Web.config in ASP.NET

Dr-Ing Fouad KHARROUBI

12/6/2021 39
ENSAJ-UCD
 Comparison between J2EE and ASP.NET, Who is the best?!
4. The View – JSP Pages in JEE and ASPX Pages in ASP.NET

Dr-Ing Fouad KHARROUBI

12/6/2021 40
ENSAJ-UCD
 Comparison between JEE and ASP.NET, Who is the best?!
According to [L2]

Dr-Ing Fouad KHARROUBI

12/6/2021 41
ENSAJ-UCD
 Comparison between JEE and ASP.NET, Who is the best?!
According to [L2]

Dr-Ing Fouad KHARROUBI

12/6/2021 42
ENSAJ-UCD
 Comparison between JEE and ASP.NET, Who is the best?!
According to [L2]

Dr-Ing Fouad KHARROUBI

12/6/2021 43
ENSAJ-UCD
JEE, ASP.NET, Perl, Python, PHP, Ruby and ColdFusion, Who is the best?!

Dr-Ing Fouad KHARROUBI

12/6/2021 44
ENSAJ-UCD
J2EE, ASP.NET, Perl, Python, PHP, Ruby and ColdFusion, Who is the best?!

Dr-Ing Fouad KHARROUBI

12/6/2021 45
ENSAJ-UCD
 Choose between ASP.NET and ASP.NET Core

MVC

Dr-Ing Fouad KHARROUBI

12/6/2021 46
ENSAJ-UCD
 Choose between ASP.NET and ASP.NET Core

Dr-Ing Fouad KHARROUBI

12/6/2021 47
ENSAJ-UCD
 Choose between ASP.NET and ASP.NET Core

Dr-Ing Fouad KHARROUBI

12/6/2021 48
ENSAJ-UCD
 Choose between ASP.NET and ASP.NET Core

Razor is an ASP.NET programming syntax used to create dynamic

web pages with the C# or Visual Basic .NET programming languages.

Razor was released for Microsoft Visual Studio 2010 in January

2011. Razor is a simple-syntax view engine and was released as part
of MVC 3 and the WebMatrix tool set.

The Razor syntax is a template markup syntax, based on the C#

programming language, that enables the programmer to use an HTML
construction workflow.

Instead of using the ASP.NET Web Forms (.aspx) markup syntax with
<% %> symbols to indicate code blocks, Razor syntax starts

code blocks with an @ character and does not require explicit

closing of the code-block.

Dr-Ing Fouad KHARROUBI

12/6/2021 49
ENSAJ-UCD
 Choose between ASP.NET and ASP.NET Core

Dr-Ing Fouad KHARROUBI

12/6/2021 50
ENSAJ-UCD
 ASP.NET Overview

Dr-Ing Fouad KHARROUBI

12/6/2021 51
ENSAJ-UCD
 ASP.NET Overview

Dr-Ing Fouad KHARROUBI

12/6/2021 52
ENSAJ-UCD
 ASP.NET Overview

Dr-Ing Fouad KHARROUBI

12/6/2021 53
ENSAJ-UCD
 ASP.NET Overview: Web Forms

Dr-Ing Fouad KHARROUBI

12/6/2021 54
ENSAJ-UCD
 ASP.NET Overview

Dr-Ing Fouad KHARROUBI

12/6/2021 55
ENSAJ-UCD
 ASP.NET Overview: MVC

Dr-Ing Fouad KHARROUBI

12/6/2021 56
ENSAJ-UCD
 ASP.NET Overview

Dr-Ing Fouad KHARROUBI

12/6/2021 57
ENSAJ-UCD
 ASP.NET Overview: Web Pages

Dr-Ing Fouad KHARROUBI

12/6/2021 58
ENSAJ-UCD
 ASP.NET Overview: Notes…

Dr-Ing Fouad KHARROUBI

12/6/2021 59
ENSAJ-UCD
ASP.NET Overview: Web APIs, Real-time technologies, Mobile apps and sites

Dr-Ing Fouad KHARROUBI

12/6/2021 60
ENSAJ-UCD
 ASP.NET Overview: Single-page applications

Dr-Ing Fouad KHARROUBI

12/6/2021 61
ENSAJ-UCD
 ASP.NET Core Overview

Dr-Ing Fouad KHARROUBI

12/6/2021 62
ENSAJ-UCD
 ASP.NET Core Overview

What is ASP.NET Core?

Dr-Ing Fouad KHARROUBI

12/6/2021 63
ENSAJ-UCD
 ASP.NET Core Overview
Why use ASP.NET Core?

NuGet is the package manager for

.NET. The NuGet client tools
provide the ability to produce and
consume packages. The NuGet
Gallery is the central package
repository used by all package
authors and consumers

Dr-Ing Fouad KHARROUBI

12/6/2021 64
ENSAJ-UCD
 ASP.NET Core Overview
Build web APIs and web UI using ASP.NET Core MVC

Dr-Ing Fouad KHARROUBI

12/6/2021 65
ENSAJ-UCD
 Quick start: How to install Visual Studio 2017

Dr-Ing Fouad KHARROUBI

12/6/2021 66
ENSAJ-UCD
First go to : www.visualstudio.com so that you can download visual Studio Express

Dr-Ing Fouad KHARROUBI

12/6/2021 67
ENSAJ-UCD
or also you do it via Google like this:

Dr-Ing Fouad KHARROUBI

12/6/2021 68
ENSAJ-UCD
Start Downloading the Visual Studio Express

Dr-Ing Fouad KHARROUBI

12/6/2021 69
ENSAJ-UCD
 Dr-Ing Fouad KHARROUBI
12/6/2021 70
ENSAJ-UCD
Choose your Workloads following your wants and needs

Dr-Ing Fouad KHARROUBI

12/6/2021 71
ENSAJ-UCD
Start downloading your Packages

Dr-Ing Fouad KHARROUBI

12/6/2021 72
ENSAJ-UCD
If everything is okay then you will get this:

Dr-Ing Fouad KHARROUBI

12/6/2021 73
ENSAJ-UCD
Launch your Visual Studio Community 2017

Dr-Ing Fouad KHARROUBI

12/6/2021 74
ENSAJ-UCD
 Dr-Ing Fouad KHARROUBI
12/6/2021 75
ENSAJ-UCD
 Dr-Ing Fouad KHARROUBI
12/6/2021 76
ENSAJ-UCD
Here it goes!!

Dr-Ing Fouad KHARROUBI

12/6/2021 77
ENSAJ-UCD
 Quick start: How to Use Visual Studio 2017 to
create your first ASP.NET Core web app

Dr-Ing Fouad KHARROUBI

12/6/2021 78
ENSAJ-UCD
To start, you'll create an ASP.NET Core web application project. The project type comes
with all template files to create a web app, before you've even added anything!

1.Open Visual Studio 2017.

Dr-Ing Fouad KHARROUBI

12/6/2021 79
ENSAJ-UCD
2.From the top menu bar, choose File > New > Project.

Dr-Ing Fouad KHARROUBI

12/6/2021 80
ENSAJ-UCD
3.In the left pane of the New Project dialog box, expand Visual C#, and then choose .NET
Core. In the middle pane, choose ASP.NET Core Web Application. Then, name your
file HelloEnsaj and choose OK.

Dr-Ing Fouad KHARROUBI

12/6/2021 81
ENSAJ-UCD
4. In the New ASP.NET Core Web Application dialog box, select ASP.NET Core 2.0 or later
from the top drop-down menu. Next, choose Web Application, and then choose OK.

Dr-Ing Fouad KHARROUBI

12/6/2021 82
ENSAJ-UCD
5. Create the app: In the Solution Explorer, expand the Pages folder, and then choose About.cshtml.

Dr-Ing Fouad KHARROUBI

12/6/2021 83
ENSAJ-UCD
5. Create the app: In the Solution Explorer, expand the Pages folder, and then choose About.cshtml.

Dr-Ing Fouad KHARROUBI

12/6/2021 84
ENSAJ-UCD
5. Create the app: In the Solution Explorer, expand the Pages folder, and then choose About.cshtml.

Dr-Ing Fouad KHARROUBI

12/6/2021 85
ENSAJ-UCD
6. Press Ctrl+F5 to run the app and open it in a web browser. This file About.cshtml
corresponds to a page that's named About in the web app.

Dr-Ing Fouad KHARROUBI

12/6/2021 86
ENSAJ-UCD
6. Press Ctrl+F5 to run the app and open it in a web browser. This file About.cshtml
corresponds to a page that's named About in the web app.

Dr-Ing Fouad KHARROUBI

12/6/2021 87
ENSAJ-UCD
7. In the editor, you'll see HTML code for the "additional information" area of the About page.
Change it to : Hello Ensaj 2018-2019

Dr-Ing Fouad KHARROUBI

12/6/2021 88
ENSAJ-UCD
7. In the editor, you'll see HTML code for the "additional information" area of the About page.
Change it to : Hello Ensaj 2018-2019

Dr-Ing Fouad KHARROUBI

12/6/2021 89
ENSAJ-UCD
8. In the Solution Explorer, expand About.cshtml, and then choose About.cshtml.cs. (This
file also corresponds with the About page in your web app.)

Dr-Ing Fouad KHARROUBI

12/6/2021 90
ENSAJ-UCD
9. In the editor, you'll see C# code that includes text for the "application description" area of
the About page. Change the "application description" message text to read “Your Ensaj
application description page”

Dr-Ing Fouad KHARROUBI

12/6/2021 91
ENSAJ-UCD
10. Run the app: Press Ctrl+F5 to run the app and open it in a web browser.

Dr-Ing Fouad KHARROUBI

12/6/2021 92
ENSAJ-UCD
10. Run the app: Press Ctrl+F5 to run the app and open it in a web browser.

Dr-Ing Fouad KHARROUBI

12/6/2021 93
ENSAJ-UCD
11. In the Solution Explorer, expand the Pages folder, and then choose _Layout.cshtml.
Add a “New Ensaj Item” to the menu as follows:

Dr-Ing Fouad KHARROUBI

12/6/2021 94
ENSAJ-UCD
12. Run the app one more time: Press Ctrl+F5 to run the app and open it in a web
browser.

Dr-Ing Fouad KHARROUBI

12/6/2021 95
ENSAJ-UCD
13. Notice: when we click on “HelloEnsaj” we get this:

Dr-Ing Fouad KHARROUBI

12/6/2021 96
ENSAJ-UCD
14. Notice: when we click on “Home” we get this:

Dr-Ing Fouad KHARROUBI

12/6/2021 97
ENSAJ-UCD
15. Notice: when we click on “About” we get this:

Dr-Ing Fouad KHARROUBI

12/6/2021 98
ENSAJ-UCD
16. Notice: when we click on “Contact” we get this:

Dr-Ing Fouad KHARROUBI

12/6/2021 99
ENSAJ-UCD
17. Notice: when we click on “New Ensaj Item” we get this:

Dr-Ing Fouad KHARROUBI

12/6/2021 100
ENSAJ-UCD
18.Question-Homework: How can we get this
form after clicking on “New Ensaj Item”????

Dr-Ing Fouad KHARROUBI

12/6/2021 101
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
[L6]= https://docs.microsoft.com/en-us/visualstudio/ide/quickstart-aspnet-core?view=vs-2017
[L7]: https://en.wikipedia.org/wiki/ASP.NET
[L8]https://www.c-sharpcorner.com/article/difference-between-net-framework-and-net-core/#:~:text=NET%20Core-
,is%20the%20new%20open%2Dsource%20and%20cross%2Dplatform%20framework%20to,%2C%20Mac%2C%20an
d%20Linux.%20.&text=UWP%20is%20used%20to%20build,build%20browser%2Dbased%20web%20applications.

Dr-Ing Fouad KHARROUBI

12/6/2021 102
ENSAJ-UCD