Blazor Component Authority

I’m dedicated to giving you the very best in Blazor component design, advice, and examples. Please reach out if you want to know more!

News

• Input Events Analyzer
  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 each event’s arguments. I think the Input Events Analyzer is a very effective tool to learn about these events. If you’re working with the input element events I think you’ll find it useful.
• Input Helper
  In my experience one of the more time consuming and frequently performed operations in enterprise applications is the entry of descriptions. I’ve had to make many description entries and I’ve noticed that most of the time the description was the same or similar to other entries in the database. When a description I was entering didn’t match an existing description it almost always consisted of a new combination of terms that already existed in the database. Based on this experience it seems to me there is an opportunity here to help the user with this tedious task and also improve the quality of the data entered. I believe a Blazor component that uses the data in the database could help the users make new entries. Here’s how I think it should behave. I created a component called InputHelperBCA that implements these behaviors. Here’s what the component looks like implementing items 1 and 2 above. The suggestion (gray characters) is achieved by putting two spans (line 23) after the input (line 13) then using CSS (lines 54 to 74) to adjust their positions and opacity. The first span contains the same value as the input and its purpose is to ensure […]
• Generic Autocomplete
• Free Hosting
  Free hosting of static websites in Microsoft Azure! So hosting a Blazor client side application as a static website on Azure is free. Free is alway interesting so I thought I’d give it a try. Here’s what happened. I created a Webassembly or Client Side version of the Blazor Component Authority Demonstration application and discovered ProtectedLocalStorage works in a Blazor Server Side application but does not work in a Blazor Client Side application. The InputHistoryBCA component uses ProtectedLocalStorage so I had to make a change to it. The fix was to use the JSRuntime and call the Javascript localStorage methods in the Client Side version of the component. Of course Javascript localStorage does not encrypt the stored value so that protection is not available in the client side version. The Webassembly version of the demonstration app also does not provide direct navigation to a particular page since it’s a single page application (SPA) and hosted as a static webpage. Requests to the server for anything other than the root or index address will return a 404 error since the server only has one page (index.html) to serve. To see the code for the Webassembly version of InputHistoryBCA go to the […]
• Changing History
  Wouldn’t it be great to be able to change history or how it’s perceived. I thought about it and came up with a plan. I’ve decided to modify the InputHistoryBCA component to accommodate my desire. Now in addition to deleting select entries it also allows the user to change the order in which they appear. It’s now possible to order by the text, add date, or last used date in ascending or descending order.  To accomplish persisting the history and the user’s sorting selections there is now a model consisting of the property to sort by, the sort direction, and the list of history options. The model is saved to local storage with the key name equal to the UUID selected by the developer. In the example above the StorageModel is saved in local storage with the key name “InputHistory”. Any key name can be used and each should be unique within the application unless you want to share the history and sort settings between multiple InputHistoryBCA components.  Here’s what the local storage looks like in the browser’s developer tools. So now you too can change history with the InputHistoryBCA component. I hope you find this component useful or inspirational. […]

About Me

Blazor for the uninitiated