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#对象）

- nAviD

Answer 1

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

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

- nAviD

---

那真帮了我大忙。顺便说一下，如果你没有 C# 数据结构的表示形式，可以使用通用对象类型。它可以工作，例如：object data = await JSRuntime.InvokeAsync<object>("eval", "myJSStruct"); - Celal Ergün

不建议使用eval。参考链接为 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval#Never_use_eval! 和 https://swimburger.net/blog/dotnet/communicating-between-dotnet-and-javascript-in-blazor-with-in-browser-samples。 - ehsan_kabiri_33

Answer 2

在下面的例子中，“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);
    }
}

- Patrick Tshibanda

Answer 3

您可以按照下面的代码示例轻松创建新的 obj，而不会遇到任何问题：

protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var obj = new{
                Id2= "Remarks"
            };

            await _js.InvokeVoidAsync("Not.addKeyboardListenerEvent", obj);
        }
    }

- sumitkhatrii

Answer 4

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

someJsFunctionWithObj(){
    someJsFunction(myObject);
}

然后调用它即可...

await js.InvokeVoidAsync("someJsFunctionWithObj");

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

听起来你应该重新考虑你的设计...也许如果你解释一下为什么你实际上正在尝试做这个，我们可以提出更好的想法？

- Milney

---

谢谢您的回答，但我想要问题的确切答案。您的答案只是另一种解决问题的方法。 - nAviD

@nAviD - 嗯，答案是目前在Blazor中不可能实现... - Milney