BlazorServer中C#与JavaScript的相互调用

这篇具有很好参考价值的文章主要介绍了BlazorServer中C#与JavaScript的相互调用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

BlazorServer中C#与JavaScript的相互调用

前言:

​ 虽然BlazorServer中推荐使用C#在razor页面中的替代JavaScript来完成逻辑的编写,但当需要使用第三方的javascript文件/组件里的内容时,则难免要在C#中调用其方法或对象反之当你的(用到第三方组件的)Javascript代码想要和后台交互时,则需要调用C#的代码。好在BlazorServer中这两种通信都是支持的。下面将介绍其具体的实现方式。

🌮一.C#调用JavaScript方法

Blazor提供了IJSRuntime组件来提供与JavaScript的交互。

🍎 BlazorServer启动时就已经创建了IJSRuntime的实例,所以你可以直接使用构造方法注入

public class CustomService
{
    private readonly IJSRuntime _runtime;

    public CustomService(IJSRuntime runtime)
    {
        _runtime = runtime;
    }
}

🍌在razor页面(组件)中也是直接获取即可

page "/mytest"
    
<!--直接使用@inject标签获取即可-->
@inject IJSRuntime runtime 

<h3>MyTest</h3>

1.调取公用函数
page "/mytest"
    
<!--直接使用@inject标签获取即可-->
@inject IJSRuntime runtime 

<h3>MyTest</h3>

<button type="button" @onclick="DoNothing">点击</button>

@code {

    public void DoNothing()
    {
        await runtime.InvokeVoidAsync("alert",new object[1] { "FUCKYOU" }); //无返回值
        //runtime.InvokeAsync<>();   有返回值
    }
}

测试结果:

BlazorServer中C#与JavaScript的相互调用,我的BlazorServer入门与实践,C#/.NET CORE,.NET,c#,javascript,开发语言

2.调取外部JavaScript函数

上面的只单独调用公共函数的时候不多,大多数时候需要从别的地方获取。调用方法如下

现有一自定义js文件如下(TestScript.js)

function WhatTheHell() {
    alert("WTF");
}

function WhatTheHell_2() {
    alert("这次有返回值");
    return 123
}

function WhatTheHell_3(param) {
    alert("有返回值及参数");
    console.log(JSON.stringify(param));
    return 10086
}

