Blazor项目如何调用js文件

以下是来自千问的回答并加以整理:(说一句,文心3.5所给的回答不完善,根本运行不起来,4.0等有钱了试试)

在Blazor项目中引用JavaScript文件(.js)以实现与JavaScript的互操作,可以通过以下步骤:

1)将JavaScript文件放在项目中的 wwwroot 文件夹下。这是Blazor应用的静态资源根目录。

2)若要全局引用一个JS文件(所有组件都可以访问),可以在 _Host.cshtml(对于服务器端Blazor项目)或 index.html(对于WebAssembly Blazor项目)中通过<script>标签引入:

Html

<script src="~/path/to/your/script.js"></script>

这里,~/path/to/your/script.js 是相对于 wwwroot 文件夹的路径。

3)若需要在特定Blazor组件中局部引用和隔离使用JS文件,可以利用Blazor的JS Interop机制,并结合异步加载JS模块功能(从.NET 5开始支持)。在.razor组件中:

首先,确保你的JS文件是一个ES6模块,或者你将其包装在一个立即执行函数表达式(IIFE)中以便暴露出公共API。

ES6模块示例代码:

export function startTyping1() {alert('123');
}

然后,在Razor组件中使用JSModule特性来加载模块,使用model来调用:

public string TestUserServiceName = "";
private IJSObjectReference module; 
protected override async Task OnAfterRenderAsync(bool firstRender)
{if (firstRender == true){module = await jsRuntime.InvokeAsync<IJSObjectReference>("import", "./app.js");await module.InvokeVoidAsync("startTyping");}}
}

说明:

使用vscode创建的默认的blazor项目,没有启动的html文件。在上面的调用js文件中,使用了第2种方式(特定Blazor组件中局部引用和隔离使用JS文件),没有静态去引用js文件。

结构如下:

注意两个“若”,根据实际项目需求和Blazor版本选择合适的引用方式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/232559.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机网络-VLAN原理与配置

之前我们学习了以太网的基础知识&#xff0c;了解了网络交换设备的发展&#xff0c;交换机的工作原理&#xff0c;广播域和冲突域。 一、概述 还简单了解了以太网的CSMA/CD通讯机制&#xff0c;以太网是建立在CSMA/CD (Carrier Sense Multiple Access/Collision Detection&…

VPP配置指南:NAT“三板斧”

正文共&#xff1a;1024 字 15 图&#xff0c;预估阅读时间&#xff1a;1 分钟 前面我们介绍过VSR的NAT配置&#xff08;地址重叠时&#xff0c;用户如何通过NAT访问对端IP网络&#xff1f;地址重叠的时候怎么使用NAT解决访问问题&#xff0c;看这里&#xff09;&#xff0c;可…

k8s之pod

1、pod&#xff1a;k8s中最小的资源管理组件&#xff0c;最小化运行容器化应用的资源管理对象 &#xff08;1&#xff09;pod是一个抽象的概念&#xff0c;可以理解为一个或者多个容器化应用的集合 &#xff08;2&#xff09;一个pod中运行一个容器是最常用的方式 &#xff…

2020年认证杯SPSSPRO杯数学建模A题(第二阶段)听音辨位全过程文档及程序

2020年认证杯SPSSPRO杯数学建模 A题 听音辨位 原题再现&#xff1a; 把若干 (⩾ 1) 支同样型号的麦克风固定安装在一个刚性的枝形架子上 (架子下面带万向轮&#xff0c;在平地上可以被水平推动或旋转&#xff0c;但不会歪斜)&#xff0c;这样的设备称为一个麦克风树。不同的麦…

郑州大学算法设计与分析实验2

判断题 1 #include<bits/stdc.h> using namespace std;const int N 50; int f[N], n;int main() { // freopen("1.in", "r", stdin);ios::sync_with_stdio(false);cin.tie(0);cout.tie(0);cin >> n;f[1] 1; f[2] 1;for(int i 3; i &l…

HttpRunner的测试用例分层机制

测试用例分层介绍&#xff1a; 在接口自动化测试维护过程中&#xff0c;由于测试用例的增加和需求变更导致测试用例的调整&#xff0c;使自动化测试用例的维护非常麻烦&#xff0c;直接关系到自动化测试能否持续有效地在项目中开展。 概括来说&#xff0c;测试用例分层机制的核…

数据库选择题 (期末复习)

数据库第一章 概论简答题 数据库第二章 关系数据库简答题 数据库第三章 SQL简答题 数据库第四第五章 安全性和完整性简答题 数据库第七章 数据库设计简答题 数据库第九章 查询处理和优化简答题 数据库第十第十一章 恢复和并发简答题 2015期末 1、在数据库中&#xff0c;下列说…

PHP运行环境之宝塔软件安装及Web站点部署流程

