This is a practical mini Blazor WebAssembly application with ASP.NET
Core Web API based middle tier and SQL Server database back-end.
This application covers following contents:
1. UI
1) Add new product
2) Edit product
3) Delete product
4) QuickGrid
5) Pagination & Items Per Page selector
6) Column based sorting
7) Custom filter
8) Row highlight
9) Confirmation popup (using JavaScript in Blazor)
10) Clear Form
11) Form validation and validation summary
12) API Service Injection in Blazor
2. API
1) appsetting.json and API Base URL
2) Service injection in the API's Program.cs
3) Adding CORS policy
4) Creating Repository service by using Dapper ORM
5) Creating end points of the API controller
6) Calling API's end points in the Blazor WebAssembly UI
3. Back-end
1) Creating table
2) Inserting some data
Course Contents
(0:00:00) Introduction
1. Contents to be covered in this Blazor WASM mini CRUD application.
2. This application includes three parts:
1) UI: Blazor WebAssembly
2) Middle Tier: ASP.NET Core Api
3) Back-end: SQL Server database
3.Covered topics in each part
(00:02:30) Start of the Back-end Part
4. Creating a Products table
5. Inserting some test product data
(00:04:50) Creation of the ASP.NET Core API Middle Tier
6. Connection String
7. Service injections in Program.cs
8. Installing related NuGet Packages (Dapper ORM etc.)
9. Adding CORS policy
(00:16:48) Creating a shared library (using/referencing in both UI and API projects)
10. Creating/adding a BlazorCrudSharedLib project
11. Creating a "Project" class/object. This object will be used in both UI and API projects
(00:19:51) IProductRepository interface
(00:22:43) ProductRepository service implementation
12. GetProductsAsync service method
13. GetProductByIdAsync service method
14. AddProductAsync service method
15. UpdateProductAsync service method
16. DeleteProductAsync service method
(00:31:14) Injecting the Repository service in the Program.cs file
(00:32:20) Creating ProductsController
17. Injecting the IProductRepository/ProductRepository service in the controller
18. Creating ProductsController's end points (API end points) based on the ProductRepository service methods
(00:44:03) Testing of the API's end points
(00:46:01) Creating BlazorCrudUi project
19. appsettings.json
20. apiBaseUrl
21. Installing Microsoft.AspNetCore.Components.QuickGrid NeGet package
(00:54:02) Creating Productpage.razor
22. Adding the Productpage to the NavMenu
(00:55:40) Adding application URL to the CORS as ".WithOrigins(...)"
(1:00:00) Getting "ProductList" from database via API end point
(1:00:51) Adding QuickGrid to the page.
23. Populating QuickGrid's Items and PropertyColumns
24. Sortable columns and column value alignments
(1:09:41) Data display in the QuickGrid
(1:10:26) TemplateColumn to the QuickGrid
25. Adding custom filter
26. Displaying boolean values as checkboxes in the column
(1:18:08) Starting to add an "Action" column including "Edit" and "Delete" icon buttons
27. Adding Edit and Delete icons
28. Pagination and Pagination state
(1:26:29) Adding Edit Form
29. Adding DataAnnotationValidator
30. Adding ValidationSummary
31. Adding edit form elements
(1:30:48) Adding SaveProduct(Update product) method and calling the end point of the API
(1:33:49) Edit form display
32. Editing product and save/update in the database
(1:41:04) Adding background highlight to the product which is being edited
(1:46:59) Implementing the Delete product functionality
33. Delete product confirmation popup
(1:54:31) Adding new product functionality
34. "+ Add" new product toggle button to show/hide the add new product form
35. Add new product form elements and "Add Product" button
36. Creating new product from the new product form
37. Calling add new product API end point and save the product to database
(2:12:22) Adding Page Size selector
(2:20:30) Final adjustments
38. Adding stripe effect to the QuickGrid rows (page/component specific CSS file in Blazor)
39. Adding "Clear" form button to the add new product form
(2:28:09) Adding class annotations to the "Product" class/object
(2:31:40) Final summary
1 авг 2024
