Sample ASP.NET Core Razor page with EF Core

This repository provides a glimpses into the basics for building an ASP.NET Core Razor page application using Microsoft SQL-Server for a database and Microsoft EF Core 6 (Entity Framework Core).

The main app is PizzaShop, other projects are secondary.

Note None of the projects are setup for IIS. For details, see IIS.docx

Razor Pages

Razor Pages is a newer, simplified web application programming model. It removes much of the ceremony of ASP.NET MVC by adopting a file-based routing approach. Each Razor Pages file found under the Pages directory equates to an endpoint. Razor Pages have an associated C# objected called the page model, which holds each page's behavior. Additionally, each page works on the limited semantics of HTML, only supporting GET and POST methods.

💡 A view is a mixture of HTML/CSS and C#

🔸 CSS Isolation scopes ¹ which provides an elegant way to associate a style sheet to one page

{Your_namespace}.styles.css

What is the main difference between Razor pages and MVC?

What is the main difference between Razor pages and MVC? Image result for Razor Pages Razor Page is similar to the HTML page but it loads data easily. A Razor Page is almost the same as ASP.NET MVC's view component. It has basically the syntax and functionality same as MVC. The basic difference between Razor pages and MVC is that the model and controller code is also added within the Razor Page itself.

Add a model to a Razor Pages app

The model classes are known as POCO classes (from "Plain-Old CLR Objects") because they don't have a dependency on EF Core. They define the properties of the data that are stored in the database.

🔸 See this tutorial on adding a model

🔸 See this tutorial on scaffolding pages

See also

Razor Pages with Entity Framework Core in ASP.NET Core - Tutorial 1 of 8

Setting up the database

Note This may fail for some developers dependent on how Windows permissions have been setup.

👉 With this solution open, from Visual Studio menu, select PizzaShop Debug Properties (use the small down arrow button)

👉 Change CREATE_DB from No to Yes

👉 Build the project

👉 With Solution Explorer open, right click on the project node and select rebuild.

👉 Click on the green button to run the project

Web site appear, for now close the browser.

👉 Go back to debug properties and revert from Yes to No so that next time the project runs the database is not recreated.

Notes

• The database will reside under C:\users\your_login as OED.Pizza.mdf and OED.Pizza_log.ldf
• To connect to the database via SQL-Server Management Studio (SSMS) use (localdb)\MSSQLLocalDB when prompted for a server

Database schema

Sample conventional SELECT

DECLARE @OrderId AS INT = 2;
SELECT
        O.Id,
        O.OrderPlaced,
        O.OrderFulfilled,
        O.CustomerId,
        C.FirstName,
        C.LastName,
        OD.Quantity,
        OD.ProductId,
        P.[Name]
FROM
        dbo.Orders AS O
    INNER JOIN
        dbo.Customers AS C
            ON O.Id = C.Id
    INNER JOIN
        dbo.OrderDetails AS OD
            ON O.Id = OD.Id
    INNER JOIN
        dbo.Products  AS P
            ON O.Id = P.Id
WHERE
        (O.Id = @OrderId);

How it's done with EF Core

• Include and ThenInclude are representative for JOIN see loading related data

public static async Task GetOrder(int orderId)
{
    var result = await _context.Orders
        .Include(o => o.Customer)
        .Include(o => o.OrderDetails)
        .ThenInclude(o => o.Product)
        .FirstOrDefaultAsync(x => x.Id == orderId);
}

When running the application, I have setup that EF Core statements are shown in Visual Studio Output window. Example shown below. This can be helpful when there are performance issues to diagnose what needs to be done to improve performance.

💡 We can tag EF Core statements with TagWith and TagWithCallSite.

Note Example of what EF Core produces under the covers when executing, in this case a SELECT statement.

SELECT [o].[Id], [o].[CustomerId], [o].[OrderFulfilled], [o].[OrderPlaced], [c].[Id], [c].[Address], [c].[Email], [c].[FirstName], [c].[LastName], [c].[Phone]
FROM [Orders] AS [o]
INNER JOIN [Customers] AS [c] ON [o].[CustomerId] = [c].[Id]
ORDER BY [o].[OrderPlaced]

Publishing

💡 See the following page for running from publish folder via PowerShell.

Currently have not successfully figured out how to properly publish to IIS

Footnotes

1. CSS isolation means creating a CSS file like '.cshtml.css' for each razor page/view(.cshtml). CSS isolation helps to avoid dependencies on global styles that will be very hard to maintain and also avoid style conflicts among the nested content. ↩