My Blazor .NET Core 5.x "@inject IJSRuntime JS" statement is getting a CS0246 error from Visual Studio 2019

Question

I am working with Blazor and .NET Core 5.x and I am trying to get some JavaScript to work, but the dependency injection statement is not working. Here is what I have:

_Host.cshtml:

@page "/"
@namespace MyAwesomeApp.Pages
@inject IJSRuntime JS
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>My Awesome App</title>
        <base href="~/" />
        <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
        <link rel="stylesheet" href="css/site.css" />
        <script type="text/javascript" src="~/JavaScript.js"></script>
    </head>
    <body onload="start();">
        <component type="typeof(App)" render-mode="ServerPrerendered" />
        .
        .
        .
    </body>
</html>

MainLayout.razor:

@inherits LayoutComponentBase

<div>
    <div>
        <div>
            @Body
        </div>
    </div>
</div>

Index.razor:

@page "/"

<div class="text-center">
    <div id="search_container">
        <form id="" method="" action="">
            <img src="/images/magnifying_glass.svg" type="image/svg+xml" /><input id="search_field" type="text" /><span id="clear_search">&#xd7;</span>
        </form>
    </div>
</div>

JavaScript.js:

var search_field;
var clear_search_button;

function start() {
    search_field = document.getElementById('search_field');
    clear_search_button = document.getElementById('clear_search');

    search_field.focus();

    clear_search_button.addEventListener('click', function () {
        search_field.value = null;
        search_field.focus();
    });
}

However, Visual Studio 2019 is giving me this error on the @inject statement, particularly under the IJSRuntime word:

Error   CS0246  The type or namespace name 'IJSRuntime' could not be found (are you missing a using directive or an assembly reference?)

Hi @Brian,If my answer help you resolve your issue,could you please accept as answer?If not,could you please follow up to let me know?Thanks. — Rena, Feb 03 '21 at 05:17
@Rena My apologies, I am extremely new to Blazor and C# and it has me busy and pulling my hair out. I have accepted your answer, thank you very much for your fantastic assistance! — Brian, Feb 03 '21 at 14:19

score 2 · Accepted Answer · answered Feb 01 '21 at 03:08

For your issue,you need add the namespace in _Host.cshtml:

@using Microsoft.JSInterop;
@inject IJSRuntime JS

But actually,_Host.cshtml is used to add the js file,you need use JSRuntime to invoke the js function in razor component:

@page "/"

@inject IJSRuntime JS

<div class="text-center">
    <div id="search_container">
        <form id="" method="" action="">
            <img src="/images/magnifying_glass.svg" type="image/svg+xml" /><input id="search_field" type="text" /><span id="clear_search">&#xd7;</span>
        </form>
    </div>
</div>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync(
                "start");
        }
    }
}

My Blazor .NET Core 5.x "@inject IJSRuntime JS" statement is getting a CS0246 error from Visual Studio 2019

1 Answers1