How do you use bind-value and bind-value:event on a custom component?
We can specify what event the bind attribute should use to handle updating the value. But, in components, we need to define the event in the child component, for example, the oninput event on the child component, which triggers a method to update the value and invokes the ValueChanged EventCallback. The parent component has also been updated to use bind-Value when passing its Value parameter to the child component. In the sample, we’re able to type in the text box on the parent component, both the values will be updated on every input change since we have bound the oninput event.
How can I show a custom message when a customer’s connection is lost with the server?
Blazor will check for an HTML ID on initializing the HTML element. If such an ID does not exist on the page, then it will use the default handler to display messages. To display custom messages on connection loss, we can define a div element with the ID components-reconnect-modal in the body of _Host.cshtml to manipulate the overlay that shows up in the case of a connection loss. If this element exists, this element’s class will be : components-reconnect-show: A lost connection. The client is attempting to reconnect. Show the modal. Then, you can apply your custom styling to the screen overlay with CSS. If you want to remove them all, you can just choose not to display them at all. components-reconnect-hide: An active connection is re-established to the server. Hide the modal. components-reconnect-failed: Reconnection failed, probably due to a network failure. To attempt reconnection, call window.Blazor.reconnect(). components-reconnect-rejected: Reconnection rejected. The server was reached but refused the connection, and the user’s state on the server is lost. To reload the app, call location.reload(). Refer to this link for more details: https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-model-configuration?view=aspnetcore-3.1#reflect-the-connection-state-in-the-ui You can download the reference sample here
What is the use of @key directive?
The @key directive is important when creating components dynamically by iterating list/IEnumerable. Adding the @key will ensure proper change detection and UI update in the collection of components. Reference link: https://blazor-university.com/components/render-trees/optimising-using-key/
How to set the focus to an element in Blazor?
To set the focus to a HTML element in Blazor, use the JavaScript interop to pass the HTML element and then use focus JavaScript method. [script.js] [index.razor] View Sample in GitHub
How to set @ref for dynamically generated elements?
To create a reference for dynamically generated components in Blazor, use the dictionary to create the reference for dynamically created elements at runtime.