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