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.mzph.cn/news/603612.shtml

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

相关文章

基于JAVA的服装店库存管理系统 开源项目

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 角色管理模块2.3 服装档案模块2.4 服装入库模块2.5 服装出库模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 角色表3.2.2 服装档案表3.2.3 服装入库表3.2.4 服装出库表 四、系统展示五、核心代码5.…

Java 11中的新字符串APIs详解

第1章 引言 大家好&#xff0c;我是小黑&#xff0c;咱们都知道&#xff0c;Java作为一种广泛使用的编程语言&#xff0c;每一次更新都会带来不少新鲜事物。而Java 11&#xff0c;作为长期支持&#xff08;LTS&#xff09;版本之一&#xff0c;更是引起了广大开发者的关注。好…

并发(8)

目录 46.Thread.sleep(),Object.wait(),Condition.await(),LockSupport.part()的区别&#xff1f; 47.如果在wait&#xff08;&#xff09;之前执行了notify&#xff08;&#xff09;会怎样&#xff1f; 48.如果在park()之前执行了unpark()会怎样&#xff1f; 49.什么是AQS&…

九州金榜|孩子厌学,作为父母有想做自己的原因吗?

孩子不会天生就厌学&#xff0c;如果孩子天生厌学&#xff0c;那么孩子就不可能学会说话&#xff0c;走路&#xff0c;日常生活&#xff0c;更不可能去上学&#xff0c;孩子厌学因素非常多&#xff0c;而作为父母&#xff0c;你有没有想过是你的原因造成的呢&#xff1f;九州金…

编程语言的未来,通用代码生成器和超级语言

编程语言的未来&#xff0c;通用代码生成器和超级语言 我们生活在一个编程语言种类繁多&#xff0c;百花齐放的年代。形形色色的编程语言覆盖了软件开发的方方面面。如果说这些变成语言有什么共性的话&#xff0c;大家都知道&#xff0c;大多数编程语言是高级语言。 何为高级…

K8S---通过curl访问api

1、列出所有的接口 curl --cacert /opt/kubernetes/ssl/ca.pem --cert /opt/kubernetes/ssl/default-admin.pem --key /opt/kubernetes/ssl/default-admin-key.pem https://10.240.184.74:6443/ 2、列出核心api的版本 curl --cacert /opt/kubernetes/ssl/ca.pem -…

手敲MyBatis(十四章)-解析含标签的动态SQL语句

1.前言 这一章主要的就是要解析动态标签里的Sql语句&#xff0c;然后进行条件语句的拼接&#xff0c;动态标签实现了trim和if标签&#xff0c;所以Sql节点就要加上TrimSqlNode和ifSqlNode&#xff0c;我们最终要获取Sql源&#xff0c;动态Sql语句需要一些处理&#xff0c;所以…

SpringCloud系列篇:核心组件之声明式HTTP客户端组件【远程消费】

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于SpringCloud的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一. 远程消费组件是什么 二. 远程消…

竞赛练一练 第22期:NOC大赛每日一练,python题目刷题第7天,包含答案解析

题目来自:NOC大赛创客智慧编程赛项Python 复赛模拟题(一) 第一题: 编写一个彩票游戏:随机生成一个不重复的五位数作为彩票号,游戏提示用户输入一个五位整数,然后根据下面的规则判断用户是否能赢得奖金,最后要求输出彩票号和奖金。 (1)若用户输入的数字和彩票的数字完…

c语言考试代码

文章目录 文件操作题 “%”&#xff1a;格式化字符串的起始标志。 “0”&#xff1a;表示使用零来填充输出字段的宽度。 “4”&#xff1a;表示输出字段的宽度为4个字符&#xff0c;如果输出的十六进制数不足4位&#xff0c;则在左边用零进行填充。 “x”&#xff1a;表示以十六…

MySql海量数据存储与优化

