Description

This course will walk you through a whole real-world scenario for developing and deploying an ecommerce website with Blazor, and we will tackle numerous obstacles along the way. You will learn how to create a .NET 6 API from scratch and deploy .NET API, Blazor WASM, and Server to Azure in this course.

For years, JavaScript frameworks have dominated the front-end/client-side development. But things are about to change with Blazor! Blazor is an exciting new part of .NET Core (.NET 6) designed for building rich web user interfaces in C#. This course will help developers transition from building basic sample apps to implementing more real-world concepts, design patterns, and features. This course will provide you with a complete real-world scenario with Blazor, which will make you face many challenges and solve those issues as we proceed with the course. The course covers everything there is in Blazor, from Blazor Server to Blazor WASM applications that consume .NET 6 API. In this course, we will be using the latest .NET 6 along with Entity Framework Core and Stripe for payment processing, and also work with third-party Syncfusion and Radzen Blazor components. By the end of the course, you will become an expert and will be able to build your own website using Blazor Server, Blazor WASM, and .NET 6 (.NET Core) API and deploy it to Azure. All the resources and supportive files for this course are available at https://github.com/PacktPublishing/The-Complete-Blazor-Bootcamp---.NET-6-WASM-and-Server-

What You Will Learn

Manage admin features using Blazor Server
Learn authentication and authorization in Blazor Server and WASM
Integrate Stripe payments in Blazor WASM
Learn repository pattern and dependency injection
Deploy .NET API, Blazor WASM, and Server to Azure
Work with third-party Syncfusion and Radzen Blazor components

Audience

This course is for anyone interested in learning the fundamentals of Blazor using .NET 6, understanding the new file structure in Blazor WASM and Server application, or building an ecommerce website with Blazor WASM and Server in .NET 6!

You must be familiar with .NET Core, EF Core, and the .NET API, as well as have a basic understanding of how to use SQL Server Management Studio 2018 in Visual Studio 2022.

Approach

This is a hands-on course in which we will work with Blazor on a real-world scenario. As we progress through the course, you will be exposed to a wide range of challenges and learn how to address them.

Key Features

Create .NET API and consume it in the Blazor application * Build a real-world application using Blazor * Deploy .NET API, Blazor WASM, and Server to Azure

Github Repo

https://github.com/PacktPublishing/The-Complete-Blazor-Bootcamp---.NET-6-WASM-and-Server-

About the Author

Bhrugen Patel

Bhrugen Patel is a passionate and creative software engineer with a strong focus on simplicity and thorough details. He has been programming since high school and was involved with multiple web and desktop projects using .NET. He has a master's degree in computer science and a bachelor's degree in computer engineering. He also has many years of experience with .NET C# and .NET MVC. He enjoys teaching alongside his full-time job.

Course Outline

1. Introduction

1. Welcome to the Course

In this video, we will have a quick introduction to the course.

2. Project Demo

In this video, we will have a quick project demo.

3. What is Blazor

In this video, we will cover what is Blazor.

4. Blazor Client Versus Blazor Server

In this video, we will cover Blazor client versus Blazor server.

5. What This Course Is Not About

In this video, we will understand what this course is not about.

6. Create Project

In this video, you will learn how to create a project.

7. Run the Application

In this video, you will learn how to run the application.

8. Source Control

In this video, we will explore source control.

2. Blazor Files and Folders

1. .NET 6 Updates - Nullable

In this video, we will cover an overview of nullable reference types, which is added in .NET 6.

2. Blazor Files Overview

In this video, we will cover Blazor files overview.

3. Blazor Server Project Flow

In this video, we will understand the Blazor Server project flow.

4. Blazor Web Assembly Project Brief Overview

In this video, we will cover a brief overview of Blazor Web Assembly project.

5. Understand the Default Home Page

In this video, we will explore and understand the default home page.

6. Creating Razor Component

In this video, you will learn how to create a Razor component.

3. Blazor - Data and Property Binding

1. One-Way Data Binding

In this video, we will cover one-way data binding.

2. Two-Way Data Binding

