The Practical ASP.NET Vault
Welcome!
Here you’ll find links to source code, practical guides, and lots of other useful resources to help you navigate the often choppy waters of .NET web development.
I hope you find these resources useful, feel free to hit reply to any of my emails and let me know :)
Blazor
Blazor Examples Project
A small collection of widgets and features implemented using Blazor, including:
- Traffic Light
- Dynamic Dashboard
- Markdown Editor
- Passing data via the Query String (between ‘pages’)
Check out the source code here: https://github.com/jonhilt/BlazorExamples
Up and running with Blazor (video mini-series)
A quick tour of some of the key parts of Blazor’s component model. If you’re completely new to Blazor this is a good place to start.
Blazor (Server) Quick Start
Want to have a go at building a simple Blazor app yourself? This Blazor tutorial will show you one way to use Blazor Server to consume (and post) data, via an ASP.NET Core Web API.
- Get started with a new Blazor application
- A simple Tweet UI
- Build a scalable, adaptable backend for your new Blazor app
- Post new tweets using Blazor’s EditForm and MediatR
An incremental refactor of a Blazor component
It’s not always obvious how, or indeed when to refactor your Blazor components. Watch over my shoulder as I take a real Blazor application and, via one or two refactoring moves, incrementally improve it (making it easier to extend and maintain)
Note, this was originally recorded for the Practical ASP.NET Pro Community.
Dynamic Dashboard Demo
.NET 6 now includes a super useful DynamicComponent Here it is in action:
Render diagrams ‘on the fly’ with Blazor
A handy way to render diagrams with Blazor, using GraphViz.
React
First Features - React + ASP.NET Core Quick Start Course
Build your first React (+ ASP.NET Core Web API) application.
- Build a simple Tweet UI
- Refactor the component and drive it from state
- Populate the list of tweets from data
- Adding new tweets to the system
- Tidy up the logic with callbacks
You can also see the finished example’s source code here.
Frontend (JavaScript and CSS)
Frontend in Four Hours
A whistlestop tour of the main moving parts involved in building a ‘modern’ web application (JavaScript and CSS).
- Frontend in Four Hours (PDF)
- Frontend in Four Hours (Source Code)
- CSS Preprocessors (SASS/LESS) - What, Why, How?
- Typescript Cheat Sheet PDF
ASP.NET Core MVC
All about Tag Helpers
Tag Helpers are a big (and useful) part of ASP.NET Core MVC. Here are a few handy resources to explain how they work (and to help you remember/discover which tag helpers are available ‘out of the box’)
- Tag Helpers/Forms Demo Source Code
- Tag Helpers Cheat Sheet
- Tag Helpers Introduction (free chapter from Practical ASP.NET Core MVC)
Refactor logic out of your controller actions
Refactor logic out of your controller actions PDF
From WebForms to MVC
In this post I explored the key differences between WebForms and MVC (especially useful if you’re coming to MVC from WebForms and want to understand how a request is handled differently in MVC).