I have found a repetitive pattern in Blazor components when needing to disable an HTML element.
Blazor provides functionality with the HTML disabled attribute, to which you can pass some Razor.
With the example of a single button, we can do:
<button type="button" @onclick="DoSomething" disabled="@buttonIsDisabled">Click me</button>
Blazor will render the button including a disabled attribute when buttonIsDisabled is true. This helps when using a CSS class to alter the styling of the button when disabled as well.
However, this is not very safe since a user can edit the HTML document quickly to remove the disabled attribute from the HTML element. The on-click event would remain and allow the DoSomething method to execute anyways.
To avoid things being bypassed, I use a manual approach instead:
if (buttonIsDisabled)
{
<button disabled type="button" />
}
else
{
<button @onclick="DoSomething" type="button" />
}
There is an enabled version of the button with an onclick handler, and another without it for safety (disabled).
The problem is that in more complex scenarios, is not a simple button which has to be rendered, but multiple elements with multiple handlers as well. This ends up in a pattern of repetitive/duplicated HTML code.
Is there a better approach or another way to disable elements so that Blazor does not register the event handlers such the onclick event?
For example if Blazor knew that an element should render the disabled attribute should not trigger any Blazor event.
Edit: This question is not intended to find a solution for the case of a disabling/enabling a simple button and controlling it's event handler, but to the patterpattern I explain above. Imagine having not only disabled buttons, but also inputs, checkboxes, toggles, etc; they could all be also linked to multiple event handlers, each.
A not-supported idea: As Blazor computes the disabled attribute to render it or not, it could also determine to not include the event handlers for the element when it should be disabled in the next rendering.