Posts

Showing posts with the label Web Assembly

🦇 Building Drag & Drop in Blazor — Villain Edition

Image
  Blazor WebAssembly lets .NET developers build rich, interactive web apps entirely in C# . To showcase its power, I built a fun demo where users can drag and drop “villains” between containers and reorder them in a list — all without a single line of JavaScript. 🎯 What You’ll See This app demonstrates two kinds of drag-and-drop experiences: Container Drag & Drop — Move items between “Available Villains” and “Active Threats.” List Reordering — Reorder items by dragging them up or down. Each shows how Blazor manages state, events, and dynamic UI updates in real time. 🧩 Project Setup Tech stack: Blazor WebAssembly (.NET 9) C# 13 Bootstrap 5 for responsive UI HTML5 drag & drop API No JavaScript required! Key components: Home.razor – Container-based drag and drop VillainList.razor – Single-list reordering Villain.cs – Data model Scoped CSS for component-level styling ⚙️ Blazor Event Handling Blazor supports native HTML5 drag events ...

Static Bootstrap website to Blazor - Updated

Image
I have been spending some time working with Azure static websites and it got me thinking I should do a post about them.  The more I have been working with the Azure static websites, the more I like them. So I decided to dust off an old post, Static Bootstrap website converted to Blazor .  In this old post, I took a common Bootstrap-themed static website and "Blazorized" it. In the original project, I created components, removed as much of the javascript as I could, and used Blazor.  This was done back in Nov of 2019 as a server-side application.  This was right around the time Blazor server-side went GA and the Web Assembly was still at least 6 months left to go in development. For this post, I will be creating a Blazor Web Assembly version of the project that is built for Azure Static Websites and that actually works.  I hope to document as many of the changes as I can.   Once I fired up the old project, the project did not even compile anymore. ...

Blazor Hosting Cost Analyst

Image
  I have spent some time looking at if Server-Side Blazor App is better than the Client-Side Blazor App, Blazor Hosting Models  post.  I decided to look at it from a cost position and see if there is any benefit of one way over the other.   I took a simple Blazor Application that I wrote Inspirational Quotes  and create both a server-side application and a client-side application.  I then deployed each.  For the server-side application, I deployed as an Azure app service, free trier.  For the cient-side application, I deployed that with Azure blob storage statice web site.  The goal was to just focus on the cost of each deployment. After the deployment I had several users access each web site several times a day.  This was to simulate a light usage, such as a sample app from a blog or portfolio would get.  I monitored the sites for 30 days. Actual Cost I was a little surprised to see the cost for each deployment and utilization...

Blazor Web Assembly Latest release

With the latest release of Blazor Web Assembly 3.2.0 Preview 3.0 they have made great strides in getting the Blazor web assembly version production ready. The official GA release is for May 2020 and there will be at least 3 more preview release between now and the GA release.  See the ASP.Net Blog post for the latest instructions on how to install and run the latest preview. What's in this preview: 1. .Net Standard 2.1 2. Standalone and hosted models 3. IL trimming 4. Web Sockets 5. .Net SignalR Client 6. Static Web assets 7. Authentication and authorization 8. Progress Web Application template 9. Localization and Globalization 10. External Configuration files 11. Debugging 12 Compression .Net Standard 2.1 You can now use .Net Standard 2.1 Library projects in your Blazor web assembly projects Standalone and Hosted models These 2 hosting model s are back.  These were available when the web assembly model was first released but remover be the initia...