Learn Blazor WASM with Practical Example Application

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