我想将Javascipt对象传递给c＃方法而不在Mono或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 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。。将 exampleJsInterop.ts 文件添加到 wwwroot 文件夹

中

namespace JSInteropWithTypeScript {

    export interface ITestItem {
        data: string;
        moreData: string;
    }
      
    class ExampleJsFunctions {
        public getModel(): void {
            const item: ITestItem = { data: 'Test',moreData: 'checking Get Model' };
            (window as any).DotNet.invokeMethodAsync('CICalc','GetModel',item)
            .then(data => {
                console.log(data);
            });
        }
    }

    export function Load(): void {
        window['exampleJsFunctions'] = new ExampleJsFunctions();
    }
}

JSInteropWithTypeScript.Load();

2。。在.csproj中添加内部版本 Microsoft.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>

3。。在index.html中导入 exampleJsInterop.js 。重要的是它是 .js 而不是 .ts ，因为dotnet会将 ts 编译为 js 。

    <script src="exampleJsInterop.js"></script>

4。在页面中，添加按钮以触发 getModel 函数，并添加静态 GetModel C＃函数

<button type="button" class="btn btn-primary"
        onclick="exampleJsFunctions.getModel()">
    Trigger .NET static method
</button>

@code {
    [JSInvokable]
    public static Task<ITestItem> GetModel(ITestItem item)
    {
        item.moreData = "Get Model Working Fine";
        return Task.FromResult(item);
    }

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

5。。最后，当您单击按钮时，js从C＃获取结果。

参考：Getting Started with TypeScript for JSInterop in Blazor