一、Mysql架构原理和存储机制 1.体系结构 2.查询缓存 3.存储引擎 存储引擎的分类 innodb&#xff1a;支持事务&#xff0c;具有支持回滚&#xff0c;提交&#xff0c;崩溃恢复等功能&#xff0c;事务安全myisam:不支持事务和外键&#xff0c;查询速度高Memory&#xff1a;利…

Spring Boot实现数据加密脱敏:注解 + 反射 + AOP

文章目录 1. 引言2. 数据加密和脱敏的需求3. Spring Boot项目初始化4. 敏感数据加密注解设计5. 实现加密和脱敏的工具类6. 实体类和加密脱敏注解的使用7. 利用AOP实现加密和脱敏8. 完善AOP切面9. 测试10. 拓展功能与未来展望10.1 加密算法的选择10.2 动态注解配置 11. 总结 &am…

CHS_02.1.1.2+操作系统的特征

CHS_02.1.1.2操作系统的特征 操作系统的四个特征并发这个特征为什么并发性对于操作系统来说是一个很重要的基本特性资源共享虚拟异步性 各位同学 大家好 在这个小节当中 我们会学习 操作系统的四个特征 操作系统有并发 共享 虚拟和异部这四个基本的特征 其中 并发和共享是两个…

机器人的末端执行器由什么零件组成,有什么作用。

问题描述&#xff1a;机器人的末端执行器由什么零件组成&#xff0c;有什么作用。 问题解答&#xff1a; 机器人的末端执行器是机器人机械结构的最末端部分&#xff0c;用于执行具体的任务和与环境进行交互。末端执行器通常由多个零部件组成&#xff0c;其主要作用是完成机器…

log4j RCE漏洞原理分析及检测

实现原理 log4j支持使用表达式的形式打印日志&#xff0c;比如 logger.info("system propety: ${sys:user.dir}");问题就在与表达式支持非常多样&#xff0c;其中有一个jndi就是今天的主题 logger.info("system propety: ${jndi:schema://url}");jdk将从…

学习笔记——C++ do while语句

作用&#xff1a;满足循环条件&#xff0c;执行循环语句 语法&#xff1a;do{循环语句}while{循环条件}&#xff1b; 注意&#xff1a;与while的区别在于do while 会先执行一次循环语句&#xff0c;再判断循环条件。 示例&#xff1a;打印0-9的数字 #include<bits/stdc.h…

图神经网络|9.3 邻接矩阵的变换

由于邻接矩阵中一般不会&#xff08;i,i&#xff09;等于1&#xff0c;除非第i个点上有自环。 而如果用邻接矩阵去乘上特征矩阵&#xff0c;那么将丢失自身向自身的贡献。 此时可以再邻接矩阵的基础上&#xff0c;再加上一个单位阵&#xff0c;从而使得最终的结果包含自身对整体…

RedisInsight - Redis官方可视化工具

一、RedisInsight 简介 RedisInsight 是一个直观高效的 Redis GUI 管理工具&#xff0c;它可以对 Redis 的内存、连接数、命中率以及正常运行时间进行监控&#xff0c;并且可以在界面上使用 CLI 和连接的 Redis 进行交互&#xff08;RedisInsight 内置对 Redis 模块支持&#…

JavaWeb——新闻管理系统(Jsp+Servlet)之jsp新闻新增

java-ee项目结构设计 1.dao:对数据库的访问&#xff0c;实现了增删改查 2.entity:定义了新闻、评论、用户三个实体&#xff0c;并设置对应实体的属性 3.filter&#xff1a;过滤器&#xff0c;设置字符编码都为utf8&#xff0c;防止乱码出现 4.service:业务逻辑处理 5.servlet:处…

一文讲透使用SPSS统计分析软件绘制双轴线图

双轴线图主要用来展示两个因变量和一个自变量的关系&#xff0c;并且两个因变量的数值单位不同时的情形。具体来说&#xff0c;双轴线图是指在一幅图上有一个横轴和两个纵轴&#xff0c;适用于三个变量。两个纵轴分别表示一个变量&#xff0c;横轴变量同时适用于两个纵轴上的变…