Creating Advanced Blazor Components

By Ashwin Venugopal -

 





Exploring Binding

By utilizing bindings, you can link variables either inside a component (allowing for automatic updates) or by assigning a component attribute. In Blazor, we can bind values to components and there are two different ways to do this:

One-way binding

Two-way binding

Through the use of binding, we can transmit information between components and ensure that we can modify a value whenever we choose.

Adding Actions and EventCallback

To relay changes, we can utilize EventCallback. EventCallback<T> has some differences compared to what we might recognize in .NET. It is a class specifically designed for Blazor, allowing the event callback to be made available as a parameter for the component. In .NET as a whole, it is possible to attach several listeners to an event (multi-cast), whereas with EventCallback<T>, you can only attach a single listener (single-cast).

It's important to note that you can utilize events in Blazor similarly to how you do in .NET. However, you may prefer to employ EventCallback<T> due to the numerous advantages it offers compared to conventional .NET events. .NET events are based on classes, while EventCallback is built on structs. This implies that in Blazor, we are not required to execute a null check prior to invoking EventCallback, since a struct cannot be null.

EventCallback functions asynchronously and can be awaited. Once EventCallback is invoked, Blazor will automatically perform StateHasChanged on the component that consumes it to ensure that the component updates whenever it requires updating.

So, if you need several listeners, you can utilize Action<T>; if not, you should opt for EventCallback<T>.

Using RenderFragment

To enhance the reusability of our components, we can provide them with a snippet of Razor syntax. In Blazor, you have the option to define a RenderFragment, which is a segment of Razor syntax that can be executed and displayed.

There are two categories of render elements- RenderFragment and RenderFragment<T>. RenderFragment is essentially a Razor fragment that does not have any input parameters, while RenderFragment<T> includes an input parameter that can be accessed within the Razor fragment code using the context keyword.

ChildContent

By labeling the render fragment as ChildContent, Blazor will automatically utilize the content found between the alert tags. This feature only applies when there is a single render fragment. If multiple fragments are present, you will need to also define the ChildComponent tag.

Conclusion

Some basics of creating a component are discussed.

 































































































Comments

Post a Comment

Popular posts from this blog

How AMI Store & Restore Works?

By Ashwin Venugopal -
Image
  CreateStoreImageTask The CreateStoreImageTask API stores an AMI as a single object in an S3 bucket. The API initiates a task that collects all the data from the AMI and its associated snapshots, subsequently using an S3 multipart upload to store this data in an S3 object. It gathers all elements of the AMI, including most of the non-Region-specific metadata and all EBS snapshots included in the AMI, and consolidates them into a single object in S3. During the upload process, the data is compressed to minimize the space utilized in S3, which means that the S3 object could be smaller than the total sizes of the snapshots in the AMI. If the account making this API call has access to AMI and snapshot tags, they will be retained. The S3 object shares the same ID as the AMI, except it has a .bin extension. Additionally, the S3 metadata tags for the object include the AMI name, AMI description, AMI registration date, AMI owner account, and a timestamp indicating when the store operation...
Read more

Create A Store Image Task

By Ashwin Venugopal -
Image
  Introduction When you save an AMI in an S3 bucket, a task for storing the image is initiated. This store image task allows you to track the progress and result of the procedure. Securing your AMIs It is crucial to verify that the S3 bucket is set up with adequate security to protect the content of the AMI and that this security is upheld for the entire duration that the AMI objects are stored in the bucket. If this cannot be achieved, it is advisable to refrain from using these APIs. Make sure that public access to the S3 bucket is prohibited. It is suggested to activate Server-side encryption for the S3 buckets where you keep the AMIs, even though it’s not mandatory. When AMI snapshots are transferred to the S3 object, they are sent over TLS connections. It is possible to save AMIs that contain encrypted snapshots; however, the snapshots will be decrypted during the storing process. Identify the source AMI used to create a new Amazon EC2 AMI You can determine the AMI that was us...
Read more

Information Protection Scanner: Resolve Issues with Information Protection Scanner Deployment

By Ashwin Venugopal -
Image
  About If you are experiencing problems with the Microsoft Purview Information Protection scanner, check the health of your deployment by utilizing the Start-ScannerDiagnosticsPowerShell cmdlet to start the scanner diagnostic tool. The diagnostics tool checks the following details and then creates a log files with the results: Whether the database is up to date. Whether network URLs are accessible. Whether there's a valid authentication token and policy can be acquired. Whether the profile is defined in the Azure portal. Whether offline/online configuration exists and can be acquired. Whether the rules configured are valid.  The Start-ScannerDiagnostics command does not perform a comprehensive check of prerequisites. If you encounter problems with the scanner, you need to verify that your system meets the scanner's requirements, and that your scanner's configuration and installation are finished.  Verify Scanning Details Per Scanner Node and Repository Run the Get-ScanSt...
Read more