Introduction to ASP.NET Core MVC
CSIS3734 – Unit 1 (Lecture 1)
10 Feb 2025
T: +27 51 401 2229 | E: BothaBS@ufs.ac.za | www.ufs.ac.za/cs
Module Structure
• Unit 1 – Getting ready for ASP.Net Core MVC
• Unit 2 – ASP.NET Core MVC
• Unit 3 – Entity Framework Core
• Unit 4 – ASP.NET Core Identity
2
Required Resources
Textbook: Chapter 1
Note: Throughout the textbook, you can ignore all
examples/instructions directly related to Visual Studio Code.
3
Objectives
1. Describe the components of a web app.
2. Distinguish between static and dynamic web pages, with the focus on the web server,
application server, and database server.
3. Describe these terms: HTTP request, HTTP response, and round trip.
4. Describe the model, view, and controller of the MVC pattern.
5. Explain how using the MVC pattern can improve app development.
6. Describe how an ASP.NET Core app allows a developer to configure the middleware
components in the HTTP request and response pipeline.
7. Define state and describe why it’s hard to track in a web app.
8. Describe how coding by convention works and how it can benefit developers.
4
Outline
• Introduction to web apps.
• Introduction to ASP.NET Core MVC.
• Setting up your machine.
• Working of an ASP.NET Core MVC app.
5
Introduction to Web Apps
• Web app / Web application: Set of web pages generated in
response to user requests.
• Components of a web app:
– Clients (use web browser)
– Web server
– Network
• Components of an HTTP URL:
6
Processing static web pages
• Fixed content. (Always looks the same.)
• File (HTML) is sent directly from the web server to the
web browser when requested.
• Web browser translates the HTML and referenced
CSS/JavaScript into a web page.
7
Processing dynamic web pages
1. Web browser sends HTTP request (which can contain data) to Web Server.
2. Web Server determines which Application Server should process the request.
3. Application Server:
1.
2.
3.
4.
5.
Retrieves the appropriate program.
Loads any form data included as part of the HTTP request.
Executes the program to generate HTML, CSS, and JavaScript for the web page.
Can also request data from the Database Server (to include as part of the web page).
Sends dynamically generated HTML back to the web server.
4. Web server sends the HTML, CSS, and JavaScript for the page back to the browser in an
HTTP response.
5. Web browser renders the HTML/CSS/JavaScript and displays the web page to the user.
8
The MVC Pattern
•
•
•
MVC (Model-View-Controller) pattern: Used to structure web apps that
have significant processing requirements.
App is divided into separate components.
Each component has a specific area of concern (Separation of concerns):
– Model: Provides the data access and business logic.
– View: Generates the user interface and presents it to the user.
– Controller: Receives requests from the users, gets the appropriate data and stores it
in the model, and passes the model to the appropriate view.
9
Benefits of MVC apps
•
•
•
•
Easier for team members to work on different components.
Testing of individual components can be automated.
One component can be swapped out with another.
Makes apps easier to code, test, debug, and maintain.
• Drawbacks: Requires a bit more work to set up an MVC-based
app.
10
Introduction to ASP.NET Core MVC
• Four ASP.NET programming models for web apps: 2020
– ASP.NET Web Forms (Windows only)
– ASP.NET MVC (Windows only)
– ASP.NET Core MVC (Open-source, cross-platform)
ASP.NET 5.0
– ASP.NET Core Razor Pages (Model built on top of MVC)
2023
2015
2002
ASP.NET WebForms
ASP.NET Core 1.0
2021
ASP.NET 6.0
2022
ASP.NET 7.0
ASP.NET 8.0
2018
2024
ASP.NET Core
2.1 & 2.2
ASP.NET 9.0
2007
2017
2019
ASP.NET MVC
ASP.NET Core 2.0
ASP.NET Core 3.0 / 3.1
11
.NET Framework vs .NET Core
• The .NET Framework only supports the Windows operating system.
• The .NET Core platform is open source and supports multiple
operating systems including Windows, macOS, and Linux.
• ASP.NET Web Forms apps use services of the ASP.NET
Framework, which uses services of the .NET Framework.
• ASP.NET MVC apps work by using services of the ASP.NET
Framework.
• ASP.NET Core MVC apps work by using services of ASP.NET Core,
which uses services of .NET
12
ASP.NET Core middleware
• Middleware components: Part of the HTTP request and HTTP
response pipeline.
• Each middleware component can modify the HTTP request (or
HTTP response) before passing it to the next component in the
pipeline.
• Middleware can:
– Generate the content for a response.
– Edit the content of a request.
– Edit the content of a response.
– Short circuit a request.
13
A request that makes it through all the
middleware in the pipeline
Confirm the
identity of the
client making
the request
Check if client
is authorized
to make the
request.
Uses a
Controller to
generate the
content for a
response
(by working
with Model
and View
layers)
14
A request that is short circuited by a
middleware component in the pipeline
15
How state works in a web app
• State: Current status of the properties, variables, and other data
maintained by an app for a single user.
• App must maintain a separate state for each user currently using
the app.
• HTTP is a stateless protocol. (Does not keep track of state
between round trips).
• ASP.NET Core MVC provides features to handle state - gives
developers control over each HTTP request and response.
16
Why state is difficult to track in a web app
17
Setting up your Development
Environment
1. Latest version of Visual Studio 2022 (Community Edition)
(https://visualstudio.microsoft.com/).
2. Download & install the latest version of the .NET 9.0 SDK
– https://dotnet.microsoft.com/en-us/download/dotnet/9.0
– Do NOT install .NET 6.0
• Note: Since the textbook uses .NET 6.0, minor changes needed for
.NET 9.0 will be pointed out to you throughout the course.
18
How an ASP.NET Core MVC app works
• Coding conventions.
• Demo – GuitarShop app
19
Coding by convention
•
•
Root folder (e.g. GuitarShop)
Controllers sub-folder:
– C# controller classes.
– "Controller" included as name of class.
•
Models sub-folder:
– C# classes for each model.
•
Views sub-folder:
– Razor views (.cshtml files)
– Sub folder for each controller.
•
wwwroot sub-folder:
– For static files (CSS, images, JavaScript, libraries, ...)
20
20
How a controller passes a model to a view
• A model is a C# class that defines the data objects and business
rules for the app.
• A controller is a C# class that typically inherits the
Microsoft.AspNetCore.Mvc.Controller class.
• An action is a method of a controller that returns an action result.
• An action method can use the View() method to return a type of
action result known as a view result that’s created by merging the
model (if there is one) into the corresponding view file.
21
View: HTML, Razor code, tag helpers, and Bootstrap
CSS classes
•
•
•
•
•
•
Mostly standard HTML elements.
@model directive: Specifies the class for the model.
@Model property allows you to access the model object that’s passed to
the view from the controller.
@ { ... } block: A block of C# statements.
Tag helpers: HTML attributes that start with "asp-". Tag helpers are defined
by C# classes and make it easier to work with HTML elements.
The class attribute of an HTML element can specify CSS classes from
Bootstrap, a popular open-source CSS library.
22
How the Program.cs file configures the middleware
for an app
• Contains the code that identifies which services to use and provides
additional configuration if necessary.
• Contains the code that configures the middleware that’s used by the
app.
• By convention, the routing system identifies the Home controller as
the default controller and the Index() action method as the default
action.
23
Program.cs
How request URLs map to
controllers and actions by default
25
Preparation for next lecture
• Textbook:
– Review Chapter 1 (as discussed today).
– Read Chapter 2 (p. 38 – 63).
26