JavaScript Interop (Part 2)

By Ashwin Venugopal -

 





JavaScript To .NET

There are three ways of doing a callback from JavaScript to .NET code:

• Static .NET method call

• Instance method call

• Component instance method call

Static .NET Method Call

To invoke a .NET function using JavaScript, we should declare the function as static and apply the JSInvokable attribute to the method.

Instance Method Call

This method is a little bit tricky. We need to pass an instance of the .NET object to be able to call it. First, we need a class that will handle the method call. This class accepts a string (a name) as an argument in its constructor, along with a method named SayHello that produces a string comprising “Hello,” followed by the name provided during the instance creation.

We should start by creating an instance of that class, providing it with a name, and generating a DotNetObjectReference<T> to enable JavaScript to interact with the instance. However, we first need the JavaScript code that can invoke the .NET method. There are additional methods available for invoking .NET functions from JavaScript. One approach involves calling a method on a component instance to trigger an action, although this is not considered a best practice for Blazor Server. Alternatively, we can invoke a method on a component instance through the use of a helper class.

Implementing An Existing JavaScript Library

The optimal strategy is to refrain from porting JavaScript libraries. Blazor must maintain synchronization between the DOM and the render tree, and allowing JavaScript to alter the DOM can threaten that harmony.

Many component providers, including Telerik, Syncfusion, Radzen, and Blazm, offer native components. This means that their components are not mere wrappers around a JavaScript library but are designed specifically for Blazor using C#. While these components may utilize JavaScript to some extent, the objective is to limit that usage as much as possible.

Certain components may not be capable of utilizing JavaScript implementations as they require direct manipulation of the DOM. Blazor effectively manages the synchronization between the DOM and the render tree; however, it's best to refrain from direct DOM manipulation. If there's a need to incorporate JavaScript for a specific task, ensure that you place a tag outside the area being manipulated. Blazor will monitor that tag and will disregard everything contained within it.

We have explored how to integrate a JavaScript library with Blazor, making this a viable option if necessary. The vendors of components are committing resources to Blazor, so it's likely that they offer what we require, which means we may not need to spend time developing our own component library.

Conclusion

We learned about calling JavaScript from .NET as well as calling .NET from JavaScript. Generally, we won’t need to do JavaScript calls, as the Blazor community or component vendors have solved the problem for us. We also looked at how we can port an existing library if required.















Comments

Post a Comment

Popular posts from this blog

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

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