Giter Club home page Giter Club logo

jeremylikness / blazorwasmefcoreexample Goto Github PK

View Code? Open in Web Editor NEW
163.0 19.0 53.0 495 KB

Example of a Blazor WebAssembly project that uses Entity Framework Core on the server for data access.

Home Page: https://blog.jeremylikness.com/blog/build-a-blazor-webassembly-line-of-business-app/

License: MIT License

C# 68.90% HTML 24.82% CSS 4.08% Dockerfile 2.20%
blazor blazor-webassembly blazor-client blazor-application efcore ef-core entity-framework entity-framework-core

blazorwasmefcoreexample's Introduction

BlazorWasmEFCoreExample

Image of data grid

Example of a Blazor WebAssembly project that uses Entity Framework Core on the server for data access.

Do you prefer Blazor Server instead? No problem! The same project is implemented for server here.

I created this series of blog posts to explain the project in detail (note: series is valid up to commit e6ac27b):

For the latest version, read about the latest round of refactoring here:

Thank you

๐Ÿ™ Thanks to John Barrett for helping identify initial issues.

Features

  • Application hosted authentication and registration
  • Extended identity features to audit user creation, modification, email confirmation, and deletion
  • Entity Framework Core
  • Multiple data contexts
  • Entity Framework Core logging
  • Shadow properties: the database tracks row version, the user who created the entity and timestamp, and the user who last modified the entity and timestamp, without having to define these properties on the C# domain class
  • Automatic audit that tracks changes with a before/after snapshot and is generated at the data context level
  • Optimistic concurrency with delta resolution (when the database changes, the UI shows the changes so the user can overwrite or abort)
  • Entity validation on the client and server using data annotations
  • A grid that features paging, sorting, and filtering with debounce (i.e. typing three characters will result in just one database round trip)
  • Dynamic filtering and sorting with serverside evaluation
  • 99% of the UI is contained in a Razor class library that is usable from both Blazor WebAssembly and Blazor Server applications
  • Example of the repository pattern: the client and server use the same interface with a different implementation
  • Use of IHttpClientFactory to create a custom client with an authorization message handler

Quick start

Prerequisites

  • .NET Core SDK (3.1.300 or later)
  • Visual Studio Code, OR
  • Visual Studio 2019 16.6 or later

Code and Connection Strings

  1. Optionally fork the repository.

  2. Clone the repository (or your fork):

    git clone https://github.com/jeremylikness/BlazorWasmEFCoreExample.git

  3. If you don't have localdb installed, update appsettings.json and appsettings.Development.json in the ContactsApp.Server project to point to a valid database instance.

  4. The DefaultConnection is used for identity and can have any database name.

  5. The blazorcontactsdb is used for the application database and must match ContactContext.BlazorContactsDb in the ContactsApp.DataAccess project (the default value is blazorcontactsdb).

Visual Studio

  1. Open the solution file.

  2. Ensure the ContactsApp.Server project is set as the start up project.

  3. Open the NuGet Package Manager -> Package Manager Console.

  4. In the console, with the server project selected, create the identity migration by typing:

    Add-Migration -Context ApplicationAuditDbContext Initial

  5. After it is complete, apply the migration:

    Update-Database -Context ApplicationAuditDbContext

  6. You are ready to launch the application.

See note at the end of the next section.

Visual Studio Code

  1. Navigate to the ContactsApp/Server folder.

  2. If you haven't installed the EF Core Command Line Interface (CLI), install it by following these instructions. Choose the latest stable version (the project file currently ships with version 3.1.4).

  3. Run

    dotnet ef migrations add --context ApplicationAuditDbContext Initial

    to set up the identity database migrations.

  4. Run

    dotnet ef database update --context ApplicationAuditDbContext

    to create the identity database.

  5. Type

    dotnet run

    to start the server. Navigate to the port specified.

Note: the demo app is designed to create and populate the contacts database the first time you open the web page. This may result in a delay of up to several minutes on first load. This is normal and is just used to make setup easier. Subsequent runs should load faster.

Migrations for Contacts Database

The context for contacts (ContactContext) resides in the ContactsApp.DataAccess assembly. It is a .NET Standard class library and cannot be executed directly. I created a ContactContextFactory in the ContactsApp.Server project to enable migrations by using the SQL Server provider and loading the connection string. To create a migration, you must specify the executable startup project and the context name. This command will create a migration in the Migrations folder named InitialContact (assuming this is run from the root of the solution directory):

dotnet ef migrations add --startup-project ContactsApp/Server --context ContactContext InitialContact

Use the --namespace parameter to specify a different namespace to help avoid conflicts with the identity context.


Submit any feedback, questions, suggestions, or issues here.

Regards,

Jeremy Likness

@JeremyLikness

blazorwasmefcoreexample's People

Contributors

274188a avatar jeremylikness avatar timheuer avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

blazorwasmefcoreexample's Issues

Identity Schema does not get created

Following on from running the cmd with the --conext specifiied:

update-database -Context ApplicationAuditDbContext

(my identity db is 'JLContactsAppIdentityDb') the update does not seem to pick up the expected schema for any Identity objects.

update-database -Context ApplicationAuditDbContext
Build started...
Build succeeded.
Microsoft.EntityFrameworkCore.Database.Command[20101]
Executed DbCommand (331ms) [Parameters=[], CommandType='Text', CommandTimeout='60']
CREATE DATABASE [JLContactsAppIdentityDb];
Microsoft.EntityFrameworkCore.Database.Command[20101]
Executed DbCommand (75ms) [Parameters=[], CommandType='Text', CommandTimeout='60']
IF SERVERPROPERTY('EngineEdition') <> 5
BEGIN
ALTER DATABASE [JLContactsAppIdentityDb] SET READ_COMMITTED_SNAPSHOT ON;
END;
Microsoft.EntityFrameworkCore.Database.Command[20101]
Executed DbCommand (6ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
SELECT 1
Microsoft.EntityFrameworkCore.Database.Command[20101]
Executed DbCommand (12ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
CREATE TABLE [__EFMigrationsHistory] (
[MigrationId] nvarchar(150) NOT NULL,
[ProductVersion] nvarchar(32) NOT NULL,
CONSTRAINT [PK___EFMigrationsHistory] PRIMARY KEY ([MigrationId])
);
Microsoft.EntityFrameworkCore.Database.Command[20101]
Executed DbCommand (1ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
SELECT 1
Microsoft.EntityFrameworkCore.Database.Command[20101]
Executed DbCommand (13ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
SELECT OBJECT_ID(N'[__EFMigrationsHistory]');
Microsoft.EntityFrameworkCore.Database.Command[20101]
Executed DbCommand (2ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
SELECT [MigrationId], [ProductVersion]
FROM [__EFMigrationsHistory]
ORDER BY [MigrationId];
Done.
PM>

image

Question: Code First Migration using the database context 'ContactContext'

I been looking at approaches to carry out code first migrations using the Context for 'blazorcontactsdb' database (ContactContext). For example - adding a new property on the ContactsApp.Model.Contact class.

image

So the context obviously exists in a different assembly from ContactsApp.Server.

Is there some way of running a migration eg dotnet ef migrations add xxx -o Migrations with a switch so it can find the context in another project?

Cheers

Contact Edit fails: 'Could not find contact with id 3'

View and Delete work as expected.

<p>Could not find contact with id @ContactId.</p> is the error message. That extra . looks like a problem but removing it changes nothing.

Did I break something after download?
Kal

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.