PHP运行环境之宝塔软件安装及Web站点部署流程 1.1安装宝塔软件 官网&#xff1a;https://www.bt.cn/new/index.html 自行注册账号&#xff0c;稍后有用 下载安装页面&#xff1a;宝塔面板下载&#xff0c;免费全能的服务器运维软件 1.1.1Linux 安装 如图所示&#xff0c;宝…

Redis - 挖矿病毒 db0 库 backup 反复出现解决方案

问题描述 腾讯云的服务器&#xff0c;使用 Docker 部署了 Redis 之后&#xff0c;发现 DB0 中总是出现 4 条 key&#xff0c;分别是 backup01backup02backup03backup04 而自己每次存入 db0 中的数据过一会就会被无缘无故删除掉。 原因分析 挖矿病毒 解决方案 在启动的时候…

外包干了1个月,技术退步一大半。。。

先说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入广州某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…

软件工程:数据流图相关知识和多实例分析

目录 一、数据流图相关知识 1. 基本介绍 2. 常用符号 3. 附加符号 二、数据流图实例分析 1. 活期存取款业务处理系统 2. 工资计算系统 3. 商业自动化系统 4. 学校人事管理系统 5. 教材征订系统 6. 高考录取统分子系统 7. 订货系统 8. 培训中心管理系统 9. 考务处…

win10提示“KBDSF.DLL文件缺失”,游戏或软件无法启动运行,快速修复方法

很多用户在日常使用电脑的时候&#xff0c;或多或少都遇到过&#xff0c;在启动游戏或软件的时候&#xff0c;Windows桌面会弹出错误提示框“KBDSF.DLL文件缺失&#xff0c;造成软件无法启动或运行&#xff0c;请尝试重新安装解决”。 首先&#xff0c;先来了解DLL文件是什么&a…

前台收款单选择的保险公司 提示 往来户不属于该财务组织

前台收款单选择的保险公司 提示 往来户不属于该财务组织 问题避免 新增保险公司的时候&#xff0c;找一个已经存在的保险公司&#xff0c;利用多页签复制的方式来新增 保险公司 不然不能够自动生成 财务客户

Docker学习与应用(六)-Docker网络

1、Docker网络 Docker有多种网络模式可以选择&#xff0c;可以根据应用场景和需求选择合适的网络模式。 桥接模式&#xff08;Bridge Mode&#xff09;&#xff1a;默认情况下&#xff0c;Docker使用桥接模式创建一个虚拟网络&#xff0c;所有容器会连接到这个虚拟网络中。每个…

Qt qDebug基本的使用方法详解

目录 qDebug基本用法输出字符串输出变量值1输出变量值2支持流式输出输出十六进制去除双引号和空格调试输出级别 自定义类型输出自定义日志信息的输出格式示例占位符设置环境变量 关闭QDebug输出Qt工程VS工程 在VS工程中如何查看qDebug输出 DebugView下载 qDebug基本用法 qDebug…

在 sealos 上使用 redisinsight 完美管理 redis

先起一个 redis 集群&#xff0c;在 sealos 上可以点点鼠标就搞定&#xff1a; 简单两步&#xff0c;redis 集群搞定。 再启动 RedisInsight, 是一个 redis 的可视化管理工具。 就可以看到部署后的地址了。进去之后填写 redis 的链接信息即可&#xff1a; 链接信息在数据库的…

查询json数组

步骤一&#xff1a;创建表格 首先&#xff0c;我们需要创建一个表格来存储包含JSON对象数组的数据。可以使用以下代码创建一个名为 my_table 的表格&#xff1a; CREATE TABLE my_table (id INT PRIMARY KEY AUTO_INCREMENT,json_data JSON ); 上述代码创建了一个包含两个列的…

前端文件上传组件最全封装+删除+下载+预览

前言&#xff1a;使用的是若依的框架element uivue2封装的。如果有不对的地方欢迎指出。后台管理使用&#xff0c;文件需要上传。回显列表&#xff0c;详情也需要回显预览 // 开始封装组件&#xff1a;封装在 src/components/FileUpload/index.vue中 <template><div c…

微服务实战系列之API加密

前言 随着一阵阵凛冽寒风的呼啸&#xff0c;新的年轮不知不觉滚滚而来。故事随着2023的远去&#xff0c;尘封于案底&#xff1b;希望迎着新年&#xff0c;绽放于枝头。在2024新岁启航&#xff0c;扬帆破浪之时&#xff0c;让烦恼抛洒于九霄&#xff0c;让生机蓬勃于朝朝暮暮。 …

企业一线员工定岗定编全解析

引言&#xff1a;在生产制造企业中&#xff0c;由于一线员工工作内容单一&#xff0c;与产量线性关系明显&#xff0c;因此针对一线员工的定编方法最简单有效的就是通过数据计算的方式。人力资源专家——华恒智信根据多年以来对生产制造企业定岗定编的关注与研究得出的经验&…