Blazor中为IJSRuntime服务添加扩展方法无效问题咨询

核心原因：未导入扩展方法所在命名空间 #

扩展方法的可用性依赖于其所在命名空间被当前代码文件引用。你的扩展方法类IJSExtentionMethods位于blazorTestApp.Client.Classes_FE命名空间下，但主组件代码中没有导入该命名空间，导致编译器无法识别这个扩展方法。

解决方案步骤 #

1. 在主组件中导入扩展方法的命名空间 #

在组件顶部添加@using指令：

@inject IJSRuntime js
@using blazorTestApp.Client.Classes_FE  <!-- 添加这行 -->

@code
{
    // ... 原有代码
}

2. 修正拼写错误（可选但建议） #

你原本想要的方法名是ConfirmMethod，但代码中写成了confirMethod（缺少字母m），建议统一修正方法名以避免混淆：

• 扩展方法类中修改方法名：

public static async ValueTask<bool> ConfirmMethod(this IJSRuntime js, string message)
{
    return await js.InvokeAsync<bool>("confirm", message);
}

• 主组件中调用时同步修改：

var confirm = await js.ConfirmMethod($"Are you sure you want to delete {book.bookName}?");

3. 修正@code块中的语法错误 #

主组件的@code块里不能使用@if，直接去掉@，同时建议对Library添加空值检查避免空引用异常：

if(confirm)
{
    Console.WriteLine($"The book {book.bookName} by {book.author} has been deleted");
    Library?.Remove(book);
}

最终修正后的代码示例 #

主组件代码 #

@inject IJSRuntime js
@using blazorTestApp.Client.Classes_FE

@code
{
    public int one = 1;
    [Parameter] public List<Books>? Library { get; set; }
    
    public async Task deleteBook(Books book)
    {
        var confirm = await js.ConfirmMethod($"Are you sure you want to delete {book.bookName}?");

        if(confirm)
        {
            Console.WriteLine($"The book {book.bookName} by {book.author} has been deleted");
            Library?.Remove(book);
        }
    }
}

扩展方法类代码 #

using Microsoft.JSInterop;

namespace blazorTestApp.Client.Classes_FE
{
    public static class IJSExtentionMethods
    {
        public static async ValueTask<bool> ConfirmMethod(this IJSRuntime js, string message)
        {
            return await js.InvokeAsync<bool>("confirm", message);
        }
    }
}

内容的提问来源于stack exchange，提问作者Saucter