In this video, we will cover two-way data binding.

3. Assignment 1 - Data Binding

In this video, we will work on assignment 1 data binding.

4. Assignment 1 Solution - Data Binding

In this video, we will work on assignment 1 solution - data binding.

5. Dropdowns and Data Binding

In this video, we will cover dropdowns and data binding.

6. Organizing Individual Product Playground

In this video, you will learn how to organize individual product playground.

7. Product List

In this video, we will work on a product list.

8. Assignment 2 - Bind Property

In this video, we will work on assignment 2 - bind property.

9. Assignment 2 Solution - Bind Property

In this video, we will work on assignment 2 solution - bind property.

10. Assignment 3 - Razor Component

In this video, we will work on assignment 3 - Razor component.

11. Assignment 3 Solution - New Razor Component

In this video, we will work on assignment 3 solution - new Razor component.

4. Blazor - Shared Components and Event Binding

1. Create Shared Component

In this video, you will learn how to create a shared component.

2. Passing Props to Shared Component

In this video, you will learn how to pass props to the shared component.

3. Assignment 4 - Shared Components

In this video, we will work on assignment 4 - shared components.

4. Assignment 4 Solution - Shared Components

In this video, we will work on assignment 4 solution - shared components.

5. Favorites Checkbox

In this video, we will work on the Favorites checkbox.

6. Event Callback

In this video, we will cover event callback.

7. Assignment 5 - Event Callback

In this video, we will work on assignment 5 - event callback.

8. Assignment 5 Solution - Event Callback

In this video, we will work on assignment 5 solution - event callback.

5. Blazor - Render Fragment, Attribute Splatting, and Routing

1. Render Fragment

In this video, we will cover render fragment.

2. Another Way for Basic Event Callback

In this video, we will explore another way for a basic event callback.

3. Multiple Render Fragment

In this video, we will cover multiple render fragment.

4. Assignment 6 - Render Fragment

In this video, we will work on assignment 6 - render fragment.

5. Assignment 6 Solution - Render Fragment

In this video, we will work on assignment 6 solution - render fragment.

6. Why We Need Attribute Splatting

In this video, we will understand why we need attribute splatting.

7. Attribute Splatting

In this video, we will cover attribute splatting.

8. Capture All Values with Splatting

In this video, you will learn how to capture all values with splatting.

9. Passing Parameters at Multiple Levels

In this video, you will learn how to pass parameters at multiple level.

10. Cascading Parameters

In this video, you will learn how to cascade parameters.

11. Cascading Parameter with Name

In this video, you will learn how to cascade parameters with name.

12. Routing Basics

In this video, we will cover routing basics.

13. Routing - Query Parameters

In this video, we will cover routing - query parameters.

14. Routing - Navigation Manager

In this video, we will cover routing - navigation manager.

6. Blazor - JavaScript

1. Confirm Box in Blazor

In this video, you will learn how to confirm box in Blazor.

2. Toastr JS

In this video, we will cover Toastr JS.

3. JsRuntime Extensions

In this video, we will cover JsRuntime extensions.

4. Assignment 7 - SweetAlert

In this video, we will work on assignment 7 - SweetAlert.

5. Assignment 7 Solution - SweetAlert

In this video, we will work on assignment 7 solution - SweetAlert.

6. Referencing Components

In this video, we will cover referencing components.

7. Remove Default Components

In this video, you will learn how to remove default components.

7. Blazor Lifecycle

1. OnInitialized Lifecycle

In this video, we will cover the OnInitialized lifecycle.

2. OnParameterSet Lifecycle

In this video, we will cover the OnParameterSet lifecycle.

3. OnAfterRender

In this video, we will cover OnAfterRender.

4. Render and StateHasChanged

In this video, we will cover Render and StateHasChanged.

8. Model and Repository

1. Add Projects to Solution

In this video, you will learn how to add projects to a solution.

2. Set Up ApplicationDbContext

In this video, you will learn how to set up ApplicationDbContext.

3. Add DbContext to Container

In this video, you will learn how to add DbContext to Container.

