首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

`IJSRuntime.Current`的替代方案。即如何从Blazor Web Assembly应用程序引用的库中获取`IJSRuntime`

IJSRuntime 是 Blazor WebAssembly 应用程序中用于与 JavaScript 交互的重要接口。然而,在某些情况下,你可能需要在引用的库中获取 IJSRuntime 实例,而 IJSRuntime.Current 可能无法直接使用。以下是一些替代方案:

替代方案 1:依赖注入

通过依赖注入,你可以在 Blazor 组件或服务中获取 IJSRuntime 实例,并将其传递给引用的库。

  1. 定义接口和实现
  2. 首先,定义一个接口来抽象 IJSRuntime 的使用:
  3. 首先,定义一个接口来抽象 IJSRuntime 的使用:
  4. 然后,实现这个接口:
  5. 然后,实现这个接口:
  6. 注册服务
  7. Startup.csProgram.cs 中注册这个服务:
  8. Startup.csProgram.cs 中注册这个服务:
  9. 在组件或服务中使用
  10. 现在你可以在任何组件或服务中注入并使用 IJsRuntimeService
  11. 现在你可以在任何组件或服务中注入并使用 IJsRuntimeService

替代方案 2:使用 IJSRuntimeAccessor

Blazor 提供了一个 IJSRuntimeAccessor 接口,可以在服务器端组件中访问 IJSRuntime。虽然这个接口主要用于服务器端,但你可以通过一些技巧在 WebAssembly 中使用它。

  1. 定义接口和实现
  2. 定义一个接口来抽象 IJSRuntime 的使用:
  3. 定义一个接口来抽象 IJSRuntime 的使用:
  4. 然后,实现这个接口:
  5. 然后,实现这个接口:
  6. 注册服务
  7. Program.cs 中注册这个服务:
  8. Program.cs 中注册这个服务:
  9. 在组件或服务中使用
  10. 现在你可以在任何组件或服务中注入并使用 IJsRuntimeService
  11. 现在你可以在任何组件或服务中注入并使用 IJsRuntimeService

应用场景

这些替代方案适用于以下场景:

  • 当你需要在引用的库中与 JavaScript 进行交互时。
  • 当你需要在 Blazor WebAssembly 应用程序的不同部分共享 IJSRuntime 实例时。

参考链接

通过这些替代方案,你可以在 Blazor WebAssembly 应用程序中灵活地获取和使用 IJSRuntime 实例。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Blazor学习之旅(12)JavaScript与Blazor互操作

我们都知道,在Blazor我们可以轻松地使用C#组件而不是JavaScript来创建Web应用程序,但是,这并不代表我们不能继续使用JavaScript提供便利。...接下来,我们就来看看如何Blazor应用中加载JavaScript代码,又如何在JavaScript调用.NET代码。...在Blazor调用JavaScript代码 加载方式 将JavaScript添加到Blazor应用方式与添加到标准HTML Web应用一样,都是使用HTML元素。...然后,你就可以在C#代码中继续通过 IJSRuntime 调用第三方JavaScript函数了。...Dispose(); } } 效果演示: 小结 本篇,我们了解了什么是BlazorJS互操作,并通过两个DEMO了解了如何Blazor中加载JavaScript代码 以及 如何在JavaScript

55110

如何使用 Blazor 框架在前端浏览器中导入和导出 Excel

前言 Blazor 是一个相对较新框架,用于构建具有 .NET 强大功能交互式客户端 Web UI。...一个常见用例是将现有的 Excel 文件导入 Blazor 应用程序,将电子表格数据呈现给用户,并且能够允许进行任何更改,最后将该数据导出回 Excel 文件或将其保存到数据。...以下是在 Blazor 中导入/导出电子表格文件步骤: 创建 SpreadJS Blazor 组件 创建 Blazor 应用程序Blazor 应用程序中导入 Excel Blazor 应用程序...首先,我们可以使用“Blazor WebAssemblyApp”模板添加一个新项目: 要添加 SpreadJS 组件,我们需要在解决方案资源管理器右键单击这个新项目的依赖项,然后单击“添加项目引用”...应用程序运行 SpreadJS 所需全部内容: Blazor Excel 导入 前面的代码只是 SpreadJS 在 Blazor 应用程序基本用法,但我们可以通过包含一些 Excel 导入功能来添加它

