Advanced Software Design

and Development
L1: Introduction to ASP.NET
Dr. Abdullah Bokir
Overview of ASP.NET Core
• ASP.NET Core is Microsoft’s web development platform. The original
ASP.NET was introduced in 2002.

• NET Core applications can be developed, tested, and deployed on

cross platforms such as Windows, Linux flavors, and macOS systems.
.NET architecture
.NET architecture
1- operating system
- interacts with the kernel APIs that are present in the operating
system.

2- Common Language Infrastructure

- connects with the CLR, which provides services that monitor
each code execution and managed memory, handles
exceptions, and ensures that the application behaves as
intended
.NET architecture
3- .NET class libraries.
- This layer holds the binaries that the language is built on, and all
of the compilers built on top of the libraries provide the same
compiled code so that the CLR can understand the code and
interact easily with one another.
4- Common Language Runtime

- This provides all of the basic functionalities of the managed

environment in the form of garbage collection, security.
.NET architecture
- Just-in-time compiler
- .NET languages are compiled twice. During the first form of
compilation, the high-level language is converted into a
Microsoft Intermediate Language (MSIL), which can be
understood by the CLR, while the MSIL is again compiled during
runtime when the program is executed. The JIT works inside the
program runtime and periodically compiles the code that is
expected to be required during execution.
Introduction to MVC

- MVC is not a new programming language.

- MVS is an architectural design patterns

Design Patterns

- design patterns are solutions to software designing problems

that you find again and again in real-world application
development.
Design Patterns
There are around 23 different design patterns which are grouped
into following three categories:
1- Creational design patterns
Deals with object creation
2- Structural design patterns
(the relationships between entities. i.e: design of the classes
and the relationship between classes)
3- Behavioral design pattern
Define how the communication works between the entities.
Architectural pattern
An architectural pattern is a general, reusable solution to a
commonly occurring problem in software architecture within a
given context. architectural patterns are similar to software design
pattern but have a broader scope
Examples
layers
microservices
model-view -controller
model-view- viewmodel
multitier architecture
Model-View-Controller (MVC)

One of the greatest values we get from using the MVC pattern is
separation of concerns. The MVC pattern separates a web
application into three components: the models, the views, and the
controllers.
Model-View-Controller (MVC)

The models
are the classes that represent the various types of objects
managed by the web application. For example (think about a web
application such as Amazon, Udemy) we could have the following
model classes: Course, User, Student, Instructor, Administrator,
Product, Seller, Buyer, and so on. These are the typical C# classes .
(these files will have extension .cs).
Model-View-Controller (MVC)

The views
will make up the user interface. We’ll present content to users via
views (more accurately, we’ll use views to build webpages that
ultimately will get displayed in a user’s browser) For example (think
about a web application such as Amazon, Udemy), we can have a
view that will be used to display a list of all courses taken by a
student, or a list of all laptops available to purchase. We could use
another view to build a page that allows our users to change their
password, and yet another view to add a new laptop to sell it
online. These are files that will combine HTML and CSS with C#
(these files will have extension .cshtml).
Model-View-Controller (MVC)
The controllers
will handle the user interaction. For example (think about a web
application such as Amazon, Udemy, …). What happens when you
click on a button? Or click on a link? Or load the first welcome
page? In each of these, your requests will (eventually) be sent to a
Controller (more specifically to an Action from that Controller). In
many cases, the Controller will create an instance of a Model, then
pass it to a View to build a page that will eventually show up in the
user’s browser. These are C# classes derived from the
Microsoft.AspNetCore.Mvc.Controller class (these files will have
extension .cs).
Model-View-Controller (MVC)
Introduction to Web API

- With the increase in internet availability, there is an ongoing

evolution in data communication techniques.

- There was a need for software components to be available

across the internet with a common interface for communication
across different platforms and programming languages.
Introduction to Web API
- This led to the concept of creating services easily deployable
with scalability, and exposing them over the internet.

- Designing functionalities in terms of service was widely

adopted; it was a great idea to provide features in the form of
services to heterogeneous clients. This concept of using services
led to SOA (Service-Oriented Architecture).
Introduction to Web API
Services in SOA
- A service is a piece of software which provides a functionality to
other pieces of software within your system or outside the
system.

- The other pieces of software (clients) could be anything from a

web application (website) to a mobile app (native or hybrid), or
a desktop app, or even another service which uses another
service in order to carry out a particular type of functionality.
Introduction to Web API

Why to use API?

The main idea behind this architecture is that, instead of using
modules within each client application, it lets us use a service(s) to
provide functionality to them. This allows us to have many client
applications using the same functionality.
Introduction to Web API
Monolithic architecture
- A typical Monolithic system is an enterprise-based application,
and this application might be in the form of a large website with
all the working modules packaged in together into one single
package. It might be packaged as a large executable that is
deployed on a machine.

- In these systems, we added different components to an

application to keep growing; there's no restriction in size, and
there's no division.
Introduction to Web API
Monolithic architecture
- A typical Monolithic system is an enterprise-based application,
and this application might be in the form of a large website with
all the working modules packaged in together into one single
package. It might be packaged as a large executable that is
deployed on a machine.

- In these systems, we added different components to an

