Blazor 将 javascript 对象作为参数传递给 IJSRuntime

Question

我想将javascript 文件中已经存在的javascript 对象作为参数传递给InvokeVoidAsync 方法：

myJs.js：

var myObject= {a:1,b:2};

MyComponent.razor：

@inject IJSRuntime js

@code {
    private async Task MyMethod()
    {
        await js.InvokeVoidAsync("someJsFunction", /*how to add myObject here? */);
    }
}

如何将myObject 传递给someJsFunction 函数？ （请注意，该函数也应该接受 c# 对象）

Answer 1

我终于找到窍门了，只需使用eval函数：

  private async Task MyMethod()
    {
        object data = await js.InvokeAsync<Person>("eval","myObject");
        await js.InvokeVoidAsync("someJsFunction", data );
    } 

Answer 2

你可以定义一个新的 JS 函数

someJsFunctionWithObj(){
    someJsFunction(myObject);
}

然后改为调用它...

await js.InvokeVoidAsync("someJsFunctionWithObj");

或者创建一个返回对象的 JS 函数 -> 从 C# 中调用它来获取它 -> 然后将其传回，但这似乎很复杂。

听起来您可能真的应该重新考虑您的设计......也许如果您解释了为什么您实际上要这样做，我们可以提出更好的想法？

Answer 3

在下面的示例中，“someJsFunction”接受 Person 类型的对象：

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

在我的 javascript 文件中

var myObject = { name: "Pat", age: 38 }; //a person

//this function provides access to myObject
window.getMyObject = () =>
{
    return myObject;
};

window.someJsFunction = (person) =>
{
    console.log(person);
}

在组件中：

@page "/"
@inject IJSRuntime js


<div>
    <button @onclick="MyMethod" >Click</button>
</div>

@code{

    Person Person;

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            //retrieve myOject and assign to the field Person
            Person = await js.InvokeAsync<Person>("getMyObject");
        }
    }

    private async Task MyMethod()
    {
        if(Person != null)

        //pass Person to someJsFunction
        await js.InvokeVoidAsync("someJsFunction", Person);
    }
}