locked
RazorClassLibrary 组件 如何注入 js 文件 RRS feed

  • 问题

  • 1、创建 Razor 类库,命名为 RazorClassLibrary1,目标框架 .net 5.0,不勾选 支持页面和视图,创建。

    2、在 wwwroot/js, 添加一个js文件,命名:JavaScript1.js,js内容如下:

    function test() {
        alert("Good Morning");
    }

    3、在 _Imports.razor 文件中,添加@using Microsoft.JSInterop

    4、在 Component1.razor 中,添加以下代码:

    @inject IJSRuntime jsRuntime
    
    
    <input type="button" onclick="test()" value="Click Me" />
    
    
    @code{
    
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            await jsRuntime.InvokeVoidAsync("loadScript", "https://code.jquery.com/jquery-3.4.1.js");
            await jsRuntime.InvokeVoidAsync("loadScript", "js/JavaScript1.js");
    
            await base.OnAfterRenderAsync(firstRender);
        }
    
    }

    5、新建 Blazor WebAssembly 应用,添加RazorClassLibrary1 项目引用,在_Imports.razor 添加 @using RazorClassLibrary1 ,在 Index.razor ,添加<Component1></Component1>

    6、Blazor WebAssembly 应用项目,为什么,按钮点击后,不起作用?要怎样才能把 js 的文件也被引用过来?

    2021年8月27日 9:48

答案

  • 您好,

    我认为有两个解决方案:

    1.从引用的RCL 使用静态资产

    2.使用反射读取嵌入的资产内容

    你可以参照以下内容:https://stackoverflow.com/questions/61431122/referencing-javascript-file-from-a-different-assembly-in-a-blazor-project

    2021年9月1日 9:56

全部回复

  • 您好,

    您可以使用 IJSRuntime 和使用ES 模块 IJSObjectReference. IJSRuntime.InvokeAsync 允许调用import 函数并允许保留对加载的ES模块的引用.

    您可以参照以下例子: https://www.meziantou.net/javascript-isolation-in-blazor-components.htm

    2021年8月30日 8:27
  • 1、首先非常感谢您在百忙之中,来指导我的不足之处。

    2、如果 组件 跟 调用方,都是同一个项目,是可以调用到js。现在主要问题,组件类是一个独立的项目,调用方是引用该项目,才导致无法调用js。

    3、组件 Component1.razor 和 js 文件,这两个文件,都在 RazorClassLibrary  项目中,该 组件类 是一个独立的项目。

    项目地址:https://github.com/Sg3361382/IJSRuntime.git(注意:vs2022 创建项目)

    2021年9月1日 0:38
  • 您好,

    我认为有两个解决方案:

    1.从引用的RCL 使用静态资产

    2.使用反射读取嵌入的资产内容

    你可以参照以下内容:https://stackoverflow.com/questions/61431122/referencing-javascript-file-from-a-different-assembly-in-a-blazor-project

    2021年9月1日 9:56