Blazor For Kids

IBkJsRuntime usage

Using IBkJsRuntimeService to Interact with the User via JavaScript

The IBkJsRuntimeService interface gives you access to useful JavaScript-based features in your Blazor application. These features are designed to help you interact with users in a smooth and consistent way, especially when building custom UI components or handling form actions.

This service is part of the BlazorForKids framework and can be easily used by injecting it into your Blazor components or services.

---

What Does IBkJsRuntimeService Provide?

Here’s the list of methods available in the interface:

public interface IBkJsRuntimeService
{
    Task ShowPopup(BkResultType type, string message);
    Task ShowPopup(IBkCommandResult result);
    Task GoBack();

    Task<bool> GetUserConfirmation(string question, string message);
    Task<bool> GetUserConfirmation(string question, string message, string yesButtonText, string noButtonText);
}

Let’s take a closer look at each method.

---

ShowPopup

The ShowPopup method is used to show a message popup to the user. It’s very useful when you want to inform the user that an operation was successful, failed, or needs attention.

There are two ways to call it:

• ShowPopup(BkResultType type, string message)
  You provide the type of result (Success, Error, or Warning) and the message you want to show.
• ShowPopup(IBkCommandResult result)
  This works especially well with command results returned by the framework, for example from a Mediator command.

Note: This method must be called after the component has rendered — ideally inside or after OnAfterRenderAsync. This is because it uses JavaScript behind the scenes, and calling it too early can lead to runtime errors.

@inject IBkJsRuntimeService JsService
        ...
        IBkCommandResult = await Mediator.EmployeeCreateRequest(model);
        await JsService.ShowPopup(result);
    

GetUserConfirmation

This method allows you to ask the user for confirmation before continuing with an action. It displays a custom popup with "Yes" and "No" buttons.

You can use it in two ways:

• GetUserConfirmation(string question, string message) – shows a simple confirmation dialog
• GetUserConfirmation(string question, string message, string yesButtonText, string noButtonText) – gives you full control over the button labels

This method is not directly used by the framework, but you can use it anytime you need to confirm an action (e.g., deleting an item, submitting a form).

Important: Like ShowPopup, this method also relies on JavaScript. Be sure to call it only after OnAfterRenderAsync or during an event (e.g., button click) to avoid issues.

@inject IBkJsRuntimeService JsService
        ...
        var result = await JsService.GetUserConfirmation("Are you sure?", "This action cannot be undone.");
        if(result)
        {
            // Proceed with the action
        }
    

---

GoBack

This simple method sends the browser back one step in its history — similar to pressing the "Back" button. It’s useful when you want to return the user to the previous page after completing an action.

@inject IBkJsRuntimeService JsService
        ...
        await JsService.GoBack();
    

---

How to Use IBkJsRuntimeService in Your Project

You can inject the interface into any Blazor component or service like this:

@inject IBkJsRuntimeService JsService

            // or in a C# class:
            public class MyService
            {
                private readonly IBkJsRuntimeService _js;

                public MyService(IBkJsRuntimeService js)
                {
                     _js = js;
                }
            }

Once injected, you can use the methods directly. Just remember: these are JavaScript-powered features, so don’t call them too early in the component lifecycle.

---

Understanding When You Can Call JavaScript in Blazor

Blazor runs on the server or in the browser using WebAssembly. When working with JavaScript (via IJSRuntime or services like IBkJsRuntimeService), you must understand when it's safe to make those calls.

Blazor components go through a lifecycle. Here’s a simplified version of the main steps that matter when using JavaScript:

1. OnInitialized / OnInitializedAsync
   This is the first step. It runs when the component is being initialized, but at this point the browser has not yet rendered the UI.
   You must NOT call JavaScript here.
2. OnParametersSet / OnParametersSetAsync
   These run when component parameters are set. Still, the UI has not rendered yet — so no JavaScript calls here either.
3. OnAfterRender / OnAfterRenderAsync
   This is the first moment when the component has been rendered in the browser. You can now safely call JavaScript!
   If you need to run JavaScript only once after the first render, check the firstRender parameter:

   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
       if (firstRender)
       {
           await JsService.ShowPopup(BkResultType.Success, "Component ready!");
       }
   }

Another safe option is to call JavaScript inside event handlers (e.g., button clicks), since those happen after rendering.

<button @onclick="ConfirmDelete">Delete Item</button>

            @code {
                private async Task ConfirmDelete()
                {
                    bool confirmed = await JsService.GetUserConfirmation("Confirm", "Are you sure you want to delete this?");
                    if (confirmed)
                    {
                        // Proceed with deletion
                    }
                }
            }

---

Why This Matters

If you try to call JavaScript too early (before the component is rendered), Blazor will throw a runtime error like:

JSRuntime must be called after the component has rendered.

That’s why you should only use methods from IBkJsRuntimeService after OnAfterRenderAsync or inside event handlers like @onclick, @onchange, etc.

As long as you follow this rule, you can safely use the service anywhere in your app.

---

Recap

• IBkJsRuntimeService helps you show popups and ask for user confirmation using JavaScript.
• Inject it in your components or services just like any other service.
• Only call its methods after rendering (OnAfterRenderAsync) or in user-triggered events (e.g., button clicks).
• More features will be added in future versions.

This service makes it easier to enhance your UI with small but powerful interactions, without writing any JavaScript yourself!

---

More Features Coming Soon

This interface will continue to grow. In the next release of the framework, we plan to add even more JavaScript interaction methods to help you create modern and user-friendly applications more easily.

Stay tuned for updates!