我想将Javascipt对象传递给c#方法，而不需要在Mono或Blazor中进行序列化_C#_Blazor

我想将Javascipt对象传递给c#方法，而不需要在Mono或Blazor中进行序列化

c# blazor

我想将Javascipt对象传递给c#方法，而不需要在Mono或Blazor中进行序列化,c#,blazor,C#,Blazor,我想将javascript对象直接传递给Blazor中的c#方法。如果调用GetModel方法，它将返回与我传递的相同的对象，但不是更新的对象。我遵循了以下流程 JavaScript Object export interface ITestItem { data: string; moreData: string; } C# Object public class ITestItem { public string data { get; set; } public

我想将javascript对象直接传递给Blazor中的c#方法。如果调用GetModel方法，它将返回与我传递的相同的对象，但不是更新的对象。我遵循了以下流程

JavaScript Object 

export interface ITestItem {
  data: string;
  moreData: string;
}

C# Object 

public class ITestItem
{
  public string data { get; set; }
  public string moreData { get; set; }
}

Method in C#:

public static ITestItem GetModel(ITestItem item)
{
  item.moreData = "Get Model Working Fine";
  return item;
}

Calling C# method from JavaScript

public getModel() {
 const getModelFunc = Module.mono_bind_static_method(" 
 [Report]Epicor.MetaFx.Wasm.Dynamic.RunClass:GetModel");
  const item: ITestItem = { data: 'Test', moreData: 'checking Get Model' };
  const output = getModelFunc(item);
  console.log(output);
 }

看起来这是Blazor中的

TypeScript

项目

我用ASP.NET Core 3.1尝试了这个解决方案，效果很好

假设您的项目（程序集）名称为CICalc

1.在wwwroot文件夹中添加exampleJsInterop.ts文件

命名空间JSInteropWithTypeScript{
导出接口ITestItem{
数据：字符串；
moreData：字符串；
}
类ExampleJsFunctions{
public getModel（）：void{
常量项：ITestItem={data:'Test'，moreData:'checking Get Model'}；
（窗口如有）.DotNet.invokeMethodAsync（'CICalc'，'GetModel'，item）
。然后（数据=>{
控制台日志（数据）；
});
}
}
导出函数Load（）：void{
窗口['exampleJsFunctions']=新的exampleJsFunctions（）；
}
}
JSInteropWithTypeScript.Load（）；

2.在.csproj中添加buildMicrosoft.TypeScript.MSBuild包引用和编译条件

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netstandard2.1</TargetFramework>
    <RazorLangVersion>3.0</RazorLangVersion>
    <TypeScriptToolsVersion>3.2</TypeScriptToolsVersion>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="3.2.1" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.1" PrivateAssets="all" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="3.2.1" PrivateAssets="all" />
    <PackageReference Include="Microsoft.TypeScript.MSBuild" Version="3.9.7">
      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
      <PrivateAssets>all</PrivateAssets>
    </PackageReference>
    <PackageReference Include="System.Net.Http.Json" Version="3.2.0" />
  </ItemGroup>
  <ItemGroup>
    <TypeScriptCompile Include="wwwroot/exampleJsInterop.ts" />
  </ItemGroup>

</Project>


netstandard2.1
3
3.2
运行时间；建设；本地人；内容文件；分析仪；可传递的
全部的

3.导入index.html中的示例jsinterop.js。重要的是它是.js而不是.ts，因为dotnet将ts编译成js

4.在页面中，添加按钮以触发getModel函数，并添加静态getModelC#函数


触发器.NET静态方法
@代码{
[可调用]
公共静态任务GetModel（ITestItem项）
{
item.moreData=“使模型正常工作”；
返回任务.FromResult（项）；
}
公营学校
{
公共字符串数据{get；set；}
公共字符串moreData{get；set；}
}
}

5.最后，当您单击按钮时，js将从C#获取结果

参考资料：

看起来这是Blazor中的一个

TypeScript

项目