The HTML Input element has many events, such as onInput, onChange, onClick and onKeyPress. To help learn when some of these events are triggered, in what order they occur, and what values are available in their arguments I created the Input Events Analyzer page on the Blazor Component Authority Demonstration web app. The input analyzer focuses on keyboard and form events providing a demonstration of the events that occur, the order in which they occur, and the values presented by …
Category: Design
Sometimes we want to bind a value in an element with a property in the component and also have the element’s onchange event trigger a method in the component. Why would we want to do this? Because sometimes we need to save the user’s input and also use it to do something else like filter a list or trigger a method in the parent component. To both bind to a property and call a method with the onchange event, the …
Here’s an expanded list of component features I’ll try to incorporate into all the BCA components. Obviously all these features are not applicable to every component, but I’ll attempt to include all I can. My hope is that using this checklist will help me produce a first class component library by updating this feature list and the existing components as I discover new features. So if you use any of the components from this blog and later find one lacking …
What features should a component have? Too many and it isn’t as reusable. Too few and it doesn’t provide much benefit. Examining the components that come with Blazor might help to answer this question. Let’s start with the InputText component which can only be used inside the EditForm. This Razor markup provides a green outline after the value is changed. Adding a DataAnnotation like [Required] to the models property and the DataAnnotationsValidator inside the EditForm provides a red outline when …
The effects of Blazor component size on maintenance and reusability When I first started working with Blazor I loved the fact that everything in Blazor was a component and components could be nested in one another. It seemed like a great way to organize a page, keeping the code cleaner and easier to maintain. However I hadn’t developed a strategy for applying it. The team I was working with had a complicated page to build. It seemed like we could …