Blazor is here, Will JavaScript be dead? I would say that the answer is at-least for now. NO Even though is creating revolution in web technology, it need JavaScript to use web features that cannot be achieved by Blazor for now. To do this team has provided JavaScript Interop support that will enable us to do use functions from and vice versa. Blazor Blazor JavaScript C# In this post we are going to see how to use JavaScript Interop in Blazor application and how to invoke JavaScript function from C# and vice versa. Invoke JavaScript function from C# JavaScript function invoking is handled in using package. Blazor Microsoft.JsInterop A simple JavaScript function call from C# involves the below steps. 1. Inject in the component page. JSRuntime 2. instance has a method named I using which you can invoke JS functions. will search the given method in the object, hence place your function in the window object. I have placed my function in file. JSRuntime nvokeAsync JSRuntime window jsexample.js 3. We need to place the client resources in the folder and hence place the file in the folder and refer it in the file. wwwroot jsexample.js wwwroot _Host.cshtml 4. The second parameter of the method will accept the params which will be passed as the arguments to the JavaScript function. InvokeAsync The following shows the result of the above invoke operation. Handling return value from JavaScript function We can get the return value from the invoked JavaScript function and use it at the C# end. The I method will return value from the invoked JS function. nvokeAsync Now I have refactored the previously used function as below to handle return value from the JS function. Since here we need to wait for the result from the JavaScript function invoking, I have marked button click with keyword and used keyword to get the result from the function. async await InvokeAsync Now the result will be as follows. Invoking C# method from JavaScript To call C# methods from JavaScript, Blazor provide object in the client side which contains methods to invoke C# functions. window.DotNet The method to be called from JavaScript should have the below mentioned constrains. The method should be static The method should be decorated with attribute and give identifier to be used at the JavaScript side. JsInvokable Now the proper C# method which can be invoked from the JavaScript side will look like below. You can invoke the method showed in the above image using the below JavaScript code. Syntax:
DotNet.invokeMethodAsync(APPLICATION_NAME, FUNCTION_NAME, [ARGS,...]);

Example:
DotNet.invokeMethodAsync( , , ); "BlazorKeyApp" "invokeFromJs" "Hello World" The output will be as follows. Invoking class instance method from JavaScript It is also possible to call a class method and to do so we need to send the class instance to the client side by wrapping it using method and invoke the appropriate method using method of that particular class instance. DotNetObjectRef.Create invokeMethodAsync DotNet To explain this, I have created the below class and going to invoke the from this instance using JsInterop. Here the must be decorated with attribute. Helper MyMethod MyMethod JsInvokable And in the button click, I am sending the class instance reference to the client side as follows. Now you can get the DotNet instance at the client side using the below JavaScript function and invoke that particular instance method using . invokeMethodAsync The following shows the output of the above explained operation. Handling return value from C# method The will return a Promise object, you can get the return value by simply adding function handler as follows. invokeMethodAsync then DotNet.invokeMethodAsync( , , ).then( .log(data)) "BlazorKeyApp" "invokeFromJs" "Hello World" ( ) => data console You can perform error handling by adding function to the same method. catch Conclusion I hope that this post have given you some idea about Blazor JS Interop concept. You can use the JS Interop to leverage the web features that cannot be achieved, at least for now. I would recommend to avoid the below things while using JS interop. Don`t send Large data through JS Interop as it would cause buffer side exceeded exception. Don`t send DOM elements through JS Interop. Try to reduce the number of calls using JS Interop. Also I would say that adhering to the JS Interop completely is a bad idea as it would results in stability issues and performance. Happy WASMing…. References https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interop?view=aspnetcore-3.0 If you find this article interesting, follow me on for more.. Twitter

Too Long; Didn't Read

Making security fun one episode at a time

JavaScript Interop and ASP.NET Core Blazor

Too Long; Didn't Read

Madhu Sudhanan P

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

JavaScript Interop and ASP.NET Core Blazor

Too Long; Didn't Read

Madhu Sudhanan P

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES