Blazor入门-调用js+例子

参考:
Blazor入门笔记(3)-C#与JS交互 - 半野 - 博客园
https://www.cnblogs.com/zxyao/p/12638233.html
Blazor项目如何调用js文件_blazor加载js-CSDN博客
https://blog.csdn.net/bdbox/article/details/135438411

本地环境:win10, visual studio 2022 community


其他例子写了再更新!

更新:调用单独的js文件

首先将js文件放到wwwroot下,然后修改函数,前面增加export关键字:
在这里插入图片描述
然后在用到这个函数的razor文件中,这样写:

@inject IJSRuntime JsRuntime<button @onclick="ExportSvg">Export SVG</button>
<svg id="mySvg"/>@code {private IJSObjectReference module;protected override async Task OnAfterRenderAsync(bool firstRender){if (firstRender){// 导入。路径是相对wwwroot写的,其他位置参考顶部链接module = await JsRuntime.InvokeAsync<IJSObjectReference>("import", "./exportSvg.js");}}private async Task ExportSvg(){var svgElement = await JsRuntime.InvokeAsync<IJSObjectReference>("document.getElementById", "mySvg");await module.InvokeVoidAsync("exportSvgToImage", svgElement, "png");}
}

调用js函数并传递参数

首先要加上@inject IJSRuntime JsRuntime,在需要调用的地方写:

var name = "world";
var a = 11;
var b = 22;
var element = await JsRuntime.InvokeAsync<string>("interop.runJs", name, a, b);

其中runJs是函数的名称,后面是参数列表。element将得到返回值。再看runJs:

<script>window.interop = {runJs: (name, a, b) => {console.warn("runJs is executing");console.warn("hello " + name);return "OK " + (a + b);}}
</script>

绘制一个半径可随窗口大小变化的圆形

在这里插入图片描述
在这里插入图片描述

@page "/"@inject IJSRuntime JsRuntime<PageTitle>Index</PageTitle><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle id="circle" cx="50" cy="50" r="@radius" fill="blue" />
</svg>@code {private double radius = 20;protected override async Task OnAfterRenderAsync(bool firstRender){if (firstRender){await UpdateCircleRadius();}}async Task UpdateCircleRadius(){var element = await JsRuntime.InvokeAsync<IJSObjectReference>("document.getElementById", "circle");var width = await element.InvokeAsync<int>("getBoundingClientRect").ConfigureAwait(false);radius = width / 10;}
}

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

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

相关文章

六西格玛绿带培训:企业变革的催化剂,个人成长的助推器!

六西格玛绿带培训不仅是一套系统的管理方法&#xff0c;更是一种追求卓越、持续改进的文化和思维方式。它强调以数据为基础&#xff0c;通过科学的分析和决策&#xff0c;实现质量的飞跃和成本的优化。对于企业来说&#xff0c;六西格玛绿带培训能够帮助企业建立可靠的质量管理…

Spring STOMP-消息代理

简单的消息代理 内置的简单消息代理会处理来自客户端的订阅请求&#xff0c;将请求消息存储在内存中&#xff0c;并广播消息给匹配destination的连接客户端。代理支持路径式destination&#xff0c;包括订阅Ant风格的destinations模式。 应用程序也可以使用点分隔&#xff08;…

【车辆安全管理】风险预测

近期又发生了很多车辆事故&#xff0c; https://news.sina.com.cn/s/2024-05-13/doc-inavapur2236074.shtml 其实都是可以避免的&#xff0c;如果车辆有很好的自动减速系统&#xff0c;如特斯拉的FSD系统&#xff0c; 特斯拉的FSD&#xff08;Full-Self Driving&#xff09;…

11、24年--信息技术发展——新一代信息技术及应用

1、物联网 物联网(The Internet of Things)是指通过信息传感设备,按约定的协议将任何物品与互联网相连接,进行信息交换和通信,以实现智能化识别、定位、跟踪、监控和管理的网络。 1.1 技术基础 物联网架构可分为三层:感知层、网络层和应用层。感知层由各种传感器…

AI翻唱+视频剪辑全流程实战

目录 一、AI翻唱之模型训练 &#xff08;1&#xff09;模型部署 &#xff08;2&#xff09;数据集制作——搜集素材 &#xff08;3&#xff09;数据集制作——提升音频质量 方法一&#xff1a;使用RVC提供的音频处理功能。 方法二&#xff1a;可以使用音频剪辑工具Ad…

我是如何免费抵御一个多月的 DDos/CC 攻击的?

今天明月给大家详细分享一下我的博客是如何免费抵御了长达一个多月的 DDos/CC 攻击的&#xff0c;在【现在 DDos/CC 攻击门槛低的可怕&#xff01;】一文里明月就说过现在 DDos/CC 攻击几乎是没有门槛的&#xff0c;任何一个老鼠屎在群里看到你的博客都可以轻松便捷的发动一次 …

R语言数据分析案例-股票题目分析

Value at Risk&#xff08;VaR&#xff09;是一种统计技术&#xff0c;用于量化投资组合在正常市场条件下可能遭受的最大潜在损失。它是风险管理和金融领域中一个非常重要的概念。VaR通常以货币单位表示&#xff0c;用于估计在给定的置信水平和特定时间范围内&#xff0c;投资组…

宝塔助手v1.4.1/手机操控云服务器的神器软件

宝塔助手是以宝塔Linux面板提供的API开发的一款可以随时随地管理服务器的APP。通过这款APP你可以随时随地的查看一台或多台服务器的运行情况&#xff0c;对服务器网站、FTP、数据库、文件进行管理。内置文件编辑器&#xff0c;可以对网站文件进行修改。 链接&#xff1a;https:…

Java PowerMockito static方法/new对象/public方法/private方法/public属性/private属性

Java PowerMockito static方法/new对象/public方法/private方法/public属性/private属性 1 变量Mock1.1 公有变量1.2 私有变量1.3 公有静态变量1.4 私有静态变量 2 方法Mock2.1 共有方法2.2 私有方法2.3 共有静态方法2.4 共有最终方法 3 new对象Mock3.1 共有方法 1 变量Mock p…

【ARM Cortex-M 系列 2.2 -- Cortex-M7 单步调试原理及实现详细介绍】

请阅读【嵌入式开发学习必备专栏】 文章目录 单步调试概述单步执行原理Debug stepping control using the DHCSR 紧接上篇文章 【ARM Cortex-M 系列 2.1 – Cortex-M7 Debug system registers】 单步调试概述 在ARMv7-M架构中&#xff0c;通过使用单步调试&#xff08;Haltin…

数据结构与算法学习笔记一---顺序表的静态存储表示和实现(C语言)

目录 1.顺序表的静态存储过程 1.初始化 2.销毁 3.清空 4.表长 5.获取数据元素 6.直接前驱 7.直接后继 8.插入 9.删除 10.遍历 11.测试代码 前言 这篇博客主要是顺序表的静态分配存储表示。 1.顺序表的静态存储过程 我们使用静态数据来存储顺序表中的数据元素&#…

粒子群算法(Particle Swarm Optimization)

注意&#xff1a;本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 &#xff08;[www.aideeplearning.cn]&#xff09; 算法背景 粒子群优化算法&#xff08;Particle Swarm Optimization&#xff0c;PSO&#xff09;的灵感来源于鸟群或鱼群的觅食行为。想象一下&a…

Shell脚本——批量清理Kubernetes集群中Evicted状态的pod

测试环境有一台宿主机出现了异常&#xff0c;大量的异常日志导致宿主机的磁盘使用率超过了85%&#xff0c;触发了上面的pod驱离策略&#xff0c;该宿主机上的的pod处于Evicted状态。在清理了磁盘之后&#xff0c;得手动处理掉这些Evicted状态的pod。 #!/bin/bash# 获取当前状态…

Teachable Machine:Google开发可在浏览器运行免编程机器学习工具

项目说明 Teachable Machine 是由 Google 开发的一款基于机器学习的在线工具&#xff0c;为用户提供了创建个性化机器学习模型的简便途径&#xff0c;无需深入专业领域或编程技能。 允许用户快速、简单地创建自己的机器学习模型&#xff0c;主要用于进行图像、声音和姿势等数据…

鸿蒙内核源码分析(内核态锁篇) | 如何实现快锁Futex(下)

本篇为快锁下篇&#xff0c;说清楚快锁在内核态的实现&#xff0c;解答以下问题&#xff0c;它们在上篇的末尾被提出来。 鸿蒙内核进程池默认上限是64个&#xff0c;除去两个内核进程外&#xff0c;剩下的都归属用户进程&#xff0c;理论上用户进程可以创建很多快锁&#xff0…

【Unity从零开始学习制作手机游戏】第01节:控制3D胶囊体运动

1. 新建Project L01 使用3D Mobile模板。 2. 建立一个平面&#xff0c;用来承载物体 3. 导入Unity库内的胶囊体 下载 StandardAssets https://download.unitychina.cn/download_unity/e80cc3114ac1/WindowsStandardAssetsInstaller/UnityStandardAssetsSetup-5.6.7f1.exe …

RobbitMQ基本消息队列的消息接收

1.先给工程引入依赖 父工程有了子工程就不用导了 <!--AMQP依赖&#xff0c;包含RabbitMQ--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId> </dependency> 2.配置yml…

未来相遇过去:博物馆藏品管理平台的科技革新之旅

引言&#xff1a; 尊重历史&#xff0c;意味着保护其实体的载体。在博物馆这个时间的容器中&#xff0c;每一件藏品都承载着人类文明的印记&#xff0c;它们是历史的低语&#xff0c;是过去对现在的细语。在这篇文章中&#xff0c;我将带您走进博物馆的幕后&#xff0c;探究藏品…

软件工程中的版本控制有何重要性?

版本控制在软件工程中具有非常重要的作用&#xff0c;它不仅能够帮助开发者管理代码的历史版本&#xff0c;还能够促进团队协作和降低开发风险。以下是版本控制的一些关键重要性&#xff0c;以及如何在使用LabVIEW进行项目开发中应用版本控制&#xff1a; 历史记录保持&#xf…

/proc/modules文件

/proc/modules文件中列出了内核加载的所有模块的信息&#xff0c;与使用lsmod命令类似。 第一列&#xff1a;模块名称 第二列&#xff1a;模块使用的内存大小&#xff0c;单位是bytes 第三列&#xff1a;模块被load的次数 第四列&#xff1a;是否有其他模块依赖此模块&#…