2024/09/27
Getting started
▪Copy the MVCMovies folder to local storage (from Courses folder)
• \\cs2-new.mandela.ac.za\Courses\WRWV202
• Basic Movie Application with database
▪Open the Project MVCMovies in Visual studio (there is a sln file; File -
Open - Project)
▪Select to run the application
Getting started
▪ If
you see an error message about not being
able to show the application, try the
following:
▪ Select Tools, NuGet Package Manager,
Package Manager Console
▪ Type Update-Database at the command
prompt, press enter
▪ When the command has executed, run the
project again
1
2024/09/27
Getting started
▪Use the available links, see what the
current project offers
▪Close the run, return to the project in VS
▪Inspect the project – look at all the files
created, to determine things like:
• What types of files?
• What goes into each type of file?
• How is the syntax used different?
• Where does the formatting instructions come
from?
Model-View-Controller Web Applications
Lecturers:
Ms Marinda Taljaard & Ms Isabelle Taljaard
2
2024/09/27
Reminders: Refreshing & re-building
▪Refreshing
your browser (this refers to Chrome – but might also be
applicable in another browser)
• F5 : regular refresh in browser
• Ctrl-F5 (Ctrl + F5): reloads the current page including the browser cache
- Also referred to as a Hard reload
- Means the browser will not use the current cache, but will be forced to download again
(all the files – js, images, scripts)
- You will have the most fresh version of the page sent by the server
▪After making some changes, it might be necessary to re-build your project
Different ways to create websites
▪Semester 1: HTML and CSS pages
▪Semester 2:
• ASP.NET forms to build dynamic websites using drag-and-drop, event-driven model
• ASP.NET Core (Model-View-Controller)
- Powerful, patterns-based way to build dynamic websites
- Enables clean separation of concerns
3
2024/09/27
Model-View-Controller (MVC)
▪Three main components – different tasks
Model-View-Controller (MVC)
4
2024/09/27
Model-View-Controller (MVC)
▪Model
• Collection of classes - used to interact with the database
• DataModel – link to the database (think connection string)
• Classes linked to database tables
▪View
• Structure of the page
▪Controller
• Receives request and calls
resources
Model
▪ Dataand rules applying to the data
▪ Model gives the controller a data representation of what user requested
• Controller will determine what to do with it
▪ Createclass for each of the tables needed in the database
▪ SQL Server Express LocalDB can be created from the classes
5
2024/09/27
Controller
▪ Manages user requests (received as HTTP GET or
POST requests)
▪ Main function is to call and coordinate necessary
resources/objects needed to perform user action
▪ Issues commands to model
▪ Updates the view whenever data changes
▪ Keeps view and model separate
View
▪ Provides different ways to present the data
received from the model
▪ May be templates where data is filled
▪ Could have several different views – controller
will decide which to use
▪ The user interface (HTML/ASP controls)
necessary to render the model to the user
6
2024/09/27
Advantages
▪ Support for different users using different devices
• Interface different but model provides the same data
• Controller will choose which view to use
▪ Separation of concern
• Loosely coupled: should be able to change anything on any 1 of the 3 without affecting the others
▪ Reduces complexity amongst the components
▪ Structured code making it easier to maintain, test and reuse
Quiz 2
▪Loginto Moodle
▪Complete Quiz 2 (available from 08:00)
▪Password: sepTember
7
2024/09/27
Example: Movie app
▪ Simple movie listing application that supports creating, editing, searching and listing
movies from a database
▪ Controller:
• Receive user request
• Examine request and call model asking for list of available movies
▪ Model
• Getinformation from the database (or wherever stored)
• Apply filters or logic and return data representing list of movies
▪ Controller:
• Select appropriate view (pc, mobile, etc.)
▪ View
• Present data to user
MVCMovie
▪ Differentstructure visible in
Solution Explorer
• Controllers
• Models
• Views
8
2024/09/27
MVCMovie
▪Indexpage
▪Create Movie page
URL components
▪ Consider the URL:
http://localhost/Home/Privacy
• Where does the last two components come from?
• Home
• Privacy
▪ Home – Controller
▪ Privacy – Name of the method
• Index
method would be called by
default, if no method was specified
9
2024/09/27
Where are the styling instructions?
▪An ASP.Net Core MVC application still uses css files
• Where are they saved?
• How are they accessed?
▪You should investigate the matter of using bootstrap
• W3Schools can help with this
• Can you override formatting done using bootstrap?
Is there a master page?
▪Is there an equivalent to an ASP.net master page?
10
2024/09/27
Creating the ASP.NET Core MVC Application
▪File, New, Project; ASP.NET Core Web App (Model-View-Controller)
Creating the ASP.NET Core MVC Application
▪ It is possible to start with an empty application
• Add all components as required
▪ Alternatively, start with a skeleton application, and add / edit
as required
• Selecting Individual Accounts as Authentication type will provide
skeleton code for those requirements too
11
2024/09/27
Initial way forward
▪ Create a new ASP.NET Web application but with the MVC structure
in place
▪ This will give you a start-up web application with default settings, standard layout and a
basic bootstrap for formatting
▪ Add/Edit as required
MVC aspects to remember
▪Naming conventions are important
• HomeController linked to Home View
• MoviesController linked to Movies View
▪Each View object is linked to a Controller action method
(e.g. when Create method is called the Create View
object linked to the current controller will be used
12
2024/09/27
Working with SQL LocalDB (method 1)
▪ Start
by adding a Class for each of the required tables (in
Models folder)
• Add class
▪ Add Controller to work with that class
▪ Use Package Manager Console to get VS to create the
corresponding database table(s) for you
▪ ApplicationDbContext is created/updated
• Used by application to interact with the underlying database
• Connection string details in json file
Working with SQL LocalDB (method 1)
▪ Serverobjects can be viewed in SQL Server Object Explorer
▪ Connection string details in json file
13
2024/09/27
Working with SQL LocalDB (method 2)
▪Can be created from within VS
• ServerExplorer, Add item, SQL Server Database
• Add table with fields
• Add records
• Use VS options to create model (classes)
▪Must be in App_Data folder
▪Use Server Explorer
• Open tables
• Open table definition
Add controller to access model’s data
▪MVC Controller – Empty
▪MVC Controller with views, using Entity Framework
• Provides some skeleton methods to work with
• Model first, then let VS create tables
▪MVC Controller with read/write actions
• Provides
some skeleton methods to work with
• Database first, then let VS create class(es)
14
2024/09/27
Looking at the Controller
▪ Which Data Model to use (link to)
▪ Create an object to work with
▪ Methods linked to Views
Closer look at generated
Index view
▪ Take note of first line
▪ @model IEnumerable
<MVCMovie.Models.Movie>
▪ Controller is sending through a list of movies
from the table
▪ List template applied
▪ Try to match elements on page with tags in file
15
2024/09/27
Closer look at generated
Create view
▪ Take note of first line
▪ @model MVCMovie.Models.Movie
▪ Controller is sending through a movie
object
▪ Create template applied
▪ Try
to match elements on page with
tags in file
Adding Views
▪ When a method is called the controller needs to direct the user to the relevant view
▪ Right-click on the method, Add view
▪ View Templates exist to provide skeleton structure
• Create / Delete / Details / Edit / List / Empty
16
2024/09/27
Examining the rendered page
Specify style and layout
▪ There is no file named master, but
• Layout file functions as the blueprint for multiple pages
▪ In the Shared folder: _Layout.cshtml file
17
2024/09/27
Specify style and layout
▪ In the Shared folder: _Layout.cshtml file
• Link to CSS still in head element
<Body>
▪ Navigation
▪ The entire body of the
page (view) replaces
@RenderBody()
▪ Footer
18
2024/09/27
Practical 07 requirements
▪ Topic: Your favourite Book Series / Streaming Service Series / Movie Series
▪ Instructions to create the example application is available in MVC Application Tutorial.pdf
• Prac task is basically following those steps for a different application
▪ Create a new ASP.NET Core (MVC) web application with individual accounts authentication:
• Authentication: just select it at the start, nothing else to add for functionality at this stage
▪ Must have a database – single table sufficient
• Table must have at least 4 fields
Practical 07 requirements
▪ Update the Welcome and Privacy pages as follows:
• Welcome page: add some information about the topic you chose (e.g. info about Lord of the Rings
trilogy)
• Privacy page: Add your personal details (name, surname, student number and an image)
▪ Add a Model (instructions in tutorial)
▪ Add the Controller with the CRUD views – Create, Read, Update, Delete (instructions in
tutorial, make use of entity framework)
▪ Create the database table (instructions in tutorial); add at least 3 records to your
database (using the create option from within your application)
▪ Edit main navigation option text – add an option to the Index page of the new
controller
▪ Attempt to override some aspect of the css formatting – e.g. different background
colour
19
2024/09/27
Practical 07 requirements
▪ Create a word document to show that your web application runs, and what the pages
looks like in the browser
• Create a heading for each page in your web application
▪ Viewall the pages in your web application in the browser
▪ Make images/screenshots of each of the pages (you can use a tool like the Snipping tool)
• Paste the image for each page under the relevant heading
▪ Save the word document as a pdf document in the root of your web application
Prac 07 Submission
▪ As the C# ASP.NET Core MVC applications are quite big, you need to remove the
intermediate and output files before uploading to Moodle
▪ Click on Build, Clean Solution
▪ Compress this version, and upload
the compressed folder to Moodle
▪ Due on Wednesday 2 October, by
12:00 (mid-day)
▪ Image on the right shows the same
project – before and after selecting
to Clean Solution
20
2024/09/27
Resources
▪MVC Application Tutorial
▪ASP.NET Core Crash Course – C# App in One Hour
• Video tutorial available on F:\WRWV202
• Video handles more than what is required for prac 7, but some of the other aspects
will be covered in a follow up lecture
▪Why use MVC:
https://www.codeproject.com/Articles/821275/Webforms-vs-MVC-and-
Why-MVC-is-better
21
