Blazor .NET与JS相互调用[实战]

Web 专栏收录该内容
6 篇文章 0 订阅

准备工作

  • 如果是Blazor Server 模式,需要将JS方法写入Pages/_Host.cshtml页面中;
  • 如果是Blazor Wasm 模式,需要将JS方法写入wwwroot/index.html页面中
  • 用<script></script>标签包裹起来

从 .NET 调用 JavaScript

html页面:

<script>
        function InitialCarousel() {
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#test1'
                , width: '100%' //设置容器宽度
                , height: '300px'
                , arrow: 'none' //始终显示箭头
                //,anim: 'updown' //切换动画方式
            });
        }
</script>

在razor组件页面上方,键入以下代码:

@inject IJSRuntime jsRuntime

razor组件页面,在需要调用的地方执行以下代码(异步):

//InitialCarousel 为JS方法名
await jsRuntime.InvokeAsync<string>("InitialCarousel");
//或者(有返回值)
var TValue = await jsRuntime.InvokeAsync<string>("InitialCarousel");
//或者(有参数)
var TValue = await jsRuntime.InvokeAsync<string>("InitialCarousel","参数一","参数二");

//若是初始化后加载,建议使用自带的异步方法中:
protected override async Task OnAfterRenderAsync(bool firstRender){}

从 JavaScript 调用 .NET

需求环境:被动触发JS执行代码后,手动调用将结果发送回.NET进行处理;
html代码:

<script>
		//设置为全局变量
        var TempPersons;
        //模拟被动触发事件给变量赋值
        function btnOnclick() {
            TempPersons = "123";
        }
</script>

<script>
		//手动调用此方法将结果传回给.NET 方法
        function QueRenDaoRu(objInstance) {
            objInstance.invokeMethodAsync("SetAddressValue", TempPersons);
        }
</script>

razor代码:

[JSInvokable]
public void SetAddressValue(object obj)
{
	//将obj转化为需要的类型进行处理
}

//异步调用方法
private async Task QueRen()
{
	//此处将当前页面对象传过去
    await jsRuntime.InvokeAsync<string>("QueRenDaoRu", DotNetObjectReference.Create(this));
}

参考:
微软官方:在 ASP.NET Core Blazor 中从 .NET 方法调用 JavaScript 函数
微软官方:从 ASP.NET Core Blazor 中的 JavaScript 函数调用 .NET 方法
Blazor入门笔记(3)-C#与JS交互

  • 1
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值