Build single-page applications with the Blazor framework
Learn how to implement a clean structure with loose coupled components
See the advantages of using the INotifyPropertyChanged implementation from the MVVM pattern
Learn how to use Bootstrap in Blazor WebAssembly applications
Learn how to implement and use different kinds of state management
This course will cover all the basic techniques and mechanisms you need to create sophisticated web applications with ASP.NET Core 5.0 Blazor. You get an overview of the framework and what is essential. After the introduction, we will start writing a Blazor WebAssembly app. The main focus of this course is on Blazor WebAssembly but don’t worry. If you want to write Blazor Server apps, you can also attend this course because almost every technique we cover is applicable to Blazor Server apps. In some topics, I will cover the differences between Blazor WebAssembly and Blazor Server.
In some sections, we will go a little bit deeper, and we will examine what is under the hood. If you want to go through such a course very fast without thinking outside the box, this is probably the wrong course for you. Here I want to ensure that you get the techniques you need to write Blazor apps, and you should see why something works in a certain way.
If you are already an experienced .NET developer, you will see some familiar techniques we will use in this course, for example, the INotifyPropertyChanged interface from the MVVM pattern.
If you like the description, then you should enroll in the course!
Get Instant Notification of New Courses on our
Telegram channel.
–
It would be a pleasure for me to lead you through every section!
Regards,
Benjamin
About the course
Introduction
What you need
About me
Structure
Expectations/Goals
What is Blazor
Introduction
Hosting models
Why Blazor
Example project
Introduction
Mockups
Front end framework
Setup
Introduction
Open solution
Project structure
Project structure addition
Create the Organize project
Basic techniques
Introduction
Components
SignIn page
SignIn styling
Data binding
Event handling
EventCallbacks
EventCallbacks in Organize.WASM part 1
Flexbox
EventCallbacks in Organize.WASM part 2
Component parameters
Two way binding
Two way binding between components
Razor syntax
Validation
Create projects
Validation part 2
Validation part 3
Validation input
Attribute splatting
SignUp page
SignUp page implementation
Razor component library
Dropdown
Use the Dropdown
Routing
Query parameter
Route parameter
UserManager
UserManager use
Dependency injection
Introduction
Dependency injection in code
IUserManager usage
TestFake project
Constructor injection
Dependency injection types
Dependency injection types examples
Summary
Further techniques
Introduction
Items overview
Items list
Data structure
Entity classes
CurrentUserService
Inject the CurrentUserService
Navigation bar
Set CurrentUser
Display user information
Items in ItemsList
ItemElement component
ItemElement styles
ItemCheckBox
Expansion arrow & detail area
Item specific content
Templated components
Fragment styling
SASS
SASS variables
Cascading parameters
ItemElement color adjustments
ItemCheckBox color adjustments
Total number of items
Summary
Further techniques 2
Introduction
ItemEdit
Insert ItemEdit into ItemsOverview
ItemEdit general view
ItemEdit general view styling
Passing an item to ItemEdit
Data transfer via service
Show ItemEdit component
Close ItemEdit component
Retrieve items from service
Debugging
Transfer data via route parameters
Lifecycle methods
Unregister with IDisposable
ItemsEdit for item types
ChildItemEdit
UserItemManager
Use the UserItemManager
Test the ItemEdit component
Notify about property changes
INotifyPropertyChanged
Adjust all entity classes
PropertyChanged event handlers
Unregister event handlers
Add a new item
Add item in UserItemManager
Styling
Display new created items in list
Summary
JavaScript Interoperability
Introduction
Adding a resize handler
Invoke JavaScript function from C#
Adding a resize handler with a .NET reference
Adjust the navbar text
One last word
State management
Introduction
InMemory
DataAccess layer
ItemDataAccess
InMemory persistence service
Access IPersistence from DataAccess
Connect the ItemManager with ItemDataAccess
Testing the insert process
Extend test data
Implement the get process
Implement the update process
Delayed update calls
Implement the delete process
IndexedDB
Introduction
IndexedDB project
IndexedDB JavaScript access
C# IndexedDB class
SimplePropertyContractResolver
UserDataAccess
UserManager
Call InsertUserAsync method
Last adjustments
Test the IndexedDB
WebAPIAccess
Introduction
Authentication process
WebAPI project
WebAPI controllers
WebAPI test calls
WebAPIAccess
WebAPIAccess implementation
WebAPIUserDataAccess
AuthenticateAndGetUserAsync
Register services
Test sign in and sign up
Provide an authenticated state
Create an unauthorized area
Protect authorized area
CascadingAuthenticationState
AuthenticationStateProvider
Sign out
SetAuthenticationState workflow
Test the AuthenticationState workflow
Set and restore token
GetUserByTokenAsync
Test token restauration
Busy overlay
BusyOverlayService
BusyOverlay component
Use the Busy overlay
Modal for errors
SimpleAuthenticationStateProvider
Test InMemory and IndexedDB
Items loading adjustments
Authorization
Summary
Additional
Introduction
About page
Unregister from JavaScript events
Listen to ChildItems collection
Total number of items
Item done state in UI
Two scrollbars
Password checkbox
SignIn page as startup
Close ItemEdit component
Fix gender setting
Save IsDone state
Update ChildItem
Persistence type
Conclusion
