欢迎大家来到IT世界,在知识的湖畔探索吧!
在之前，我发表过一篇文章，简单介绍WinForm通过WebView2加载Blazor，如下：
鸡肋还是革新——Blazor进WinForm
桂素伟，公众号：桂迹鸡肋还是革新——Blazor进WinForm
今天接着这个话题，再深入一些。
从C#中调用js函数
项目文件.csproj
<Project Sdk="Microsoft.NET.Sdk.Razor">
<PropertyGroup>
<OutputType>WinExe</OutputType>
<TargetFramework>net7.0-windows</TargetFramework>
<Nullable>enable</Nullable>
<UseWindowsForms>true</UseWindowsForms>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="microsoft.aspnetcore.components.webview.windowsforms" Version="6.0.300-rc.1.5355" />
<PackageReference Include="Microsoft.JSInterop" Version="7.0.0-preview.3.22178.4" />
</ItemGroup>
<ItemGroup>
<Content Update="DomePage.razor">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</Content>
</ItemGroup>
</Project>欢迎大家来到IT世界,在知识的湖畔探索吧!
添加wwwroot和index.html（其他引用文件，参见前一篇文章）
欢迎大家来到IT世界,在知识的湖畔探索吧!<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WinFormsBlazor</title>
<base href="/" />
<link href="{PROJECT NAME}.styles.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="WinFormsBlazor.styles.css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div id="app" class="container">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss"></a>
</div>
<script src="_framework/blazor.webview.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
function showtitle(title) {
document.getElementById("title").innerText = title
}
</script>
</body>
</html>
添加DemoPage.razor页面，这里为了触发C#调用js，用了一个@onclick，真正的调用是IJSRuntime这个对象实例js。
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop;
@inject IJSRuntime js
@implements IDisposable
<div class="row">
<div class="col-12">
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button" @onclick="CallJS" id="button-addon2">C#调用JS</button>
</div>
</div>
</div>
<div>
<h2 id="title"></h2>
</div>
@code {
async Task CallJS()
{
await js.InvokeAsync<object>("showtitle", "当前时间：" + DateTime.Now);
}
}结果：
js调用C#方法
index.html
欢迎大家来到IT世界,在知识的湖畔探索吧!<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WinFormsBlazor</title>
<base href="/" />
<link href="{PROJECT NAME}.styles.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="WinFormsBlazor.styles.css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div id="app" class="container">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss"></a>
</div>
<script src="_framework/blazor.webview.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
function showtitle(title) {
document.getElementById("title").innerText = title
}
//调用静态C#方法
window.callStaticCSharp = (name) => {
DotNet.invokeMethodAsync("WinFormsBlazor02", "CallStaticCSharpAsync", name)
.then(data => {
document.getElementById("message").innerText = data
});
};
//调用实体化C#方法
class CallHelpers {
static dotNetHelper;
static DotNetHelper(value) {
CallHelpers.dotNetHelper = value;
}
static async callInstanceCSharp(name) {
const msg = await CallHelpers.dotNetHelper.invokeMethodAsync('CallInstanceCSharpAsync', name);
document.getElementById("message").innerText = msg
}
}
window.CallHelpers = CallHelpers;
</script>
</body>
</html>
DemoPage.razor
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop;
@inject IJSRuntime js
@implements IDisposable
<div class="row">
<div class="col-12">
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button" @onclick="CallJS" id="button-addon2">C#调用JS</button>
<button class="btn btn-outline-secondary" type="button" onclick="callStaticCSharp('gsw')" id="button-addon2">C#静态调用JS</button>
<button class="btn btn-outline-secondary" type="button" onclick="CallHelpers.callInstanceCSharp('gsw')" id="button-addon2">C#实例化调用JS</button>
</div>
</div>
</div>
<div>
<h2 id="title"></h2>
</div>
<div>
<h2 id="message" style="color:red"></h2>
</div>
@code {
async Task CallJS()
{
await js.InvokeAsync<object>("showtitle", "当前时间：" + DateTime.Now);
}
//静态C#方法
[JSInvokable]
public static async Task<string> CallStaticCSharpAsync(string name) => await Task.FromResult(#34;来自C#静态方法，当前时间：{DateTime.Now}");
//实例化C#方法
[JSInvokable]
public async Task<string> CallInstanceCSharpAsync(string name) => await Task.FromResult(#34;来自C#实例方法，当前时间：{DateTime.Now}");
//下面是实例化方法的辅助方式，把dotNetHelper赋值前端
protected DotNetObjectReference<DomePage>? dotNetHelper;
protected override async Task OnInitializedAsync()
{
dotNetHelper = DotNetObjectReference.Create(this);
await js.InvokeVoidAsync("CallHelpers.DotNetHelper", dotNetHelper);
}
public void Dispose()
{
dotNetHelper?.Dispose();
}
}结果：
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/38187.html