先将其放到BlazorServer的js文件指定目录下(wwwroot/js/

BlazorServer中C#与JavaScript的相互调用,我的BlazorServer入门与实践,C#/.NET CORE,.NET,c#,javascript,开发语言

再在_Host.cshtml中引入该js文件

BlazorServer中C#与JavaScript的相互调用,我的BlazorServer入门与实践,C#/.NET CORE,.NET,c#,javascript,开发语言

在razor页面中使用

@page "/mytest"

@inject IJSRuntime runtime 

<h3>MyTest</h3>

<button type="button" @onclick="MethodOne">方法一(无返回值和参数)</button>  <br/>
<button type="button" @onclick="MethodTwo">方法二(无返回值)</button>    <br/>
<button type="button" @onclick="MethodThree">方法三(返回值和参数)</button> <br/>


@code {

    public async void MethodOne()
    {
        await runtime.InvokeVoidAsync("WhatTheHell",null);
    }

    public async void MethodTwo()
    {
        var num = await runtime.InvokeAsync<int>("WhatTheHell_2",null);
        Console.WriteLine("获取js的返回值为" + num);
    }
    public async void MethodThree()
    {
        var num =  await runtime.InvokeAsync<int>("WhatTheHell_3", new object[1] { "尼哥" });
        Console.WriteLine("获取js的返回值为" + num);
    }

}

测试结果为:

BlazorServer中C#与JavaScript的相互调用,我的BlazorServer入门与实践,C#/.NET CORE,.NET,c#,javascript,开发语言

当JS的返回值为复杂对象时,则推荐使用IJSObjectReference来获取,具体可以参考

IJSObjectReference 接口 (Microsoft.JSInterop) | Microsoft Learn

🍕 二.JavaScript调用C#方法

在JavaScript中调用C#的方法则比较复杂,需要考虑到静态/动态区分的问题

🌀1.静态方法的调用
DotNet.invokeMethodAsync('AssemblyName', 'Namespace.ClassName', 'MethodName', arg1, arg2);

这将调用指定程序集(AssemblyName)、命名空间(Namespace[可以省略])和类名(ClassName)中的静态方法(MethodName),并传递arg1和arg2作为参数。

例:

@page "/jstest"

@inject IJSRuntime runtime

<h3>Jsusecsharp</h3>

<span style="font-size:36px">到达世界最高城 @Title</span>

<button type="button" @onclick="Change">前往朝圣</button>

@code {
    public static string Title = "沈阳!"; 

    public async void Change()
    {
        await runtime.InvokeVoidAsync("use_csharp",null);
    }

    [JSInvokable]
    public static void ChangeTheTitle()
    {
        Title = "理塘";
    }
}

js文件

async function use_csharp() {
    await DotNet.invokeMethodAsync('BlazorApp2','ChangeTheTitle', null);
}

测试结果:

BlazorServer中C#与JavaScript的相互调用,我的BlazorServer入门与实践,C#/.NET CORE,.NET,c#,javascript,开发语言

✈️ 2…动态方法的调用

下面是微软文档的内容

若要从 JavaScript (JS) 调用实例 .NET 方法,请执行以下操作:

  • 通过将实例包装在 DotNetObjectReference 中并对其调用 Create,将 .NET 实例通过引用传递给 JS。

  • 使用传递的 DotNetObjectReference 中的 invokeMethodAsync(推荐)或 invokeMethod(仅限 Blazor WebAssembly)从 JS 调用 .NET 实例方法。 传入实例 .NET 方法的标识符以及任意自变量。 在从 JS 调用其他 .NET 方法时,也可以将 .NET 实例作为参数传递。

    如下示例中:

    • dotNetHelper 为 DotNetObjectReference。
    • {.NET METHOD ID} 占位符是 .NET 方法标识符。
    • {ARGUMENTS} 占位符是要传递给该方法的以逗号分隔的可选参数,其中每个参数都必须是可执行 JSON 序列化的。

⛵️ 总结:

动态方法的调用需要传递实例(使用DotNetObjectReference对象),需要在方法中设置实例参数,再由实例进行invoke操作。

例:

@page "/jstest"
@using BlazorApp2.Utils

@inject IJSRuntime runtime

<h3>Jsusecsharp</h3>

<span style="font-size:36px">到达世界最高城 @Title</span>

<button type="button" @onclick="Change">前往朝圣</button>

@code {
    public static string Title = "沈阳!";
	//用于传递给JS的实例
    private DotNetObjectReference<Jsusecsharp> objref;

    protected override void OnInitialized()
    {
        objref = DotNetObjectReference.Create(this);
    }

    public async void Change()
    {
        //将实例作为参数传给调用的JS
        await runtime.InvokeVoidAsync("use_csharp_dy",objref);
    }

    /// <summary>
    /// 静态方法
    /// </summary>
    [JSInvokable]
    public static void ChangeTheTitle()
    {
        Title = "理塘";
    }

    [JSInvokable("ChangeTheTitle_2")]
    public void ChangeTheTitle_2()
    {
        Title = "通辽";
    }


}

JS:

async function use_csharp_dy(instance) {
    //instance 即为razor中的objref,由其进行调用
    await instance.invokeMethodAsync('ChangeTheTitle_2', null);
    
}

参数结果:

BlazorServer中C#与JavaScript的相互调用,我的BlazorServer入门与实践,C#/.NET CORE,.NET,c#,javascript,开发语言

未完。。。。。文章来源地址https://www.toymoban.com/news/detail-676571.html

到了这里,关于BlazorServer中C#与JavaScript的相互调用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • OC与Swift的相互调用

    1、在 Build Settings 搜索 Packaging ,设置 Defines Module 为 YES  2、新建 LottieBridge.swift 文件,自动生成桥 ProductName-Bridging-Header.h  3、在 LottieBridge.swift 中,定义Swift类继承于OC类,声明 @objcMembers 或 @objc ,实现相关方法 4、在OC代码中引用 ProductName-Swift.h ,调用Swift相关方法 1、在 Pr

    2024年02月14日
    浏览(44)
  • SpringMVC 怎么和 AJAX 相互调用的

    通过 Jackson 框架就可以把 Java 里面的对象直接转化成 Js 可以识别的 Json 对象。 步骤如下 : a、加入 Jackson.jar b、在配置文件中配置 json 的映射 c、在接受 Ajax 方法里面可以直接返回 Object,List 等,但方法前面要加上@ResponseBody 详细步骤: 在 SpringMVC 中配置一个控制器来处理 AJAX

    2024年02月15日
    浏览(40)
  • 【C与C++的相互调用方法】

      C 和 C++ 之间的相互调用方式存在区别,主要是由于 C 和 C++ 语言本身的设计和特性不同。 函数调用和参数传递方式不同 :C 和 C++ 在函数调用和参数传递方面有一些不同之处。C 使用标准的函数调用约定,而 C++ 在函数调用中可能包含额外的信息,如函数重载和默认参数。

    2024年02月12日
    浏览(35)
  • Vue3父子组件相互调用方法

    下面演示均为使用 setup 语法糖的情况! 参考网址:https://cn.vuejs.org/api/sfc-script-setup.html#defineexpose 子组件需要使用defineExpose对外暴露方法,父组件才可以调用! 1.子组件 2.父组件 3.测试结果 1.父组件 2.子组件 3.测试结果 今天的分享就到这里啦~~ 如有错误,欢迎随时雅正。

    2024年02月11日
    浏览(54)
  • html、css 和 JS(JavaScript) 的相互关联

    工作所需,需要承担一些字体矢量动效玩法实现;调研发现前端可以快速实现一些矢量动画效果; 本文旨在介绍前端的三大利器(HTML / CSS / JS)的区别和联系,就当个引子 HTML CSS JS 介绍 HTML是超文本标记语言的简称,它是一种不严谨的、简单的标识性语言。它用各种标签将页

    2024年02月10日
    浏览(62)
  • javascript中json 对象 数组之间相互转化的示例

    在JavaScript中,你可以使用 JSON.stringify() 将JSON对象转换为JSON字符串,使用 JSON.parse() 将JSON字符串转换为JSON对象。而要将JSON对象转换为数组,可以使用 Object.values() 方法,而要将数组转换为JSON对象,可以使用 Array.reduce() 方法。下面是这些转换的示例代码: 将JSON对象转换为J

    2024年02月16日
    浏览(41)
  • eBPF 入门开发实践教程十一:在 eBPF 中使用 libbpf 开发用户态程序并跟踪 exec() 和 exit() 系统调用

    eBPF (Extended Berkeley Packet Filter) 是 Linux 内核上的一个强大的网络和性能分析工具。它允许开发者在内核运行时动态加载、更新和运行用户定义的代码。 在本教程中,我们将了解内核态和用户态的 eBPF 程序是如何协同工作的。我们还将学习如何使用原生的 libbpf 开发用户态程序,

    2024年02月07日
    浏览(47)
  • 【知识点】python中类的相互调用

    在 Python 中,类可以相互调用。这意味着一个类可以访问另一个类的方法或属性。下面是几个例子: 在同一个文件内,不同类的相互调用例子如下: 代码 在上面的代码中, Dealership 类调用了 Car 类。它通过创建一个 Car 对象来添加汽车,并通过循环遍历汽车列表来显示汽车的

    2023年04月10日
    浏览(36)
  • vue3父子组件相互调用方法详解

    在vue3项目开发中,我们常常会遇到父子组件相互调用的场景,下面以setup语法糖格式详细聊聊父子组件那些事儿。

    2024年02月11日
    浏览(44)
  • websocket与C# socket相互通信

    web端代码就是js代码,C#有两种方式:使用第三方库,如Fleck,使用C#原生socket编程实现   web端:   C#端 方式一:使用第三方库Fleck 参考:http://chanpinxue.cn/archives/979.html   方式二:使用C#原生socket编程自行实现   websocket关闭机制 通信双方都可以主动关闭连接,不管谁关闭连接

    2023年04月23日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包