31220
  • 集成Ids4,实现统一授权认证

    ,这里我我们再来一个前情回顾: 《我『MVP.Blazor』快速创建与部署》 在这篇文章,我们简单了解了下,什么Blazor,他能做些什么,以及如何快速入门和部署,属于一个认知阶段,熟话说万事开头难...这篇文章我用了很简单,可以说很low方法,对资源api实现了鉴权,当然,我在文章也说了,这种方案肯定不靠谱。...,具体内容不做赘述; 3、blazor项目引用 我们都知道Blazor.Server更像是一个netcore项目,那如何引用js文件呢,很简单,之前文章我也讲过,有一个统一主页面,用来承载整个app...,那就是_Host.cshtml,我们就这几在这里引用即可,如果你是用WASM的话,直接有一个index.html,和这个是同一个道理: (在Blazor.Server引用js文件) 那现在我们都配置好了客户端和连接...,也引用到了Blazor项目里,那如何去调用具体js方法呢,请往下继续看。

    2.1K20

    Blazor 依赖项注入

    依赖注入 (DI) 是一种通过关注点分离来促进软件松散耦合技术。在 Blazor 应用程序上下文中,DI 鼓励你为特定任务开发离散服务,然后将这些服务注入到需要使用其功能组件和类。...Blazor 服务 Razor 组件主要与 UI 表示有关。生成 UI 所涉及部分工作通常涉及与数据存储进行通信,可能是通过 Web 服务。可能需要记录组件操作和事件。...如果要在组件上运行单元测试,则需要找到一种方法,将类替换为实际上不与数据Web 服务通信假类或模拟类。现在想象一下,如果这个问题扩展到数十个或数百个组件。...它被注册为单例,这意味着在应用程序生命周期内只有一个实例可用。 为了回答第二个悬而未决问题,依赖注入系统负责在引用抽象时提供指定类型实例,并管理其生存期。...作用域Scoped:在Blazor Server应用程序,注册为scoped服务范围是当前(SignalR)连接(或用户)。作用域服务在WebAssembly应用程序中注册为单例。

    22210

    ASP.NET Core Blazor Webassembly 之 路由

    web最精妙设计就是通过url把多个页面串联起来,并且可以互相跳转。我们开发系统时候总是需要使用路由来实现页面间跳转。传统web开发主要是使用a标签或者是服务端redirect来跳转。...那今天来看看Blazor如何进行路由。 使用@page指定组件路由path 我们可以在Blazor里给每个组件指定一个path,当路由匹配时候会显示这个组件。...使用a标签进行页面跳转 a标签作为超链接是我们web开发最常用跳转方式,blazor同样支持。...下面我们演示下如何Page A传递一个参数到Page B。我们预设Page A里面有个UserName需要传递到Page B,并且显示出来。...>(); jsruntime.InvokeVoidAsync("history.back"); } } 这个扩展方法很简单,DI容器里获取IJSRuntime

    2.8K10

    Blazor WASM 实现人民币大写转换器

    Blazor Blazor 是 .NET Core 时代微软推出用于 Web 应用开发新框架,它可以运行在服务器端,也可使用 WASM 运行在客户端,浏览器。...更重要是,既然是原汁原味 .NET,就可以很方便重用以前代码,以及现成成千上万个 NuGet 包,而不用像一个新发明框架那样0开始积累生态。...一个 Blazor WASM 项目的典型结构如上图。Program.cs 包含应用如何启动与承载逻辑。 wwwroot 文件为纯 HTML/CSS/JS 文件,不包含.NET逻辑。...可重用代码 人民币大写转换类与框架和平台无关,因此完全可以直接复制到Blazor工程里用, RMBConverter.cs。...总结 使用 Blazor WASM 开发 Web 应用能够让 .NET 程序员充分利用既有的知识和技能快速上手,结合 Web 强大生态 与 .NET 高效生产力,成就不凡。

    2.2K10

    Blazor学习之旅(1)初步了解Blazor

    使用 Blazor Server 开发应用程序会在 Web 服务器上生成 HTML,因为网站访客通常使用 Web 浏览器来请求此内容。...微软在官方文档也给出了如何抉择何时使用BlazorBlazor 是一种非常棒用户界面框架,适用于已熟悉 .NET 并且希望获得用于设计和交付基于 HTML 应用程序各种选项开发人员。...综合上述准则,决定在下一个应用程序中使用 Blazor WebAssembly 还是 Blazor Server 时,请参考下表。 Blazor和主流前端框架如何选择?...但作为基于Web Assembly前端框架,它依然还是特别的:WASM普及和发展,一定会利及Blazor,使其在未来有更大发展空间。...这里举一个即将实现例子:由于WASM可以在非Web环境下运行,那么Blazor将来也可以用于开发运行在非Web环境下UI程序,这在官方计划已经提及——Blazor Web Assembly MAUI

    84520

    MAUI 与 Blazor 共享一套 UI 实现(五端通用)

    看看这篇文章《Blazor Hybrid/MAUI 简介和实战[1]》对MAUI Blazor说明: MAUI .NET 多平台应用程序 UI (.NET MAUI) 是一个跨平台框架,用于使用 C#...和 XAML 创建本机移动和桌面应用程序, 使用 .net MAUI,可以开发可在 Android、iOS、macOS 上运行应用,Windows 以及单个共享代码运行应用。...NET MAUI 包含 BlazorWebView 控件,该控件运行将 Razor 组件呈现到嵌入式 Web View 。...今天就分享如何Blazor Server、Blazor Wasm、MAUI Blazor之间共享UI实验,这一步完成,后面开发应用时就方便多了(只针对UI修改)。 2....FetchData.razor文件@code{}),那把这部分文件直接提取到类中就可以了,那就做吧。

    3.9K10

    (730)Blazor系列:生命周期(Lifetime)

    必须自己注册) IJSRuntime:提供Javascript runtime组件处理JS功能,Blazor WebAssembly生命周期为Singleton,Blazor Server生命周期为Scoped...Singleton是指程序启动到结束都只会有一个实例,所有Component共用一个实例。 Transient则是每次使用该Component时,都会产生一个新实例。...首先建立一个接口IGuidService,里面只有一个类型为string属性UId,接着建立类GuidService并在构造函数初始化属性UId为GUID字符串,再去Program.cs使用AddTransient...上述例子是以Blazor Server进行,若以Blazor WebAssembly进行,则Singleton会产生跟Blazor Server不同情况,原因就是Blazor WebAssembly...注:笔者为了方便省略视频某些内容,有兴趣的人可以再研究 引用Blazor Course-Use ASP.NET Core to Build Full-Stack C# Web Apps ASP.NET

    1.3K30

    .NET 8 Release Candidate 1 (RC1)现已发布,包括许多针对ASP.NET Core重要改进!

    以下是此预览版新功能摘要: 服务器和中间件 默认情况下禁用HTTP/3 API编写 在最小API、MVC和SignalR中支持键入服务 Blazor Blazor Web App模板更新 额外程序集中发现用于静态服务器呈现组件...Blazor Web App模板更新 在.NET 8,我们一直在增加Blazor功能,以便您可以使用Blazor组件来满足您所有Web UI需求。...代码,包括方法和应用程序方法。...这个更改基于用户和作者关于如何命名其自己计数器反馈。OpenTelemetry是一种现有的已建立标准,.NET内置度量和更广泛.NET生态系统遵循该标准是有益。...已经找到了原因,并在RC2解决了此问题。 Blazor Web App模板创建多个计数器组件 Blazor Web App在启用交互式WebAssembly组件时采用了不必要解决方案

    32940

    Blazor WebAssembly 修仙之途 - 初尝

    Blazor Server 将组件呈现逻辑 UI 更新应用方式中分离出来。 Blazor Server 在 ASP.NET Core 应用添加了对在服务器上托管 Razor 组件支持。...运行时处理浏览器向服务器发送 UI 事件,并在运行组件后,将服务器发送 UI 更新并重新应用到浏览器。...Blazor WebAssembly 使用开放 Web 标准(没有插件或代码转换),适用于移动浏览器等各种新式 Web 浏览器。...(2)Blazor WebAssembly 则不同,无需通过服务端来执行C#代码,直接在浏览器执行,来更新UI,获取数据。类似于 Ajax ,通过调用 HTTP Api 来获取数据。...初体验 1.运行浅析 入口点在 wwwroot/index.html 通过 blazor.webassembly.js 下载 .NET 运行时、应用程序和依赖。

    3.5K10

    Blazor资源大全,很棒Blazor(1)

    Blazor应用程序由使用C#、HTML和CSS实现可重用Web用户界面组件组成。客户端和服务器代码都是用C#编写,允许您共享代码和。 更多信息请参阅官方Blazor网站[22]。...GitHub存储[37] - 官方Blazor存储ASP.NET Core存储)。 'Hello World'示例[38] - 'Hello World'示例。...Meadow Weather[110] - 在此示例,Meadow微控制器LM35温度传感器获取数据。...该数据通过HTTP请求发送到API控制器端点,并存储在数据,可以使用Blazor Web应用程序图表进行可视化。...TypinExamples[161] - 一个演示如何Blazor SPA应用程序中使用Typin[162]框架示例项目(使用Xterm.js和自定义C# Web Workers实现在浏览器模拟终端体验

    53450

    如何注册服务?

    [C#] Blazor练习 依赖注入 [C#] Blazor练习 依赖注入2 如何注册服务? 在 Blazor ,需要先注册服务,然后才能将其注入组件。...通常,服务在 Program.cs 文件中注册,该文件是配置应用程序依赖项注入容器位置。 要注册服务,您需要在 Program.cs 文件 和 方法之间插入注册码。...例如,数据访问层服务可能需要数据连接字符串。...例如,如果 Web 应用程序依赖于数据服务来存储和检索数据,则该 Web 应用程序将被视为依赖服务,而数据服务将被视为父服务或上游服务。...每个作用域都有自己生存期,可以三个不同作用域中进行选择: 单例 Singleton 作用域范围 Scoped 瞬态 Transient 单例服务范围 单一实例作用域用于注册应仅创建一次并在整个应用程序之间共享服务

    34030

    Blazor入门_blazor视频教程

    这篇文章演示了如何使用Blazor构建SPA应用。Blazor简化了可在任何浏览器运行快速且美观SPA任务。它通过使开发人员能够编写基于DotnetWeb应用程序来实现此目的。...这些应用程序可以在使用了开放Web标准浏览器运行。让我们开始使用Blazor吧。...首先,在服务器端使用Razor组件,接下来,在浏览器中将应用程序作为Web Assembly运行。 服务器端 支持在 ASP.NETCore 应用程序服务器上托管 Razor组件。...客户端 Blazor应用程序以及.NET运行时和其他依赖项已下载到浏览器。另外,你可以在客户端和服务器端之间共享模型、验证和其他业务逻辑。此外,你还可以利用在浏览器上直接运行几个.NET 。... ASP.NET CORE3.0开始,建议使用 @code,而不是 @function。 总结 简而言之,本文试图介绍 Blazor,以及如何使用 Blazor创建你第一个应用程序

    4.7K20
    领券