In a Blazor application, you can call JavaScript functions from C# (.NET) methods and vice versa. This is referred to as “JavaScript interoperability” or “JS interop.” The JS interop allows you to integrate JavaScript libraries into your Blazor application, and its primary function is to handle DOM manipulation and browser API calls.
Please refer to this link to learn more about JS interop in Blazor.
Please refer to this link for calling and implementing JS interop in Blazor.
PermalinkBlazor allows JavaScript isolation in standard JavaScript modules. JavaScript isolation provides the following benefits:
Create an export JavaScript function in the wwwroot/script folder.
[isolationScript.js]
export function jsIsolation(value) {
console.log(value);
} Import the JavaScript function using the IJSRuntime.InvokeAsync method in Blazor and call the JavaScript method on button click event.
[Index.razor]
@page "/"
@inject IJSRuntime JSRuntime
Enter text:<input @bind="content" />
<button class="btn btn-primary" @onclick="OnClickButton">Click</button>
@code {
private string content { get; set; }
private async void OnClickButton()
{
var jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./script/isolationScript.js");
await jsModule.InvokeVoidAsync("jsIsolation", content);
}
} Refer to this documentation for more details.
PermalinkUsing JavaScript onmousemove and onkeypress events to trigger the Timer function in a Razor component can identify whether a user is active or inactive. If the user has not performed any onmousemove or onkeypress events, the user is considered in an inactive state and the Timer function is called after certain TimeInterval to log the user out.
Follow these steps to log the user out automatically if they’re not active:
Call the onmousemove and onkeypress properties in a JavaScript function to fire the Timer function in the Razor component.
[_Host.cshtml]
<body>
// . . .
<script>
function timeOutCall(dotnethelper) {
document.onmousemove = resetTimeDelay;
document.onkeypress = resetTimeDelay;
function resetTimeDelay() {
dotnethelper.invokeMethodAsync("TimerInterval");
}
}
</script>
</body>Now call the Timer method to identify whether the user is active or not. Add navigation to the logout action when the user is inactive.
[MainLayout.razor]
@using System.Timers
@inject NavigationManager UriHelper
@inject IJSRuntime JSRuntime
// . . .
@code {
[CascadingParameter]
private Task<AuthenticationState> stateAuthenticate { get; set; }
private Timer timerObj;
protected override async Task OnInitializedAsync()
{
// Set the Timer delay.
timerObj = new Timer(7000);
timerObj.Elapsed += UpdateTimer;
timerObj.AutoReset = false;
// Identify whether the user is active or inactive using onmousemove and onkeypress in JS function.
await JSRuntime.InvokeVoidAsync("timeOutCall", DotNetObjectReference.Create(this));
}
[JSInvokable]
public void TimerInterval()
{
// Resetting the Timer if the user in active state.
timerObj.Stop();
// Call the TimeInterval to logout when the user is inactive.
timerObj.Start();
}
private void UpdateTimer(Object source, ElapsedEventArgs e)
{
InvokeAsync(async() => {
// Log out when the user is inactive.
var authstate = await stateAuthenticate;
if (authstate.User.Identity.IsAuthenticated)
{
UriHelper.NavigateTo("logout", true);
}
});
}
} To get a browser’s culture in Blazor WebAssembly, call the (navigator.language) property in JavaScript using the JavaScript interop function in Blazor. It will return the current browser’s language version.
Follow this code to get the browser’s culture in Blazor WebAssembly.
[Index.razor]
@page "/"
@inject IJSRuntime JSRuntime
@code{
protected override async Task OnInitializedAsync()
{
var browserLanguage = await JSRuntime.InvokeAsync<string>("getBrowserLanguage");
Console.WriteLine(browserLanguage);
}
}[index.html]
<body>
. . .
. . .
<script>
window.getBrowserLanguage = function () {
return (navigator.languages && navigator.languages.length) ? navigator.languages[0] :
navigator.userLanguage || navigator.language || navigator.browserLanguage || 'en';
}
</script>
</body>To convert the date and time to a client’s or user’s time zone in Blazor Server, use the JavaScript function to get the current offset time difference from UTC in minutes using the GetLocalDateTime() method in Blazor using JavaScript Interop. Display the local time by the current offset time difference.
Follow these steps to convert the server time zone to the user’s time zone.
To define the TimeZoneService class and the GetLocalDateTime() method, create a new file named TimeZoneService.cs in your project. Inside the TimeZoneService.cs file, define the TimeZoneService class and implement the GetLocalDateTime() method.
using Microsoft.JSInterop;
namespace BlazorServerApp
{
public class TimeZoneService
{
private readonly IJSRuntime _jsRuntime;
private TimeSpan? _userOffset;
public TimeZoneService ( IJSRuntime jsRuntime )
{
_jsRuntime = jsRuntime;
}
public async ValueTask GetLocalDateTime ( DateTimeOffset dateTime )
{
if (_userOffset == null)
{
int offsetInMinutes = await _jsRuntime.InvokeAsync("blazorGetTimezoneOffset");
_userOffset = TimeSpan.FromMinutes(-offsetInMinutes);
}
return dateTime.ToOffset(_userOffset.Value);
}
}
}
To register the time zone service, add the following code snippet to the Program.cs file.
[Program.cs]
builder.Services.AddScoped(); Create a JavaScript file named BlazorInterop.js within the wwwroot directory and include the provided code snippet in it.
[BlazorInterop.js]
function blazorGetTimezoneOffset() {
return new Date().getTimezoneOffset();
}
To add a reference to the JavaScript file, open the Pages/_Layout.cshtml or _Host.cshtml file, and include the following line of code:
[_Layout.cshtml/_Host.cshtml]
<script src="~/BlazorInterop.js">Finally, you can utilize the service to display a date and time in your application.
[Index.razor]
@page "/"
@inject TimeZoneService TimeZoneService
<h1>Current date and time</h1>
<p>Now (UTC): @DateTimeOffset.UtcNow.ToString()</p>
<p>Now (local): @localTime.ToString()</p>
@code {
DateTimeOffset localTime;
protected override async Task OnAfterRenderAsync ( bool firstRender )
{
if (firstRender)
{
// TODO: Require server render mode while instantiating the component to execute JavaScript in OnInitializedAsync.
// In _Host.cshtml:
localTime = await TimeZoneService.GetLocalDateTime(DateTimeOffset.UtcNow);
}
}
}
To get the current data and time from client, use the date object (new Date()) in JavaScript using JavaScript Interop. It will return the browser’s date and time. Following is the code to get the current date and time from the client in Blazor WebAssembly.
[Index.razor]
@page "/"
@inject IJSRuntime JsRuntime
<p id="date-time"></p>
@code {
protected async override Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JsRuntime.InvokeVoidAsync("GetDateTime");
}
}
} [index.html]
<body>
. . .
. . .
<script>
function GetDateTime() {
// Date object will return browser's date and time by default in JavaScript.
document.getElementById("date-time").innerHTML = new Date();
}
</script>
</body >Google reCaptcha is a process that helps to protect websites form spam and abuse. To implement Google reCaptcha in Blazor, refer to the Google reCaptcha script link the WebAssembly app and render the reCaptcha by calling the JavaScript function.
Follow these steps to implement Google reCaptcha in Blazor WebAssembly.
Add the Google reCaptcha renderer function in a separate JavaScript file under the wwwroot folder.
[googlereCaptcha.js]
function googleRecaptcha(dotNetObject, selector, sitekeyValue) {
return grecaptcha.render(selector, {
'sitekey': sitekeyValue,
'callback': (response) => { dotNetObject.invokeMethodAsync('CallbackOnSuccess', response); },
'expired-callback': () => { dotNetObject.invokeMethodAsync('CallbackOnExpired', response); }
});
};
function getResponse(response) {
return grecaptcha.getResponse(response);
} Add the reCaptcha script link and reference the reCaptcha.js file source in index.html.
[index.html]
<body>
. . .
. . .
<script src="googlereCaptcha.js"></script>
<!-- reCaptcha rendering script -->
<script src="https://www.google.com/recaptcha/api.js"></script>
</body > Now call the rendering reCaptcha function in JavaScript from the Razor page using JavaScript Interop and show the reCaptcha response on button click.
Note: To start using reCaptcha, you need to generate the API site key for your site. Refer to this link to generate the site key.
[Index.razor]
@page "/"
@inject IJSRuntime JSRuntime
@using System.ComponentModel
<h3>Google reCAPTCHA</h3>
<div id="google_recaptcha "></div>
<button class="btn btn-primary" @onclick="ShowResponse">Show Response</button>
<br />
<p>@captchaResponse</p>
@code {
private string captchaResponse;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeAsync<int>("googleRecaptcha", DotNetObjectReference.Create(this), "google_recaptcha ", "your-sitekey");
}
await base.OnAfterRenderAsync(firstRender);
}
[JSInvokable, EditorBrowsable(EditorBrowsableState.Never)]
public void CallbackOnSuccess(string response)
{
captchaResponse = response;
}
[JSInvokable, EditorBrowsable(EditorBrowsableState.Never)]
public void CallbackOnExpired(string response)
{
//...
}
private void ShowResponse()
{
captchaResponse = $"The response for the Google reCAPTCHA widget: {captchaResponse}";
}
}
You can call a JavaScript function with parameters using JavaScript Interop.
Syntax:
JsRuntime.InvokeVoidAsync("JS method name", "parameters");To call a JavaScript method with parameters in Blazor WebAssembly, you can follow the code snippet provided below:
[Index.razor]
@page "/"
@inject IJSRuntime JsRuntime
<p>Here's an example of how to call a JavaScript method with parameters in Blazor WebAssembly.</p>
@code {
protected override async void OnInitialized ()
{
string content = "JavaScript function called with parameter";
await JsRuntime.InvokeVoidAsync("jsFunction", content);
}
} [index.html]
<body>
. . .
. . .
<script>
function jsFunction(value) {
// Parameter value has been passed here.
console.log(value);
};
</script>
</body >Refer to this documentation for more information.
PermalinkClose a browser window from a page in Blazor WebAssembly using JavaScript Interop with the window.close() method. The window.close() method closes the currently opened window.
In the following example, open a new browser window and close it using the window.close() method with a button onclick event.
[Index.razor]
@page "/"
@inject IJSRuntime JsRuntime
<button @onclick="@(e => OnButtonClick("open"))">Open Window</button>
<button @onclick="@(e => OnButtonClick("close"))">Close Window</button>
@code {
private void OnButtonClick(string value)
{
JsRuntime.InvokeVoidAsync($"window.{value}");
}
}Get a user agent in Blazor WebAssembly using JavaScript Interop with the navigator.userAgent property.
[Index.razor]
@page "/"
@inject IJSRuntime JsRuntime
<p>@userAgent</p>
@code {
private string userAgent { get; set; }
protected override async Task OnInitializedAsync()
{
userAgent = await JsRuntime.InvokeAsync<string>("getUserAgent");
}
}
[index.html]
<body>
. . .
. . .
<script>
window.getUserAgent = () => {
return navigator.userAgent;
};
</script>
</body > Window dimension values are read using JavaScript Interop with the window.innerHeight and window.innerWidth properties.
Follow these steps to get the window dimension value in Blazor WebAssembly.
[Index.razor]
@page "/"
@inject IJSRuntime JsRuntime
<h1>Window Dimensions</h1>
<button class="btn btn-primary" @onclick="OnButtonClick">Get Dimensions</button><br /><br />
<p>Window Height: @Height</p>
<p>Window Width: @Width</p>
@code {
public int Height { get; set; }
public int Width { get; set; }
private async Task OnButtonClick()
{
var dimension = await JsRuntime.InvokeAsync<WindowDimension>("getWindowDimensions");
Height = dimension.Height;
Width = dimension.Width;
}
public class WindowDimension
{
public int Width { get; set; }
public int Height { get; set; }
}
}[index.html]
<body>
. . .
. . .
<script>
window.getWindowDimensions = function () {
return {
width: window.innerWidth,
height: window.innerHeight
};
};
</script>
</body >DotNet.invokeMethod and DotNet.invokeMethodAsync are used to call C# methods with parameters from JavaScript in Blazor WebAssembly.
Syntax to call C# from JavaScript:
DotNet.invokeMethodAsync(“C# method assembly name”, “C# method name”, “C# method parameter”); [Index.razor]
@page "/"
@inject IJSRuntime JsRuntime;
<button class="btn btn-primary" @onclick="OnButtonClick">Call C# from JS</button><br /><br />
<p>@content</p>
@code {
private static string content { get; set; }
[JSInvokable] // Return call back from JavaScript with parameter to C#.
public static void JStoCSCall(string value)
{
content = value;
}
private async Task OnButtonClick() // Invoked by button clicking and calls JavaScript function.
{
await JsRuntime.InvokeAsync<object>("invokeJSfromCS");
}
}[index.html]
<body>
. . .
. . .
<script>
Function invokeJSfromCS () {
var value = "C# Method called from JavaScript with parameter";
// Invoke to call C# function from JavaScript with parameter.
DotNet.invokeMethod('BlazorWasmApp', 'JStoCSCall', value);
}
</script>
</body >Refer to this documentation for more details.
PermalinkIn the following example, the cookie consent banner temple will display to notify you to accept cookies. Follow the below steps to create a consent cookie in Blazor.
1. Configure the HttpContextAccessor and CookiePolicyOptions to the Program.cs file to create a consent cookie.
[Program.cs]
builder.Services.Configure<CookiePolicyOptions>(options =>
{
options.CheckConsentNeeded = context => true;
options.MinimumSameSitePolicy = SameSiteMode.None;
});
builder.Services.AddHttpContextAccessor();
var app = builder.Build();
app.UseCookiePolicy();2. Now, add the Cookie consent banner template as a Razor component under the Shared folder.
[ConsentCookie.razor]
@using Microsoft.AspNetCore.Http.Features
@using Microsoft.AspNetCore.Http
@inject IHttpContextAccessor Http
@inject IJSRuntime JSRuntime
@if (showBanner)
{
<div id="cookieConsent" class="alert alert-info alert-dismissible fade show" role="alert">
Consent to set cookies.
<button type="button" class="accept-policy close" data-dismiss="alert" aria-label="Close" data-cookie-string="@cookieString" @onclick="AcceptMessage">
Accept Cookie
</button>
</div>
}
@code {
ITrackingConsentFeature consentFeature;
bool showBanner;
string cookieString;
protected override void OnInitialized()
{
consentFeature = Http.HttpContext.Features.Get<ITrackingConsentFeature>();
showBanner = !consentFeature?.CanTrack ?? false;
cookieString = consentFeature?.CreateConsentCookie();
}
private void AcceptMessage()
{
// JsInterop call to store the consent cookies.
JSRuntime.InvokeVoidAsync("CookieFunction.acceptMessage", cookieString);
}
}3. Add the JavaScript function in the _Layout.cshtml/_Host.cshtml/index.cshtml file to store the cookie.
[_Layout.cshtml]/_Host.cshtml/index.cshtml
<body>
. . .
. . .
<script>
window.CookieFunction = {
acceptMessage: function (cookieString) {
document.cookie = cookieString;
}
};
</script>
</body>4. Refer to the cookie consent banner template Razor component in the MainLayout.razor file.
[MainLayout.razor]
<main>
<div class="top-row px-4">
<ConsentCookie />
</div>
<article class="content px-4">
@Body
</article>
</main>5. Run the application, and you will find the consent cookie banner.
6. Now, click the Accept cookie button to store the cookie in the browser.
A Blazor app can invoke JavaScript functions from .NET methods and .NET methods from JavaScript functions. These scenarios are called JS interop.
There are two methods to call a C# method from JavaScript.
Syntax to call C# from JavaScript:
| DotNet.invokeMethodAsync(“C# method assembly name”, “C# method name”); |
To call a C# method from JavaScript,
[Index.razor]
@page "/"
@inject IJSRuntime JsRuntime;
<button class="btn btn-primary" @onclick="OnButtonClick">Call C# from JS</button><br /><br />
<p>@content</p>
@code {
private static string content { get; set; }
// Return call back from JavaScript to C#
[JSInvokable]
public static void JStoCSCall()
{
content = "C# Method called from JavaScript";
}
// Invoked by button clicking and calls JavaScript function.
private async Task OnButtonClick()
{
await JsRuntime.InvokeAsync<object>("CStoJSCall");
}
}Add the C# function invoke statement to a script tag in the body of the wwwroot/index.html file.
[index.html]
<body>
. . .
. . .
<script>
function CStoJSCall() {
// Invoke to call C# function from JavaScript.
DotNet.invokeMethodAsync('BlazorWasmApp', 'JStoCSCall');
}
</script>
</body >Refer to “Call .NET methods from JavaScript functions in ASP.NET Core Blazor” for more details.
PermalinkBlazor doesn’t manipulate the DOM directly at C# side. You can call the JavaScript method by using JavaScript Interop to get an element by ID or class.
[Index.razor]
@page "/"
@inject IJSRuntime JsRuntime
<h1 id="headingElement">Hello, world!</h1>
<p class="para-element">Welcome to your new app.</p>
@code {
protected override async void OnAfterRender(bool firstRender)
{
await JsRuntime.InvokeVoidAsync("elementId");
}
}[_Host.cshtml]
<body>
. . .
. . .
<script>
function elementId() {
// Get element with the specified ID name
var idValue = document.getElementById("headingElement");
console.log(idValue.innerHTML);
// Get element with the specified Class name
var classValue = document.getElementsByClassName("para-element");
console.log(classValue[0].innerHTML);
}
</script>
</body>Refer to “Call JavaScript functions from .NET methods in ASP.NET Core Blazor” for more details.
PermalinkIn Blazor, you can call a JavaScript method using JavaScript interop to scroll the page to the top position.
In the following code, the button event triggers when the button is clicked and scrolls to the page top.
[Index.razor]
@page "/"
@inject IJSRuntime JsRuntime
<div style="background-color:lightgrey;padding:60px 60px 1000px">
<h2>Blazor App</h2>
This example demonstrates how to scroll to the top based on the button click event.<br />
Scroll down and click the button; it scrolls to the top position.
</div>
<div><br />
<button @onclick="OnButtonClick" class="btn btn-primary">Click Button</button>
</div>
@code {
private async void OnButtonClick()
{
await JsRuntime.InvokeVoidAsync("OnScrollEvent");
}
}[_Host.cshtml]
<body>
. . .
. . .
<script>
// When the user clicks the button, the page scrolls to the top
function OnScrollEvent() {
document.documentElement.scrollTop = 0;
}
</script>
</body>In Blazor, you can call a JavaScript method using JavaScript interop to copy the input element text to the clipboard.
In the following code, the text entered into the text box will be copied by clicking the button, and it will be displayed in the alert box.
[Index.razor]
@page "/"
@inject IJSRuntime JSRuntime
<div class="form-inline">
<input id="form-control" type="text" value="Hello World" />
<button type="button" class="btn btn-primary" @onclick="CopyTextToClipboard">Copy</button>
</div>
@code {
private async Task CopyTextToClipboard()
{
await JSRuntime.InvokeVoidAsync("copyClipboard");
}
}[_Host.cshtml]
<body>
. . .
. . .
<script>
function copyClipboard() {
/* Get the text field */
var copyText = document.getElementById("form-control");
/* Select the text field */
copyText.select();
/* Copy the text inside the text field */
document.execCommand("copy");
/* Alert the copied text */
alert("Copied the text: " + copyText.value);
}
</script>
</body>You can add smooth scrolling to a Blazor app using a combination of Blazor components and JavaScript interop, similar to the functionality available in jQuery UI components.
Step 1: Create a New Blazor App Run the following command to create a new Blazor WebAssembly app:
.NET CLI
| dotnet new blazorserver -n SmoothScrollDemo |
Step 2: Add CSS Styles Open the wwwroot/css/site.css file and add the following CSS class for smooth scrolling:
[wwwroot/css/site.css]
.smooth-scroll {
scroll-behavior: smooth;
} Step 3: Create a SmoothScroll Component Create a new Blazor component named SmoothScroll.razor:
[SmoothScroll.razor]
<!-- Pages/SmoothScroll.razor -->
@page "/Smoothscroll"
@inject IJSRuntime JSRuntime
<h3>Smooth Scrolling Example</h3>
<div class="smooth-scroll">
<p>
This is a demonstration of smooth scrolling in a Blazor app.
Click the button below to smoothly scroll to the bottom of the page.
</p>
<button @onclick="ScrollToBottom">Scroll to Bottom</button>
</div>
<div class="content">
<!-- Add some content here to make the page longer -->
<h4>Smooth Scrolling in Blazor: Elevating User Experience with Elegance</h4>
<p>In the realm of modern web development, the user experience reigns supreme, and every nuance plays a pivotal role in crafting an immersive and delightful interaction. One such understated yet highly impactful element is the art of smooth scrolling. Blazor, the cutting-edge web framework by Microsoft, empowers developers with the ability to seamlessly integrate this feature into HTML elements. By adding an enchanting fluidity to the scrolling mechanism, Blazor transforms the user journey into an elegant dance, enhancing engagement and delivering a heightened sense of sophistication.</p>
<h4>The Essence of Smooth Scrolling</h4>
<p>Smooth scrolling, at its core, is the art of imbuing scrolling actions with an exquisite gracefulness. Unlike the conventional abrupt and jarring movements that characterize traditional scrolling, smooth scrolling introduces a harmonious glide that seamlessly navigates users through various sections or elements on a web page. This simple yet transformative touch has the power to transcend the mundane, transforming user interactions into a symphony of motion and elegance.</p>
<h4>Unveiling the Benefits</h4>
<ol>
<li>
<h6>Enhanced User Engagement:</h6>
By eliminating the disorienting jumps, smooth scrolling creates a captivating rhythm that keeps users immersed and engaged as they explore the content.
</li>
<li>
<h6>Visual Fluidity:</h6>
The graceful transitions between sections establish a visual continuity that feels natural and intuitive, amplifying the overall aesthetics of the website.
</li>
<li>
<h6>Improved Readability:</h6>
For lengthy articles or content-rich pages, smooth scrolling guarantees a comfortable reading experience by gradually revealing the content.
</li>
<li>
<h6> Subtle Sophistication: </h6>
Smooth scrolling lends an air of refinement to the user journey, elevating the perception of the website's design and enhancing its overall brand image.
</li>
<li>
<h6>Extended Time on Page:</h6>
The fluidity and beauty of smooth scrolling entice users to linger, thereby increasing their time spent on the website and fostering a deeper connection.
</li>
</ol>
</div>
@code {
private async Task ScrollToBottom()
{
await JSRuntime.InvokeVoidAsync("scrollToBottom");
}
} Step 4: Add the following JavaScript function for scrolling to the bottom of the page in _Host.cshtml.
[_Host.cshtml]
<body>
…….
<script src="_framework/blazor.server.js"></script>
<script>
window.scrollToBottom = function () {
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
};
</script>
</body> Step 5: Test the Smooth Scrolling Effect Run the Blazor app using the following command:
NET CLI
| dotnet run |
To avoid memory leaks, dispose the DotNetObjectReference instance created by a component properly and allow proper garbage collection. The DotNetObjectReference instance should be disposed either at component side or JavaScript side.
Use the following patterns to dispose DotNetObjectReference at the component level.
@implements IDisposable
@inject IJSRuntime jsRuntime
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
DotNetObjectReference<HelloClass> dotNetObject { get; set; }
protected override void OnInitialized()
{
dotNetObject = DotNetObjectReference.Create<HelloClass>(new HelloClass());
}
async Task IncrementCount()
{
await jsRuntime.InvokeVoidAsync("MyJavaScriptFunction", new object[] { dotNetObject });
}
void IDisposable.Dispose()
{
dotNetObject?.Dispose();
}
}
@code{
public class HelloClass
{
[JSInvokable]
public void CustomMethod() { }
}
}When a component doesn’t dispose the DotNetObjectReference instance, it should be disposed at the JavaScript side as follows.
window.MyJavaScriptFunction = function (dotnetRef) {
dotnetRef.dispose();
}To add Bing Maps to a Blazor application follow the steps.
[Script.js]
function loadBingMap() {
var map = new Microsoft.Maps.Map(document.getElementById('map'), {});
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
map.entities.push(pushpin);
return "";
} [index.html/_Host.cshtml/_Layout.cshtml]
<script src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=api_key' type='text/javascript'></script> [Razor file]
@page "/"
@inject IJSRuntime JSRuntime
<h1>Display Bing Map</h1>
<div id="map" style="height:500px;width:100%;"> </div>
@code {
protected override async Task OnAfterRenderAsync ( bool firstRender )
{
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("loadBingMap", null);
}
}
}To use jQuery UI components in a Blazor application follow the steps:
Refer to the following code sample.
[_Host.cshtml/_Layout.cshtml/index.html]
….
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="~/script.js"></script>
….[index.razor]
@page "/"
@inject IJSRuntime jsRuntime
<h1>jQuery UI Components in Blazor</h1>
<br />
<h2>jQuery Accordion Component</h2>
<br />
<div id="accordion">
<h3>ASP.NET</h3>
<div>
<p>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services.
ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
ASP.NET pages use a compiled,event-driven programming model that improves performance and enables the separation of application logic and user interface.
</p>
</div>
<h3>ASP.NET MVC</h3>
<div>
<p>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller.
The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication.
</p>
</div>
<h3>JavaScript</h3>
<div>
<p>
JavaScript (JS) is an interpreted computer programming language.
It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
More recently, however, it has become common in both game development and the creation of desktop applications.
</p>
</div>
</div>
<br />
<div class="jquery-btn">
<button>Click Me</button>
</div>
<br />
<p>Clicked: <span class="click-count">0</span></p>
<br />
@code {
protected override async void OnAfterRenderAsync(bool firstRender)
{
await jsRuntime.InvokeVoidAsync("renderjQueryComponents");
await base.OnAfterRenderAsync(firstRender);
}
}[script.js]
var clickCount = 0;
function renderjQueryComponents() {
$("#accordion").accordion();
$(".jquery-btn button").button();
$(".jquery-btn button").click(function () {
console.log('Clicked');
$('.click-count')[0].innerText = ++clickCount;
});
}To add Google Maps to a Blazor application, use the Google Maps API script. To initialize Google Maps in Blazor we need to use a JavaScript interop.
Add the following scripts to ~/Pages/_Layout.cshtml /_Host.cshtml for Server Blazor app or ~/wwwroot/index.html for Blazor WebAssembly app.
[_Host.cshtml/_Layout.cshtml/index.html]
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"></script>
</head> [Script.js]
function initialize() {
var latlng = new google.maps.LatLng(40.716948, -74.003563);
var options = {
zoom: 14, center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), options);
} [index.razor]
@page "/"
@inject IJSRuntime JSRuntime
<h1>Display Google Map</h1>
<div id="map" style="height:500px;width:100%;">
</div>
@code {
protected override async Task OnAfterRenderAsync ( bool firstRender )
{
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("initialize", null);
}
}
}In the above example, Google Maps is initialized in the OnAfterRenderAsync life cycle method. By invoking it using a JavaScript interop, this will initialize Google Map API when the page is rendered.
Note: If you’d like to know how to render Google Maps in Syncfusion Blazor Map, take a look at our documentation section.
PermalinkThere is no direct way to detect whether the page is loaded on mobile or desktop in Blazor. We have to find out through the userAgent property from the JavaScript side using a JSInterop call. In order to find out, add a “script.js” file in the wwwroot folder and include the isDevice method call. You can then invoke the isDevice method to identify the correct device.
Refer to the following code for further details.
[wwwroot/script.js]
function isDevice() {
return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile/i.test(navigator.userAgent);
}Refer the script file in the HTML page
[index.html/_Host.cshtml]
<head>
.....
<script src="~/script.js"></script>
....
</head>[index.razor]
@page "/"
@inject IJSRuntime jsRuntime
<h1>Responsive</h1>
<button @onclick="FindResponsiveness">Find Device</button>
<h2>@isDevice</h2>
@code {
private string isDevice { get; set; }
private bool mobile { get; set; }
public async Task FindResponsiveness()
{
mobile = await jsRuntime.InvokeAsync<bool>("isDevice");
isDevice = mobile ? "Mobile" : "Desktop";
}
}
For more details about mobile browser detection, refer to this link.
PermalinkIf you want to show a message using a simple browser alert message box, it is easy to do in Blazor. In Blazor, you can call a JavaScript method using JavaScript interop.
In the following code snippets, the text entered in the text box will be displayed in the alert box. In order to call the JavaScript method in Blazor, you should register the method in the browser window class. You can pass the message you want to show by passing method parameters in the JSRuntime.InvokeAsync method.
[script.js]
window. Alert = function(message) {
alert(message);
}Refer the script file in the HTML page
[index.html/_Host.cshtml]
<head>
.....
<script src="~/script.js"></script>
....
</head>[index.razor]
@page "/"
<input type="text" @bind="message" />
<button class="btn btn-primary" @onclick="Alert"> Alert Me!</button>
@code {
string message = "";
private async Task Alert()
{
await JSRuntime.InvokeAsync<object>("Alert", message);
}
}In Blazor, you can retrieve the IP address of the current request by utilizing the IHttpContextAccessor service. To do this,
@page "/"
@using Microsoft.AspNetCore.Http
<h3> Here's an example of how to retrieve the IP address from HttpContext in Blazor</h3>
<p>Localhost IP address: @ipAddress</p>
@code {
private string? ipAddress;
[Inject]
private IHttpContextAccessor? httpContextAccessor { get; set; }
protected override void OnInitialized ()
{
ipAddress = httpContextAccessor?.HttpContext?.Connection?.RemoteIpAddress?.ToString();
}
} We can focus an InputText Blazor element not directly but by using JavaScript in Blazor. We can set an ID for the InputText and then pass it to JavaScript using interop by method InvokeVoidAsync. In the JavaScript function, use the focus DOM input method for focusing the input element with the received ID from Blazor.
Refer to the following code snippet.
[script.js]
function focusInput(id) {
document.getElementById(id).focus();
}Refer the script file in the HTML page
[index.html/_Host.cshtml]
<head>
.....
<script src="~/script.js"></script>
....
</head>[Index.razor]
@page "/"
@inject IJSRuntime jsRuntime
<EditForm Model="@inputText">
<InputText id="@InputID" @bind-Value="inputText.TextValue">You can enter some text...</InputText>
</EditForm>
<br />
<br />
<button @onclick="Focus">FOCUS!!!</button>
@code {
public string InputID = "input-id";
public string Output = "";
public class InputTextClass
{
public string TextValue = "Some Random Text";
}
public InputTextClass inputText = new InputTextClass();
public async Task Focus()
{
await jsRuntime.InvokeVoidAsync("focusInput", InputID);
}
}
We can change a C# property’s value in Blazor from JavaScript by invoking the method DotNet.invokeMethodAsync in the script file (.js file). It takes the parameters Assembly name (Application name), the method name (public static method), and method parameter where we can change the C# static parameter.
Refer to the following code snippet for more details.
[script.js]
function ChangeContentJS() {
DotNet.invokeMethodAsync('InvokeFromJsApp', "ChangeParaContentValue", "New Content");
}Refer the script file in the HTML page
[index.html/_Host.cshtml]
<head>
.....
<script src="~/script.js"></script>
....
</head>[Index.razor]
@page "/"
@inject IJSRuntime JSRuntime
<h1>Change C# property value from JavaScript</h1>
<br />
<button @onclick='ButtonClickHandler'>Change Content - JS</button>
<br />
<p>@ParaContent</p>
@code {
public static string ParaContent = "Some Text Content";
public async Task ButtonClickHandler()
{
await JSRuntime.InvokeAsync<string>("ChangeContentJS");
}
[JSInvokable]
public static void ChangeParaContentValue(string value)
{
ParaContent = value;
}
}
In the previous example, we have changed the ParaContent C# field value from the JavaScript by calling the static method ChangeParaContentValue from JavaScript, along with the new value as one of parameters in invokeMethodAsync.
You can download the reference sample here.
PermalinkTo 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]
window.SetFocusToElement = (element) => {
element.focus();
};[index.razor]
@inject IJSRuntime jsRuntime
<div tabindex="0" @ref="myDiv">
To focus this div element when refreshing the page.
</div>
@code {
string KeyPressed = "";
protected ElementReference myDiv; // set the @ref for attribute
protected async override Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await jsRuntime.InvokeVoidAsync("SetFocusToElement", myDiv);
}
}
}
To detect keypress event in a div tag, use the @onkeydown event on the current element. In the created example there is a div element with keydown event, and on rendering, the focus to the div element is set by using the JS Interop.
[script.js]
window.SetFocusToElement = (element) => {
element.focus();
};[index.razor]
@inject IJSRuntime jsRuntime
@using Microsoft.AspNetCore.Components.Web
<div class="jumbotron" @onkeydown="@KeyDown" tabindex="0" @ref="myDiv">
<h1 class="display-4"> @KeyPressed </h1>
</div>
@code {
string KeyPressed = "";
protected ElementReference myDiv; // set the @ref for attribute
protected async override Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await jsRuntime.InvokeVoidAsync("SetFocusToElement", myDiv);
}
}
protected void KeyDown(KeyboardEventArgs args)
{
KeyPressed = $"Key Pressed: [{args.Key}]";// get key pressed in the arguments
}
}You can call JavaScript methods from the Blazor pages with the help of JavaScript Interop by injecting the dependency IJSRuntime into the razor page.
[script.js]
function buttonClick() {
// this function triggers on button click
}
Then refer the script in the HTML page of the blazor application.
<script src="~/script.js"></script>[index.razor]
@page "/"
@inject IJSRuntime jsRuntime
<button @onclick="onbuttonclick"> Button </button>
@code {
protected void onbuttonclick (MouseEventArgs args)
{
await jsRuntime.InvokeVoidAsync<object>("buttonClick ");
}
}Check this link for more information.
PermalinkError CS1061 ‘IJSRuntime’ does not contain a definition for ‘Current’ and no accessible extension method ‘Current’ accepting a first argument of type ‘IJSRuntime’ could be found (are you missing a using directive or an assembly reference?)
Solution
In ASP.NET Core 3.0.0-preview3, the Microsoft.Interop.JSRuntime.Current has been removed.
@inject IJSRuntime JsRuntime;
@code {
protected void CallJSMethod()
{
JSRuntime.InvokeAsync<bool>("JSMethod");
}
}Reference link: https://github.com/aspnet/AspNetCore/issues/8117
PermalinkSolution:
‘RegisteredFunction’ does not exist anymore from Blazor v0.5.0.
JavaScript code
function JSMethod() {
document.getElementById('demop').innerText = "JavaScript Method invoked";
}Blazor code
@page "/jsinterop"
@inject IJSRuntime JsRuntime;
@code {
protected void CallJSMethod()
{
JSRuntime.InvokeAsync<bool>("JSMethod");
}
}There are two methods to call a method from JavaScript:
The syntax of calling a C# method from JavaScript is as follows.
DotNet.invokeMethodAsync('C# method assembly name', 'C# Method Name');Add the .NET function invoke statement to a script in the head of Pages/_Host.cshtml file.
<script>
function CSMethod() {
DotNet.invokeMethodAsync('BlazorTestApp', 'CSCallBackMethod');
}
</script>Here we are defining a JavaScript function “CSMethod”. This function will have a callback to our .NET function “CSCallBackMethod” which is defined in index.razor.
To invoke C# method from JavaScript,
@page "/jsinterop"
@inject IJSRuntime JsRuntime;
<button @onclick="WriteToConsole">Call .NET Method</button>
<br />
<p>@message</p>
@code {
protected static string message { get; set; }
[JSInvokable]
public static void CSCallBackMethod()
{
message = "C# Method invoked";
}
private async Task WriteToConsole()
{
await JsRuntime.InvokeAsync<object>("CSMethod");
}
}Reference LinkReference link
https://www.freecodecamp.org/news/how-to-implement-javascript-interop-in-blazor-9f91d263ec51/
PermalinkIn Blazor, IJSRuntime interface is used to invoke a JavaScript function from .NET.
Using the InvokeAsync<T> method of IJSRuntime abstraction, we can call the JavaScript function. This method takes the function name and function parameters as the argument.
Task<T> InvokeAsync<T>(string identifier, params object[] args);The JavaScript function should always be written in the index.html file. Open the wwwroot/index.html file and put in the following code.
<html>
<head></head>
<body>
<app>Loading...</app>
<script src="_framework/blazor.webassembly.js"></script>
<script>
function JSMethod() {
document.getElementById('demop').innerText = "Javascript Method Invoked";
}
</body>
</html>
Open JSInterop.cshtmland put in the following code.
@page "/jsinterop"
@inject IJSRuntime JsRuntime;
<h1>JavaScript Interop</h1>
<hr />
<button class="btn btn-primary" @onclick="@CallJSMethod">Call JS Method</button>
<br />
<div id="demop"></div>
@code {
Protected async void CallJSMethod()
{
await JSRuntime.InvokeAsync<string>("JSMethod");
}
}The method CallJSMethod will call JS function JSMethod by using the JSRuntime.InvokeAsync method.
Important notes
Reference link
https://www.freecodecamp.org/news/how-to-implement-javascript-interop-in-blazor-9f91d263ec51/
PermalinkCurrently, Blazor doesn’t provide any direct way to access the browser’s DOM or APIs. But there is an option to invoke/call JavaScript functions via JS Interop, thereby letting Blazor access the DOM and its APIs. In the below example we have accessed the button’s DOM element in the script by using javascript interop.
[_Host.cshtml/index.html]
<script>
function accessDOMElement() {
var btn;
// access DOM here
btn = document.getElementById('btn');
btn.innerText = "Button Textchanged";
}
</script>[index.razor]
@page "/"
@inject IJSRuntime jsRuntime
<h1>@Title</h1>
<button id="btn" @onclick="UpdateTitle">Update Title</button>
@code {
private string Title { get; set; } = "Hello, World!";
private async void UpdateTitle()
{
await jsRuntime.InvokeAsync<object>("accessDOMElement");
Title = "Hello, Blazor!";
}
}We can make use of JS Interop to open a URL in new tab.
public async Task NavTo(string url, bool isNewTab)
{
if (isNewTab)
{
await JSRuntime.InvokeAsync<object>("open", url, "_blank");
}
else
{
NavManager.NavigateTo(url);
}
}You have to refer to the JavaScript method implemented JS (external-script.js) file in index.html properly and then call the function from .NET using IJSRuntime.
[wwwroot/index.html]
<body>
<app>Loading...</app>
<script src="_framework/blazor.webassembly.js"></script>
<script src="external-script.js"></script>
</body>[wwwroot/external-script.js]
window.methods = {
print: function (message) {
return "from js " + message
}
}[Pages/Index.razor]
@inject IJSRuntime JSRuntime
@code {
private async void PrintMessage()
{
Console.WriteLine(await JSRuntime.InvokeAsync<string>("methods.print", "here is the message"));
}
}You have to use JS Interop to create a cookie in Blazor.
[Razor Page]
@page "/"
@inject IJSRuntime JSRuntime
<p>Here created cookies</p>
<button onclick="@(() => CreateCookie("myCookie", "myValue", 7))">Create Cookie</button>
@code {
private async void CreateCookie ( string name, string value, int days )
{
var test = await JSRuntime.InvokeAsync<string>("methods.CreateCookie", name, value, days);
}
} [index.html]
<body>
….
<script >
window.methods = {
CreateCookie: function (name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
else {
expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
}
}
</script>
</body> You have to access the DOM elements in OnAfterRender or OnAfterRenderAsync of the Blazor component lifecycle.
[JS Helper]
window.methods = {
accessDOM: function () {
// access DOM here
$(".btn").text();
}
}[Razor]
@inject IJSRuntime JSRuntime
<button type="button" class="btn btn-primary">Submit</button>
@code{
protected override void OnAfterRender(bool firstRender)
{
base.OnAfterRender(firstRender);
JSRuntime.InvokeAsync<object>("methods.accessDOM");
}
}Have a look at the Blazor component lifecycle for more information.
PermalinkThis is a known bug and is resolved in the upcoming release of Blazor Preview 3. [Issue Resolved]
[wwwroot/index.html]
<script>
window.interopDuringOnInit = function () {
return "Hello World";
}
</script>[Razor]
@code {
string Greeting;
protected override async Task OnInitializedAsync()
{
try
{
Greeting = await JSRuntime.InvokeAsync<string>("interopDuringOnInit");
}
catch (Exception ex)
{
Console.WriteLine("Could not invoke interop during OnInit, " + ex.ToString());
}
}
}Refer to the thread Tasks returned from JSRuntime.InvokeAsync during OnInitAsync never finishes for more information.
PermalinkAfter Blazor 3.0.0-preview3, the Current was deprecated, and you have to use something like the following code example.
Before
await JSRuntime.Current.InvokeAsync<string>("methods.print", "here is the message")After
await JSRuntime.InvokeAsync<string>("methods.print", "here is the message")The InvokeAsync accepts only params object[] args, so the array of objects is parsed as a single, top-level entry in args. You have to pass the array of objects as a single object by casting. The following code only passes the single array object.
[JS helper]
window.debugOut = function(content) {
console.dir(content);
}[Razor]
await JSRuntime.InvokeAsync<object>("debugOut", new Person[] {
new Person{FirstName=" Nancy",LastName=” Davolio”},
new Person{FirstName=" Andrew", LastName=” Fuller”}
});By casting the array into an object, it retrieves all the values.
await JSRuntime.InvokeAsync< object >("debugOut", (object) new Person[] {
new Person{FirstName=" Nancy",LastName=” Davolio”},
new Person{FirstName=" Andrew", LastName=” Fuller”}
});Refer to the following link for more information. https://github.com/aspnet/AspNetCore/issues/8743
PermalinkTo use existing JavaScript libraries with Blazor, you can utilize JavaScript Interop, which allows you to call JavaScript functions from your C# code and vice versa.
Here are the general steps:
@inject IJSRuntime jsRuntime4. Create a C# method that calls the JavaScript function. Use the InvokeAsync method of the IJSRuntime service to invoke the JavaScript function:
private async Task CallMyLibraryFunction()
{
await jsRuntime.InvokeAsync<object>("myLibrary.myFunction", arg1, arg2);
} In the example above, myLibrary refers to the JavaScript library and myFunction is the name of the JavaScript function that you want to call. arg1 and arg2 are the arguments that you want to pass to the JavaScript function.
Note that the first argument to the InvokeAsync method specifies the name of the JavaScript function that you want to call, followed by any arguments that you want to pass to the function.
5. You can then call the CallMyLibraryFunction method in your component’s Razor markup or C# code.
PermalinkNo, the NavigateTo method in the UriHelper class of Blazor does not have built-in support for opening a URL in a new tab. It is primarily used to navigate within the same browser tab.
To open a URL in a new tab or window, you can use JavaScript interop in Blazor. Here’s an example of how you can achieve this:
[index.razor]
@page "/"
@inject IJSRuntime jsRuntime
@inject NavigationManager uriHelper
@using Microsoft.AspNetCore.Components
<h1>Navigate</h1>
<p>Enter a URL to navigate to:</p>
<input type="text" @bind="@url" />
<br />
<label>
<input type="checkbox" @bind="@openInNewTab" />
Open in new tab
</label>
<br />
<button @onclick="NavigateToUrl">Go</button>
@code {
private string? url { get; set; }
private bool openInNewTab { get; set; }
private void NavigateToUrl ()
{
if (openInNewTab)
{
jsRuntime.InvokeVoidAsync("open", url, "_blank");
}
else
{
uriHelper.NavigateTo(url);
}
}
} Refer to this thread for more information.
View Sample in GitHub
Fax: +1 919.573.0306
US: +1 919.481.1974
UK: +44 20 7084 6215
Toll Free (USA):
1-888-9DOTNET
