Coding With David

  When starting to build forms in Blazor, it's common to immediately reach for a third-party component library. Date pickers, masked inputs, sliders, validation UI, file upload widgets – the list goes on. While these libraries can be incredibly useful, they also come with tradeoffs: extra dependencies, styling constraints, larger downloads, and the need to learn a new component API that often duplicates what browsers already do well. This post serves as a powerful reminder that modern HTML inputs are already "power controls." With Blazor, you can wire them up with minimal C# code while retaining all the benefits of native browser behavior. The result? Simple, fast, dependency-free UI that still feels modern and responsive. The Core Idea: Let the Browser Do the Work This approach demonstrates a wide range of input types using plain HTML, leveraging the browser's native capabilities: type="email" for native email validation type="ur...

 Back in March, I posted a new Blazor data grid with a search box ( see post ).  Since then I have found a new and improved search box that I wanted to implement.  The search part is implemented the same.  What I added was the ability for the user to narrow down the search by selecting which field they wanted to search on.  This will help the user find what they are looking for and in a large collection, the search will end up being faster. The goal of making the change was to make the search box a new component and have it handle the UI functionality part. Prep Work Here is the prep work I did before adding the search box: Started with the source code from the post listed above. Upgraded the project to .Net 5 Upgraded the Nuget packages that were out of date. Ensured every build and run. Change to a Component I wanted to create a component for the search box so I could use it in other applications.   1. Create a Folder under UIControls called "SearchB...

Well this exercised turned out to be a little surprising.   It turns out the use of UI cards is mainly controlled and implemented by the CSS framework you are using.   In my case bootstrap.   I still wanted to see how to implement the UX of using cards instead of a list or data grid. For this, I am using the standard Server Blazor project template.   It does not matter if you are using Server or Client side for this project.   Both work the same. I am taking the Forecast page of the template and changing from using the html table to using html cards.     To implement this, I just replace the table HTML with the HTML for Cards:         <div class="container">             <div class="row">                 @foreach (var forecast in forecasts)                 {           ...