Blazor by Example:
​Side-step the JS Churn

​You've ​tried to wrap your head around javascript, you really have.

​You know JS is a prerequisite if you're going to call yourself a web developer ​in 2020, but damn, is it hard to keep up.

​Like a dog chasing its own tail, the javascript machine goes round, and round, generating endless frameworks and a near incomprehensible ecosystem.

​Build tools, package managers and compilers; all supposedly designed to help you package your code, but in truth you just hit publish and hope the stars align to generate something you can actually push to your server.

​And where does this leave you, the diligent developer trying to build your simple web application?

​Tired, frustrated and less enthusiastic by the day.

​You battle, you slog. ​You write your ​javascript and fix your CORS errors.

You ​finally deploy your application only to have some maverick update an NPM package you didn't realise you relied on and, poof, just like that your site's ​gone up in flames again.

​Oh to be able to side-step the JS churn and get back to building web applications.

​What if you could build your ​web applications using the knowledge and skills you already have...

Javascript is painful and energy-sapping to keep up with, but what's the alternative?

It's hard to imagine building "modern" web applications with a purely server-side option like MVC nowadays.

Everyone expects responsive, fast, single page apps where ​clicking on buttons and links takes them seamlessly from one part of the app to another, and it's ​nigh on impossible to build something like that with MVC, Razor Pages, or anything else which resides just on the server.

What ​we need, is a​nother option...

​​​Finally, an alternative to javasript

Microsoft has released Blazor Server, and with it ​arrives a JS alternative.

​Finally, you can bring your C# skills to the fore, employ the ecosystem and tools you already know, ​and ​build web applications to compete with all those fancy "JS ​heavy" applications you encounter every day.

But now you face a new challenge...

​​How do you ​give Blazor a spin, learn the fundamentals and decide if it's the ​right option for your next project?

Blazor Server is ​so new, it's ​tough to find ​meaningful examples; I mean, if you've seen ​the Blazor demo app once you've seen it a hundred times...

​But it's simple right?

Open Visual Studio, create a new Blazor Server application and you're off; go forth and build ​your applications!

Except... now you have ​questions:

  • How do ​I break a requirement down and build it using components?
  • ​How do ​I organise ​my components?
  • How do I pass data between components?
  • Should I be passing simple primitives or entire objects?
  • Where does my data access code go?
  • ​Do ​I need to build ​my own components for everything?

​It's a lot to learn, especially if you're just trying to figure out whether Blazor is for you.


​Glide past the uncertainty and blind alleys

​If you could fast-forward to the end, straight past ​the over-simplified todo apps and endless documentation, you'd ​know:

  • Precisely how Blazor's component model works
  • ​How to create small, re-usable components
  • How to compose several components together to make bigger features
  • Where to put your data access code

​Then you'd be free to get on with the fun part; building interesting ​projects.

​​​​Learn Blazor quickly with Blazor by Example​​​​

It's stressful when you're trying to learn something new and can't find concrete examples to work from.

​It's maddening when ​you know what ​you're trying to build, but ​don't ​have the right words to put into Google to find answers to ​your questions.

That's why I've put together Blazor by Example.

​A concise, pocket sized collection of bite-sized examples, Blazor by Example will accelerate your Blazor Server journey (in hours, not weeks).

Learn how to break down feature requirements into components and build them, quickly, using Blazor's component model:

You'll get to build and explore a number of self-contained Blazor Server examples:

Example 1: Hello World

Discover how to...

  • Spin up a Blazor project
  • Create simple components
  • Render multiple instances of a component
  • Pass data in via parameters
  • Use routing

Example 2: Slack-style message list

Discover how to...

  • Build components from a sketch/mockup
  • Use one-way binding to show information
  • Write your UI logic using @code in your component
  • Bind to a list (to show multiple instances of a component)
  • Apply CSS styles

Example 3: Pomodoro Timer

Discover how to...

  • Use StateHasChanged to signal Blazor to render your UI
  • Use JS Interop to change the browser window's title
  • Inject dependencies into your components
  • Implement IDisposable to clean up after yourself!

Example 4: Pomodoro Timer (with base class)

Discover how to...

  • Refactor to use component base classes
  • Inject dependencies into a base class
  • Implement IDisposable in a base class

Example 5: Shopping Cart

Discover how to...

  • Use Event Callbacks to trigger changes in other components
  • Use two-way binding to show and update data
  • Use HTML Selects (dropdowns) in Blazor

Example 6: Product Search

Discover how to...

  • Filter a list using two-way binding
  • Choose when to update a binding's value (onchange or oninput)

Example 7: A Simple Blog

Discover how to...

  • Use two-way binding to view/modify data
  • Retrieve and persist data to a database
  • Render raw HTML
  • Use validation in your forms

​Learn important Blazor concepts by building different examples

​With each ​new example, you'll discover vital Blazor concepts and see them in action:

  • ​One-way and two-way binding
  • Validating forms
  • Using StateHasChanged to trigger the UI to render
  • ​Composing several components together
  • How to break down a big feature into lots of manageable components
  • Communicating between components
  • ​Where to put your domain logic
  • ​How to connect Blazor components to data (and business logic)

​Learn how to trigger an instant filter of a list in the ​Product search example​.​​​

​Build a user interface from several components, which all communicate with each other (as in this ​Slack Clone​example)​.​​​​​​

​Use Event Callbacks to react to changes in child components (like refreshing this shopping cart when items are deleted).

Packed with ​step-by-step instructions and explanations of all the key Blazor Server concepts; Blazor by Example is available now with a special launch discount.

Side-step the Javascript Churn - ​learn Blazor Server today


  • ​Blazor by Example (​pdf and ​epub) including all 7 examples 
  • ​Full source code for each example
  • ​​Source code for 2 MediatR based ​starter projects

$29 $19


Looks like you're visiting from United Kingdom and so these prices may appear high. Use the code HELLOGB at checkout to take 10% off the total price.

Who ​built this?

​Hey, I'm Jon Hilton and I've been "doing" software development for more years than I care to remember (about 20 in fact).

My first site was ​a Red Dwarf fan site which I built when I was 16 and, well, I haven't really stopped "hacking" away at web sites and applications since.

I develop software for a company called Remote as well as blogging ​at and building training materials/courses and books (like this one).

Think of me as primarily here to help you level up your development skills and find your way ​in the (often confusing) world of Microsoft software development.

© Jon Hilton All rights Reserved

Privacy Policy