application to keep growing; there's no restriction in size, and
there's no division.
Introduction to Web API
Overheads of Monolithic architecture
• Due to the code base being so large, it took the teams longer to
develop a new functionality within the application.
• Deployment of a large system can also be challenging, because
even for a small bug fix, we have to deploy a new version of the
entire system, and therefore, that creates greater risk.
• It's one large code base, so, we're also stuck with one technology
stack.
• It makes the overall system less competitive, because we can't
easily adopt new technologies which might give us a competitive
edge.
Introduction to Web API
Overheads of Monolithic architecture
• Since the code is in one large package, we might also have high
levels of coupling, which means that if a change is made in one
part of the system, it might affect another part of the system
• Unit testing for such a large code base takes time, and regression
testing by QA is also a time-consuming process.

The only one advantage that a Monolithic system has is the fact
that we can run the entire code base on one machine, so, when
developing and testing, we could probably replicate the entire
environment on a machine.
Introduction to Web API
Overheads of Monolithic architecture
• Since the code is in one large package, we might also have high
levels of coupling, which means that if a change is made in one
part of the system, it might affect another part of the system
• Unit testing for such a large code base takes time, and regression
testing by QA is also a time-consuming process.

The only one advantage that a Monolithic system has is the fact
that we can run the entire code base on one machine, so, when
developing and testing, we could probably replicate the entire
environment on a machine.
Introduction to Web API
Microservices
The Microservices architecture is, basically, service-oriented
architecture done well.

Microservices are small services that perform one function well

while working with other services as well.
Single Page Application (SPA)
In traditional web applications, the client (browser) initiates the
communication with the server by requesting a page. The server
then processes the request and sends the HTML of the page to the
client. In subsequent interactions with the page –e.g. the user
navigates to a link or submits a form with data– a new request is
sent to the server, and the flow starts again: the server processes
the request and sends a new page to the browser in response to
the new action requested by the client.
Traditional web applications
Single Page Application (SPA)
Single page application (SPA) is a web application that fits on a
single page. All your code (JS, HTML, CSS) is retrieved with a single
page load. And navigation between pages is performed without
refreshing the whole page.
Single Page Application (SPA)
Single Page Application (SPA)
The architecture of a SPA involves certain challenges that are not
present in traditional web applications. However, emerging
technologies like ASP.NET Web API, JavaScript frameworks like
AngularJS and new styling features provided by CSS3 make it really
easy to design and build SPAs.
Pros of Single Page Application (SPA)
1- No Page Refresh
When you are using SPA, you don’t need to refresh the whole page,
just load the part of the page which needs to be changed. Angular
allows you to pre-load and cache all your pages, so you don’t need
extra requests to download them.

2-Better User Experience

SPA feels like a native application: fast and responsive.

3- Ability to Work Offline

Even if user loses internet connection, SPA can still work because
all the pages are already loaded.
Cons of Single Page Application (SPA)
1- More Complex to Build
You need to write pretty much JavaScript, handle shared state
between pages, manage permissions, etc.

2- SEO
To index your SPA app, search engine crawlers should be able to
execute JavaScript. Only recently, Google and Bing started indexing
Ajax-based pages by executing JavaScript during crawling.
Cons of Single Page Application (SPA)
3- Initial Load is Slow
SPA needs to download more resources when you open it.

4- Client Should have JavaScript Enabled

Of course, SPA requires JavaScript. But fortunately, almost
everyone has JavaScript enabled.
Enterprise resource planning (ERP)

It is a type of software system that helps organisations

automate and manage core business processes for optimal
performance.
Enterprise resource planning (ERP)
Model-View-Controller (MVC)
Create an ASP .Net Core MVC web application
Step 1: Open Visual Studio, then click on the Create a new project
button.

Step 2: Then, in the Create a new project window, enter the word
MVC in the search bar, then select ASP .NET Core Web App (Model-
View-Controller), and click the Next button.

Step 3: choose a name and location for your project, then click on
the Next button.
Model-View-Controller (MVC)
Create an ASP .Net Core MVC web application
Step 4: in the Additional information window, you can choose
a .Net framework to work with. we’ll go with .Net 6.0 (Long Term
Support). Also, uncheck the Configure for HTTPS. We won’t use it in
this example. Then click on the Create button.

Once the new project is ready to run, either press Ctrl + F5, or go
to Debug > Start Without Debugging, or click on the light green
play button located around the center of the top menu options.
This will start, in a browser, your newly created ASP .Net Core MVC
web application (note the URL: localhost:5096).
Model-View-Controller (MVC)
Create an ASP .Net Core MVC web application
Solution explorer
check out the Solution Explorer window. There are several files and
folders showing up in there. In particular, you should note the
following:
- We have separate folders for Models, Views, and
Controllers.
- There is a (special) folder, called wwwroot, and it contain
JavaScript, CSS, and other files.
- There is a Program.cs.
Model-View-Controller (MVC)
Solution explorer

launchSettings.json
When you run the application, it opened in a browser window. In
our example, it opened up with the URL: (localhost:5096). If you
have multiple browsers installed on your machine, you can open
the same URL from multiple browsers. If you open the
launchSettings.json file, you will see that the value (port number)
5097 was set in that file. You can change that value to another
number, let’s say 5096. If you rerun your application, the new value
will be used for your web application.
Model-View-Controller (MVC)
Solution explorer

site.css
If you open the site.css file found under wwwroot > css: you should
find very familiar code (CSS styling).
add the following line:
background-color:lightblue;
Then, either rerun the application.
Model-View-Controller (MVC)
Solution explorer

Layout.cshtml

In here you should note two things as follows: .

- It defines the navbar we see on our pages.
- It links to the site.css file we’ve seen above.