4. Push Category to Database

In this video, you will learn how to push category to database.

5. Category DTO

In this video, we will cover the category DTO.

6. ICategory Repository

In this video, we will cover the ICategory repository.

7. Category Repository Setup

In this video, we will cover category repository setup.

8. AutoMapper

In this video, we will cover AutoMapper.

9. Implement Category Repository

In this video, you will learn how to implement category repository.

9. Category CRUD

1. Create Category List Component

In this video, you will learn how to create category list component.

2. Forms in Blazor Part 1

In this video, you will learn about forms in Blazor part 1.

3. Forms in Blazor Part 2

In this video, you will learn about forms in Blazor part 2.

4. Validations in Blazor Form

In this video, we will cover validations in Blazor form.

5. Create Category

In this video, you will learn how to create category.

6. List Category

In this video, we will work on list category.

7. Loading Spinner

In this video, we will work on loading spinner.

8. Load Category on Edit

In this video, we will cover load category on edit.

9. Edit Category

In this video, you will learn how to edit category.

10. Delete Component

1. Delete Confirmation Component

In this video, you will learn how to delete confirmation component.

2. Delete Method and Assignment 8

In this video, we will work on assignment 8.

3. Assignment 8 - Delete Confirmation EventCallBack

In this video, we will work on assignment 8 solution - delete confirmation EventCallBack.

4. Processing on Delete Confirmation

In this video, you will learn how to process a delete confirmation.

5. Cleaning Up Task

In this video, you will learn the clean-up task.

6. Assignment 9 - OnAfterRenderAsync

In this video, we will work on assignment 9 - OnAfterRenderAsync.

7. Assignment 9 Solution - OnAfterRenderAsync

In this video, we will work on assignment 9 solution - OnAfterRenderAsync.

8. Async Repository

In this video, we will cover async repository.

11. Products

1. Section Introduction

In this video, we will cover a quick introduction to the learning objectives of this section.

2. Create Product Table

In this video, you will learn how to create a product table.

3. Product DTO

In this video, we will cover product DTO.

4. Assignment 10 - Product Repository

In this video, we will work on assignment 10 - product repository.

5. Assignment 10 Solution - Product Repository

In this video, we will work on assignment 10 solution - product repository.

6. Product List Component

In this video, we will cover product list component.

7. Product Upsert Component

In this video, we will cover the product Upsert component.

8. Error Solving in Blazor

In this video, we will work on error solving in Blazor.

9. Category Dropdown

In this video, we will cover category dropdown.

10. FileUpload Service

In this video, we will cover the FileUpload service.

11. Handle File Upload

In this video, we will handle file upload.

12. Create Product

In this video, you will learn how to create product.

13. Update Product

In this video, we will learn how to update product.

14. Delete Product

In this video, we will learn how to delete product.

15. Syncfusion Components

In this video, we will work with Syncfusion components.

16. Syncfusion RichTextEditor in Action

In this video, we will see Syncfusion RichTextEditor in action.

17. Create Products

In this video, you will learn how to create products.

12. Product Pricing

1. What We Will Cover

In this video, we will understand what we will cover in this section.

2. Product Price Model and DTO

In this video, we will work with product price model and DTO.

3. Assignment 11 - Product Price Repository

In this video, we will work on assignment 11 product - price repository.

4. Assignment 11 Solution - Product Price Repository

In this video, we will work on assignment 11 solution - product price repository.

5. Load Product Details and Product Price

In this video, we will work with loading product details and product price.

6. Show Product Summary

In this video, you will learn how to show product summary.

7. Add Syncfusion DataGrid

In this video, you will learn how to add Syncfusion DataGrid.

8. Syncfusion DataGrid Settings Part 1

In this video, we will work on Syncfusion DataGrid settings part 1.

9. Syncfusion DataGrid Settings Part 2

In this video, we will work on Syncfusion DataGrid settings part 2.

10. Syncfusion DataGrid Settings Part 3

In this video, we will work on Syncfusion DataGrid settings part 3.

11. Syncfusion DataGrid Settings Part 4

