Tutorial Aula 5

Pprt

Uploaded by

Rui Soares

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

12 views11 pages

Tutorial Aula 5

Pprt

Uploaded by

Rui Soares

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 11

Web Engineering 2024/2025

Tutorial exercises

Tutorial for Class number 5

This exercise explores the submission of files (documents, images, etc.) through web
forms. Emphasizes the essential characteristics of the form and the proper processing
of the submitted data.
In the third part is demonstrated the necessary steps for the delivery of the stored
documents (files download)
Upload and download files.
Start to build a base web project:

• From the Visual Studio, create a new project ASP.NET Core Web App (Model-
View-Controller). Name de project Aula05.

1st step:

• Create a model class (with right mouse button over Models folder in Solution
Explorer).
Web Engineering 2024/2025
Tutorial exercises

• Use Book.cs name to the file.

• This class intends to represent a Book entity in a Database system.

2nd Step

• Add a controller with the template “MVC Controller with views, using Entity
Framework”. This will add to project one controller class and all views code for
CRUD operations over the model data.
Web Engineering 2024/2025
Tutorial exercises

• Choose the Category model class choose an existing Data Context class or create a
new one.
As we still don’t have any Data Context in project, we need to create a new one. The
project can have multiple Data Context classes, but we also can add a new model set to
an existing data context (when the new data set is intended for the same database).

Now we are ready to prepare the database with some commands executed in
“Package Manager Console”.
Web Engineering 2024/2025
Tutorial exercises

We start by creating a migration class by executing the command

add-migration <name> using AddBook as the migration name.

Next, we will create the database by executing the command update-database.

Third step

• run on https://localhost:????/Books/Create to create a new Book.

The CoverPhoto and Document inputs, must be a button to select a file from the
computer.
Web Engineering 2024/2025
Tutorial exercises

• Alter the view, adding enctype="multipart/form-data" property to form element

to allow the formulary to send files to the web server.
• Alter the view, changing the input type of CoverPhoto and Document fields to
type="file". This change defines a button to choose a file from the computer file
system.

• Create a new class BookViewModel.

The use of a ViewModel is useful when we want to create a View in which we

intend to introduce data referent to several entities (mixed model) or when the
data type is not compatible with the entity data defined in model.
Web Engineering 2024/2025
Tutorial exercises

• Alter the View Create to adapt to the BookViewModel

Create two subfolders inside wwwroot folder (with right mouse button over wwwroot
folder in Solution Explorer) and name them Documents and Cover.

These are the folders where submitted files will be stored.

Web Engineering 2024/2025
Tutorial exercises

To access these folders in the disc of the server machine, is needed to use the
IWebHostEnvironment interface. The WebRootPath property gets the absolute path to
the directory that contains the application content files.