CREATE WEB CONTENT WITH ASP.NET CORE MVC AND RAZOR PAGES

NET CORE

As a first step, I leave you the link on azure of the complete project. Some operations have been disabled, however to get an idea about what we will develop is more than enough. This is the link: https://my-course.azurewebsites.net

Let’s extract a couple of points from the specifications. Two asks us to make a list of courses.

Punto due

If a user finds a course he or she likes, as described in step five, he or she will enter a course detail page with the option to register to purchase the course.

Punto cinque

ASP.NET Core provides us with two equally good technologies for implementing the project’s UI. Both are based on the same technology stack, the only difference being in how files are stored within the project.

UI

Let’s start by looking at the first ASP.NET Core MVC. The Model contains the Business logic and accesses the database. Once we have extracted the data from the database, we will pass it to the View, which is responsible for presenting the data in HTML format by taking advantage of the Razor engine. Finally, there is the controller that handles the user request, passes the data first to the Model then to the View.

MVC

Let us look at the MVC pattern in more detail. Suppose a user wants to view the details of the course with ID=5, extracts the information from the request and passes it to the Model. The Model with the data provided by the Controller extracts the data from a database and still in raw format puts it into an object that it passes back to the Controller. The Controller turns the request over to the View to create well-formatted, user-pleasing HTML output, which it then passes back to the Controller and the latter can send the response to the client.

Pattern MVC

Only the controller is the essential element, in some niche situations the View may not be necessary

MC

Summary slide.

Riepilogo

CREATE A CONTROLLER AND ITS ACTIONS

The class of a Controller must stand by conventions. The first part is arbitrary, the second Controller must take on that name. It derives from the Controller class that gives us facilities. Inside are the methods, the type returned, and the method name, which can be arbitrary. Returns a View object defined in the Controller base class. The object passed to the View serves the View to produce HTML markup.

Controller

Normally the Index action is the one that returns the list of courses, while Detail.

Tipi di risultato di un Action

I’ll show you with an image how the directories should be organized.

Directory

Note that in the Views there must be a folder having the same name as the first part of the Controller Courses and its action Detail in the example, always having the same name as the Action of the controller. This is by convention. The .cshtml extension denotes a View containing HTML but also C# code. Let’s see how the Razor Pages are organized.

Razor page

We create our first Controller.

CorsesController

ADD ROUTING MIDDLEWARE

The Routing Middleware goes to see if there is a Controller called Courses, having an action Detail and finding match it can handle the request. calls the Controller with its Action, and the Controller will return the command to the Middleware producing a response.

Routing

Let’s see once the Routing Middleware is configured what the page looks like. Find the detailed explanation in the downloadable code from GITHUB.

Browser

Let’s see how it all works graphically. The following request arrives. /courses/detail/5. Routing Middleware asks: Does the route of the request conform to the set template? The answer is affirmative since the request contains the three fragments. ASP.NET Core MVC services added with the AddMvc() line go looking for a controller called CoursesController, and pass the ball to its Action Detail by providing The id 5. This is sufficient to produce the http response.

Routing

LINK TO CODE ON GITHUB

GITHUB

Download the code for section05 and section06 routing.