Uploaded June 2024 | Updated September 2026, 2 weeks ago
π Blazor Puzzle #40:
This week, we solved two tricky Blazor challenges:
β Fixing Two-Factor Authentication (2FA) QR Code Generation
β Correcting Server-Side Form Binding with [SupplyParameterFromForm]
π Solutions:
1οΈβ£ Blazor Server-Side Form Issue
Problem: Form values reset on submit due to missing binding
Fix: Used [SupplyParameterFromForm] to persist values across postbacks
2οΈβ£ Missing 2FA QR Code
Problem: QR code not displaying even after adding JavaScript per Microsoftβs docs
Solution Pending! Can you solve it? π΅οΈ
π© Think you know the answer?
Email blazorpuzzle@appvnext.com with "Puzzle #40" in the subject.
π¬ Whatβs your best approach for injecting JavaScript in Blazor's server-side authentication pages? Letβs discuss in the comments!
π Subscribe for more Blazor debugging, authentication best practices, and .NET tips!
Get Started Today β Free 30 Day Trial
dxpr.es/NUGET
dxpr.es/FREE-TRIAL
Pricing and Online Demos
dxpr.es/BUY
dxpr.es/DEMOS
We Are Here to Help
dxpr.es/SUPPORT
Follow DevExpress on Social Media
dxpr.es/FACEBOOK
dxpr.es/TWITTER
dxpr.es/BLOGS
Review Customer Testimonials
dxpr.es/TESTIMONIALS
dxpr.es/MARKETPLACE
#DevExpress, #devexpress_blazor #blazor #microsoft #carlfranklin #Jefffritz #Blazor #DotNet #CSharp #WebDevelopment #Microsoft #BlazorServer #Authentication #CodingChallenge
π Blazor Puzzle #40:
This week, we solved two tricky Blazor challenges:
β Fixing Two-Factor Authentication (2FA) QR Code Generation
β Correcting Server-Side Form Binding with [SupplyParameterFromForm]
π Solutions:
1οΈβ£ Blazor Server-Side Form Issue
Problem: Form values reset on submit due to missing binding
Fix: Used [SupplyParameterFromForm] to persist values across postbacks
2οΈβ£ Missing 2FA QR Code
Problem: QR code not displaying even after adding JavaScript per Microsoftβs docs
Solution Pending! Can you solve it? π΅οΈ
π© Think you know the answer?
Email blazorpuzzle@appvnext.com with "Puzzle #40" in the subject.
π¬ Whatβs your best approach for injecting JavaScript in Blazor's server-side authentication pages? Letβs discuss in the comments!
π Subscribe for more Blazor debugging, authentication best practices, and .NET tips!
Get Started Today β Free 30 Day Trial
dxpr.es/NUGET
dxpr.es/FREE-TRIAL
Pricing and Online Demos
dxpr.es/BUY
dxpr.es/DEMOS
We Are Here to Help
dxpr.es/SUPPORT
Follow DevExpress on Social Media
dxpr.es/FACEBOOK
dxpr.es/TWITTER
dxpr.es/BLOGS
Review Customer Testimonials
dxpr.es/TESTIMONIALS
dxpr.es/MARKETPLACE
#DevExpress, #devexpress_blazor #blazor #microsoft #carlfranklin #Jefffritz #Blazor #DotNet #CSharp #WebDevelopment #Microsoft #BlazorServer #Authentication #CodingChallenge


![The Blazor Puzzle 79 - Blazor WASM Connectivity Indicator (No JavaScript Hacks!)
π Resources & Code:
https://github.com/BlazorPuzzle/Puzzle-79
Episode 79 of The Blazor Puzzle comes to you from Microsoft Build in Seattle! Carl Franklin and Jeff Fritz dive into building a connectivity indicator for Blazor WebAssembly apps, showing whether youre online or offline β perfect for PWAs.
ππ Using green and gray Wi-Fi icons, they show how to dynamically update UI state based on real-time browser connectivity β all using Blazor components, JS interop, and RenderFragmentsβ¦ the Blazor way.
π What Youβll Learn:
βοΈ How to detect online/offline status in a Blazor WebAssembly app
βοΈ How to hook into navigator.onLine and listen for connectivity changes
βοΈ Using [JSInvokable] and DotNetObjectReference to connect Blazor and JS
βοΈ Swapping content with RenderFragments instead of JavaScript hacks
βοΈ Why this approach is clean, testable, and reusable in PWAs
π§© All wrapped up in a reusable ConnectivityIndicator componentβjust drop it in and go!
π« Got a clever Blazor trick or puzzle? Send it to blazorpuzzle@appvnext.com and you might win a Blazor Puzzle mug (or even get your name shouted out on the show!).
π Want to level up your Blazor testing skills? Subscribe & join the puzzle! π§©
Get Started Today β Free 30 Day Trial
http://dxpr.es/NUGET
http://dxpr.es/FREE-TRIAL
Pricing and Online Demos
http://dxpr.es/BUY
http://dxpr.es/DEMOS
We Are Here to Help
http://dxpr.es/SUPPORT
Follow DevExpress on Social Media
http://dxpr.es/FACEBOOK
http://dxpr.es/TWITTER
http://dxpr.es/BLOGS
Review Customer Testimonials
http://dxpr.es/TESTIMONIALS
http://dxpr.es/MARKETPLACE
#DevExpress, #devexpress_blazor The Blazor Puzzle 79 - Blazor WASM Connectivity Indicator (No JavaScript Hacks!)](https://i.ytimg.com/vi/sh6NVdfOFQM/mqdefault.jpg)







