Blazor WASM and Minimal APIs CRUD Mini Course (pt. 2 - front end)
3.2 هزار بار بازدید -
3 سال پیش
-
Learn how to get Blazor
Learn how to get Blazor WASM up and running together with ASP.NET Minimal APIs in this mini course. The end result is a nice minimalistic CRUD web app that can you can use to kickstart your own CRUD apps.
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
PART 1: Blazor WASM and Minimal APIs CRUD Min...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
I'll also cover publishing the projects to the Microsoft Azure Cloud on free tier resources. We'll publish the WebAssembly app to an Azure Static Web App Resource and publish the API to an Azure App Service Resource.
The mini course is split into 2 parts. This is the second part and we'll focus on creating the Blazor WASM front end.
The technologies we'll use are:
Both parts:
• .NET 6 LTS
• C# 10
First part:
• ASP.NET Core Minimal Web APIs
• Entity Framework Core
• SQLite
• Azure App Service
Second part:
• Blazor WebAssembly
• Bootstrap
• Git hosted GitHub
• Azure Static Web App
For the IDE I'll be using Visual Studio 2022.
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
►► Blazor - Real World Developer Portfolio Course Discount Link:
https://rubenheeren.com/course-promo-...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
►► DOWNLOAD SOURCE CODE:
https://github.com/RubenHeeren/WASMWi...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
►► LIVE DEMO:
Back end:
https://wasmwithaspnetcoreminicourse-...
Front end:
https://zealous-coast-021ab2a03.azure...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
►► LINKS MENTIONED:
Microsoft Docs "ASP.NET Core Blazor dependency injection":
https://docs.microsoft.com/en-us/aspn...
Bootstrap 5 Docs "Tables":
https://getbootstrap.com/docs/5.0/con...
Microsoft Docs "Enable Cross-Origin Requests (CORS) in ASP.NET Core":
https://docs.microsoft.com/en-us/aspn...
Bootstrap 5 Docs "Modal":
https://getbootstrap.com/docs/5.0/com...
Bootstrap 5 Docs "Forms":
https://getbootstrap.com/docs/5.0/for...
Microsoft Docs "C# preprocessor directives":
https://docs.microsoft.com/en-us/dotn...
Microsoft Docs "File Scoped Namespaces":
https://docs.microsoft.com/en-us/dotn...
GitHub Docs "Understanding GitHub Actions":
https://docs.github.com/en/actions/le...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
►► TIMESTAMPS
0:00 - Intro and End Result Demo
3:35 - Getting Started Developing
4:51 - Blazor WASM Project Boilerplate Removal
8:12 - Displaying Posts in a Table (1/2)
15:00 - Fixing CORS in Server
17:23 - Displaying Posts in a Table (2/2)
23:00 - Create Feature (in a modal)
52:57 - Better way to access the API
1:00:09 - Update Feature (copy paste Create modal)
1:11:04 - Delete Feature (with confirm modal)
1:20:52 - Publish to Azure Static Web App
1:34:26 - Closing Thoughts
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
►► CREDIT WHERE CREDIT IS DUE:
Lively Animated Desktop Wallpaper Software:
https://github.com/rocksdanister/lively
Motherboard Background Image:
https://unsplash.com/@alexkixa
Visit my website (example of what you can build with ASP.NET Blazor):
https://rubenheeren.com
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Good luck on your developer journey!
#blazorwasm #aspnetcore #minimalapi
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
PART 1: Blazor WASM and Minimal APIs CRUD Min...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
I'll also cover publishing the projects to the Microsoft Azure Cloud on free tier resources. We'll publish the WebAssembly app to an Azure Static Web App Resource and publish the API to an Azure App Service Resource.
The mini course is split into 2 parts. This is the second part and we'll focus on creating the Blazor WASM front end.
The technologies we'll use are:
Both parts:
• .NET 6 LTS
• C# 10
First part:
• ASP.NET Core Minimal Web APIs
• Entity Framework Core
• SQLite
• Azure App Service
Second part:
• Blazor WebAssembly
• Bootstrap
• Git hosted GitHub
• Azure Static Web App
For the IDE I'll be using Visual Studio 2022.
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
►► Blazor - Real World Developer Portfolio Course Discount Link:
https://rubenheeren.com/course-promo-...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
►► DOWNLOAD SOURCE CODE:
https://github.com/RubenHeeren/WASMWi...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
►► LIVE DEMO:
Back end:
https://wasmwithaspnetcoreminicourse-...
Front end:
https://zealous-coast-021ab2a03.azure...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
►► LINKS MENTIONED:
Microsoft Docs "ASP.NET Core Blazor dependency injection":
https://docs.microsoft.com/en-us/aspn...
Bootstrap 5 Docs "Tables":
https://getbootstrap.com/docs/5.0/con...
Microsoft Docs "Enable Cross-Origin Requests (CORS) in ASP.NET Core":
https://docs.microsoft.com/en-us/aspn...
Bootstrap 5 Docs "Modal":
https://getbootstrap.com/docs/5.0/com...
Bootstrap 5 Docs "Forms":
https://getbootstrap.com/docs/5.0/for...
Microsoft Docs "C# preprocessor directives":
https://docs.microsoft.com/en-us/dotn...
Microsoft Docs "File Scoped Namespaces":
https://docs.microsoft.com/en-us/dotn...
GitHub Docs "Understanding GitHub Actions":
https://docs.github.com/en/actions/le...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
►► TIMESTAMPS
0:00 - Intro and End Result Demo
3:35 - Getting Started Developing
4:51 - Blazor WASM Project Boilerplate Removal
8:12 - Displaying Posts in a Table (1/2)
15:00 - Fixing CORS in Server
17:23 - Displaying Posts in a Table (2/2)
23:00 - Create Feature (in a modal)
52:57 - Better way to access the API
1:00:09 - Update Feature (copy paste Create modal)
1:11:04 - Delete Feature (with confirm modal)
1:20:52 - Publish to Azure Static Web App
1:34:26 - Closing Thoughts
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
►► CREDIT WHERE CREDIT IS DUE:
Lively Animated Desktop Wallpaper Software:
https://github.com/rocksdanister/lively
Motherboard Background Image:
https://unsplash.com/@alexkixa
Visit my website (example of what you can build with ASP.NET Blazor):
https://rubenheeren.com
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Good luck on your developer journey!
#blazorwasm #aspnetcore #minimalapi
3 سال پیش
در تاریخ 1400/10/12 منتشر شده
است.
3,249
بـار بازدید شده