We can use replaceWith() method to replace a DOM element using JavaScript.
oldElement.replaceWith(newElement);
Key takeaways:
JavaScript is essential for certain tasks like DOM manipulation and using specific web APIs.
To interact with JavaScript from .NET, the
IJSRuntimeservice is utilized, which requires injecting it into your Blazor component using dependency injection.
Use
InvokeVoidAsyncmethod to call JavaScript functions that do not return a value.Use
InvokeAsyncmethod for JavaScript functions that return a value, with both methods being asynchronous.Demonstrating button interactions shows how to change text color and retrieve text from HTML elements using JavaScript interop.
Blazor WebAssembly will allow you to build fully functional applications without the need to work directly with JavaScript. However, JavaScript may become an essential ingredient in some situations, as specific tasks cannot be achieved without it. The absence of JavaScript means you won’t be able to manipulate the DOM or utilize the JavaScript APIs crucial for web development.
To execute a JavaScript function from .NET, we utilize the IJSRuntime abstraction. This abstraction represents a JavaScript runtime that the framework can access. To utilize IJSRuntime, we must first inject it into our component using dependency injection.
The IJSRuntime abstraction
uses below methods to invoke JavaScript functions:
InvokeVoidAsync: Invoke JavaScript function and does not return any value.InvokeAsync: Invoke JavaScript function and return value.Both methods are asynchronous in nature.
InvokeVoidAsync(string func_name, params object[] args);
func_name: Name of JavaScript function that is being called.
args (optional): Array of arguments used by the function.
ValueTask<TValue> InvokeAsync<TValue>(string func_name, params object[] args);
func_name: Name of JavaScript function that is being called.args (optional) : array of arguments used by the function.TValue: This is the type of return value.Create a JavaScript file in the root directory folder called wwwroot. This file contains the script.
Link your script file with index.html file using the <script> tag. in the body element.
Note: You can see these files in the code below in the
wwwrootfolder.
Inject IJSRuntime service in component.
Create an event handler to call InvokeAsync or InvokeVoidAsync on a specific event, like a click event.
Pass the JavaScript function as an argument to IJSRuntime methods.
In the below example, we create two buttons, one to call InvokeVoidAsync and the other to call InvokeAsync method when they are clicked.
The first button toggles the text color and appends the color name by calling the InvokeVoidAsync method because we do not need to return anything.
Second button extracts the text from the h1 element by calling the InvokeAsync method and returns the value to the variable innertext:
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
<PropertyGroup>
<TargetFramework>net7.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.5" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.5" PrivateAssets="all" />
</ItemGroup>
</Project>
Line 2: Inject the IJSRuntime service.
Line 18: Call the InvokeVoidAsync and pass the logic.Toggle_Color function as string.
Line 22: Call the InvokeAsync and pass the logic.getText function as string.
Note: You can see JavaScript file in
wwwrootfolder.
Join our course on Building Real-Life Applications with Blazor WebAssembly to explore Blazor and its web development capabilities. You’ll learn to create templated components, develop progressive web applications, harness JavaScript interoperability, etc. Elevate your skills and start building today!
Haven’t found what you were looking for? Contact Us
Free Resources