In this video, we will work on Syncfusion DataGrid settings part 4.

13. Tangy API

1. Create Tangy API

In this video, you will learn how to create the Tangy API.

2. Add Connection String to API Project

In this video, you will learn how to add connection string to the API project.

3. Success Error DTO

In this video, we will cover success error DTO.

4. Product Controller API Endpoint

In this video, we will cover the product controller API endpoint.

5. Return Product Prices from Product API

In this video, you will learn how to return product prices from product API.

14. Tangy Client - WASM

1. Add App Settings to WASM Project

In this video, you will learn how to add app settings to the WASM project.

2. Changing Default Navigation

In this video, you will learn how to change default navigation.

3. Basic Settings Such as Server Project

In this video, we will cover basic settings such as server project.

4. Product Service Interface

In this video, we will cover product service interface.

5. Product Service Calls

In this video, we will cover product service calls.

6. Home Page UI (User Interface)

In this video, we will cover Home Page UI.

7. Retrieve Products from API

In this video, we will retrieve products from API.

8. Home Page in Action

In this video, we will cover the home page in action.

9. Details UI

In this video, we will cover the details UI.

10. Details VM

In this video, we will cover details VM.

11. Selecting Product Price

In this video, you will learn how to select product price.

12. Details UI - Add to Cart Toggle

In this video, we will cover the details UI - add to cart toggle.

15. Shopping Cart and Summary

1. Add Blazored Local Storage

In this video, you will learn how to add Blazored local storage.

2. Cart Service

In this video, we will explore cart service.

3. Implement Cart Service

In this video, you will learn how to implement cart service.

4. Cart Service Add to Cart in Action

In this video, we will work with cart service and learn how to add to cart in action.

5. Shopping Cart UI

In this video, we will cover the shopping cart UI.

6. Shopping Cart Load Data

In this video, we will cover shopping cart load data.

7. Increment and Decrement Cart

In this video, we will cover increment and decrement cart.

8. Displaying Cart Counter

In this video, you will learn how to display a cart counter.

9. Update NavBar on Cart Update

In this video, you will learn how to update NavBar on cart update.

16. Order

1. Create Order Header and Detail

In this video, you will learn how to create order header and detail.

2. Create Order Model and DTO

In this video, you will learn how to create order model and DTO.

3. Order Repository

In this video, we will cover order repository.

4. Order Create Method

In this video, we will cover order create method.

5. Order Repository Implementation

In this video, we will cover order repository implementation.

6. API - Create order controller

In this video, you will learn how to create an order controller.

7. Order Service

In this video, we will cover order service.

8. Order Summary Part 1

In this video, we will cover order summary part 1.

9. Order Summary Part 2

In this video, we will cover order summary part 2.

10. Order Summary UI

In this video, we will cover order summary UI.

17. Authentication and Authorization - Blazor Server

1. Scaffold Identity in Blazor Server

In this video, we will cover scaffolding identity in Blazor Server.

2. Add Identity Tables

In this video, you will learn how to add identity tables.

3. Add Columns to ASP Net Users Table

In this video, you will learn how to add columns to ASP Net users table.

4. Register First User

In this video, we will work on registering the first user.

5. Login and Logout

In this video, we will cover login and logout.

6. Show Email of Logged in User

In this video, you will learn how to show email of logged in user.

7. Authorize Attribute

In this video, we will cover the authorize attribute.

8. Authentication State in OnInitialized

In this video, we will cover authentication state in OnInitialized.

9. Create Admin User

In this video, you will learn how to create admin user.

10. Roles in Action

In this video, we will see roles in action.

11. DbInitializer

In this video, we will cover DbInitializer.

12. Seed New Database

In this video, we will cover seed new database.

13. Authorization in NavMenu

In this video, we will cover authorization in NavMenu.

18. Authorization in API

1. Add Identity to API

In this video, you will learn how to add identity to API.

2. Account Controller

In this video, we will cover account controller.

3. SignIn SignUp DTO

In this video, we will cover SignIn SignUp DTO.

4. SignUp API Endpoint

In this video, we will cover SignUp API endpoint.

5. Demo - SignUp API

In this demo video, we will work on SignUp API.

6. SignIn API Endpoint Part 1

In this video, we will cover SignIn API endpoint part 1.

7. API Settings Section

In this video, we will cover the API settings section.

8. SignIn Helper Methods

In this video, we will cover SignIn helper methods.

9. SignIn Endpoint Part 2

In this video, we will cover SignIn endpoint part 2.

10. Add Authentication to API

In this video, you will learn how to add authentication to the API.

11. Add Bearer to Swagger

In this video, you will learn how to add Bearer to Swagger.

19. Blazor WASM - Authentication and Authorization

1. JwtParser

In this video, we will cover JwtParser.

2. Add AuthenticationState Provider

In this video, you will learn how to add the AuthenticationState provider.

3. Custom Authentication State Demo

In this demo video, we will work on a custom authentication state.

4. IAuthenticationSerivce

In this video, we will cover IAuthenticationSerivce.

5. Login Service

In this video, we will cover login service.

6. Register and Logout Service

In this video, we will cover register and logout service.

7. Register and Login UI

In this video, we will cover register and login UI.

8. Register Component

In this video, we will cover the register component.

9. Registration in Action

In this video, we will cover registration in action.

10. Splitting Code Files

In this video, you will learn how to split code files.

11. Login in Action

In this video, we will get to see login in action.

12. Toggle Navbar on Authorization

In this video, we will toggle Navbar on authorization.

13. Login and Logout in Action

In this video, we will cover login and logout in action.

14. Avoid Force Load on Auth State Change

In this video, you will learn how to avoid force load on auth state change.

15. Redirect to Login

In this video, you will learn how to redirect to login.

16. Load User Details

In this video, you will learn how to load user details.

20. Stripe Payment

1. Call Create Order from Summary

In this video, you will learn how to call create order from summary.

2. Create Order Header and Details

In this video, you will learn how to create order header and details.

3. Create Stripe Account

In this video, you will learn how to create Stripe account.

4. Add Stripe to API Project

In this video, you will learn how to add Stripe to the API project.

5. Payment Service in Blazor WASM

In this video, we will cover payment service in Blazor WASM.

6. Stripe Payment Controller Method

In this video, we will cover the Stripe payment controller method.

7. Call Stripe

In this video, we will cover Call Stripe.

8. Issue with Order Total

In this video, you will learn how to solve an issue with order total.

9. Order Confirmation

In this video, we will work on order confirmation.

10. Stripe Session Status and Payment Successful

In this video, we will cover Stripe session status and payment successful.

11. Summary Processor

In this video, we will work on a summary processor.

21. Order Management

1. Create Order List Component

In this video, you will learn how to create order list component.

2. Radzen Component

In this video, you will learn about the Radzen component.

3. Order Details Component

In this video, you will learn about the order details component.

4. Order Details UI

In this video, you will learn about order details UI.

5. Update Order Details

In this video, we will work on updating order details.

6. Ship Order

In this video, we will work on shipping the order.

7. Payment Intent ID

In this video, we will work on Payment Intent ID.

8. Refund Order

In this video, we will work on refunding the order.

22. Email and CSS Isolation

1. Send Email Using MailKit and MimeKit

In this video, you will learn how to send email using MailKit and MimeKit.

2. Send Email Using SendGrid

In this video, you will learn how to send email using SendGrid.

3. Blazor WebAssembly Package Issues

In this video, we will explore Blazor WebAssembly package issues.

23. Azure Deployment

1. Azure SQL Database

In this video, we will cover Azure SQL database.

2. Blazor Server Deployment

In this video, we will cover Blazor Server deployment.

3. API Deployment

In this video, we will cover API deployment.

4. Blazor Client Deployment

In this video, we will cover Blazor client deployment.

Course Images

The Complete Blazor Bootcamp - .NET 6 (WASM and Server)

By Packt

Booking options

Highlights

Description

Course Content

About The Provider

Tags

Reviews