如何在JavaScript中运行.NET Core代码详情

 更新时间:2022年04月26日 08:30:42   作者:My IO  
这篇文章主要介绍了在JavaScript中运行.NET Core代码详情,DotNetJS可以将C#项目编译为与任何环境兼容的单文件JavaScript库,变可以在JavaScript中运行.NET Core代码,相关操作分享详情,需要的小伙伴可以参考一下

一、前言

在.NET Core中运行JavaScript代码,目前已经有很多实现方案。

但是,如果你希望在纯JavaScript环境中运行.NET Core代码呢?

那么,DotNetJS可能对你有所帮助。

二、DotNetJS

DotNetJS可以将C#项目编译为与任何环境兼容的单文件JavaScript库,无论是Web浏览器,Node.js还是自定义限制空间,如VS Code的Web扩展,都可以正常使用它。

该解决方案基于两个主要组件:

  • JavaScript/dotnet-runtime(npm)使用已编译的C#程序集和.NET运行时WebAssembly模块,以在JavaScript中提供C# 操作性层。该库与环境无关 - 它不依赖于特定于平台的API,如浏览器DOM或节点模块,并且可以作为CommonJS或ECMAScript模块导入,也可以通过浏览器中的脚本标记使用。
  • DotNet/dotNetJS(NuGet)在C#中提供JavaScript互操作性层,并通过MSBuild任务将项目输出打包到单文件JavaScript库中。生成的库包含使用项目程序集初始化的dotnet运行时,并准备用作打包的C#项目的互操作性层。

三、Demo

1. 创建项目

使用VS2022创建一个控制台项目,修改项目文件,文件内容如下:

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
<PropertyGroup>
<TargetFramework>net6.0</TargetFramework>
<EmitSourceMap>true</EmitSourceMap>
<EmitTypes>true</EmitTypes>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="DotNetJS" Version="0.4.0" />
</ItemGroup>
</Project>
  • 指定SDK为Microsoft.NET.Sdk.BlazorWebAssembly
  • 引用DotNetJS Nuget

2. 实现C#代码

实现Program.cs,代码如下:

using DotNetJS;
using Microsoft.JSInterop;
using System;
using System.Threading.Tasks;
namespace HelloDotnetJS;
public partial class Program
{
public static void Main()
{
Console.WriteLine($"HelloDotnetJS 初始化!");
}
[JSFunction]
public static partial string GetBaseAddress();
[JSInvokable]
public async static Task<WeatherForecast[]> Demo()
{
var uri = new Uri(GetBaseAddress());
Console.WriteLine(uri);
var json = await new System.Net.Http.HttpClient { BaseAddress = uri }
.GetStringAsync("weather.json");
var forecasts = Newtonsoft.Json.JsonConvert.DeserializeObject<WeatherForecast[]>(json);
return forecasts;
}
}

Demo方法的具体逻辑如下:

  • 获取网站根路径,使用[JSFunction]指定具体值来源于JS传入
  • 访问网站根路径下的weather.json文件
  • 反序列化json,调用Newtonsoft验证第三方库能否正常使用
  • 返回WeatherForecast集合

在终端窗口执行​​dotnet publish​​​,上述代码将会编译成JS代码文件​​dotnet.js​​。

3. 实现JS代码

创建demo.html,代码如下:

<meta charset="UTF-8">
<script src="dotnet.js"></script>
<script>
//定义GetBaseAddress实现
dotnet.HelloDotnetJS.GetBaseAddress = () => window.location.protocol + "//" + window.location.host;
window.onload = async function () {
//初始化
await dotnet.boot();
console.log("开始执行Demo");
const str = await dotnet.HelloDotnetJS.Demo();
console.log(str);
};
</script>

4. 运行效果

将所有文件部署到网站上,例如http://localhost:5678/: 

如何在JavaScript中运行.NET Core代码_.net_02

weather.json的文件内容如下:

[
{
"date": "2018-05-06",
"temperatureC": 1,
"summary": "My IO"
},
{
"date": "2018-05-07",
"temperatureC": 14,
"summary": "Bracing"
}
]

用浏览器访问​​http://localhost:5678/demo.html​​,在控制台窗口可以看到代码运行正常: 

如何在JavaScript中运行.NET Core代码_json

四、结论

DotNetJS目前还不完善,生成的JS代码文件​​dotnet.js​​尺寸较大,demo代码就有11M。

到此这篇关于如何在JavaScript中运行.NET Core代码详情的文章就介绍到这了,更多相关JavaScript中运行.NET Core内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 重写javascript中window.confirm的行为

    重写javascript中window.confirm的行为

    javascript中window.confirm这个方法很好用,可以弹出一个确认对话框.但有一个问题是,它默认的情况下,将选中那个"确定"按钮,当用户有意无意的在键盘回车,就是说按下Enter键的时候,就会自动返回true。在很多时候其实我们不希望这样
    2012-10-10
  • 微信小程序实现左滑动删除效果

    微信小程序实现左滑动删除效果

    这篇文章主要为大家详细介绍了微信小程序实现左滑动删除效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • javascript定义函数的方法

    javascript定义函数的方法

    javscript中定义和声明函数有三种方式:正常方法 构造函数 函数直接量。
    2010-12-12
  • bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法

    bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法

    日期插件 bootstrap-datetimepicker 在火狐下出现一条报错信息:TypeError: (intermediate value).toString(…).split(…)[1] is undefined.什么原因导致的呢,下面小编给大家分享解决思路,需要的朋友参考下
    2017-03-03
  • JavaScript压缩并加密图片的方法你了解吗

    JavaScript压缩并加密图片的方法你了解吗

    这篇文章主要为大家详细介绍了Python实现学生成绩管理系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 分享十八个杀手级JavaScript单行代码

    分享十八个杀手级JavaScript单行代码

    这篇文章主要给大家分享了十八个杀手级JavaScript单行代码,这些单行代码可以帮助你提高工作效率并可以帮助调试代码,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友可以参考下
    2021-10-10
  • JS如何生成随机验证码

    JS如何生成随机验证码

    这篇文章主要为大家详细介绍了JS如何生成随机验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • js调试系列 控制台命令行API使用方法

    js调试系列 控制台命令行API使用方法

    上次初步介绍了什么是控制台,以及简单的 console.log 输出信息。最后还有两个小问题,我们就当回顾,来看下怎么操作吧
    2014-06-06
  • js获取浏览器的可视区域尺寸的实现代码

    js获取浏览器的可视区域尺寸的实现代码

    js获取浏览器的可视区域尺寸的实现代码,需要的朋友可以参考下。
    2011-11-11
  • 理解JavaScript中的对象 推荐

    理解JavaScript中的对象 推荐

    JavaScript有一种object数据类型,但是这种对象不同于c#或vb中的对象,在c#中,我们通过类创建一个对象,一个类相当于创建对象的模板,定义了对象的属性和方法,这些对象和方法将永远固定,我们不能在运行时不能增加对象的属性和方法。
    2011-01-01

最新评论