使用JSInterop / Blazor

时间:2019-12-06 15:57:54

标签: javascript c# razor static-methods blazor

(#)第一个帖子

单击表上的项目时,我正在使用JSInterop和Blazor / RazorPages调用方法。 Interop规范仅允许使用静态方法。嗯,从技术上讲,实例方法也可以使用,但是有关该方法的文档确实令人困惑。我几乎可以肯定的是,如果没有Blazor的'@onclick'标签帮助程序,实例方法调用将无法工作-在本示例中无法使用它。

这是有效的方法:

public class Dashboard : PageModel

private readonly DeviceService _deviceService;
public Dashboard (DeviceService deviceService)
{
     _deviceService = deviceService;
}

//I want to use the above instance of deviceService, for a JSInvokable method

[JSInvokable]
public static async Task<List<string>> DeviceDetails(string deviceName)
{
    List < string > details = new List<string>();
    Uri location = new Uri("http://superapi.com/api/devices");
    HttpClient client = new HttpClient();
    client.BaseAddress = location;

    DeviceService dev = new DeviceService(client);

    Device details = await dev.GetDeviceByName(deviceName);

    return details;
}
//This <script> is what the client gets in their browser when they visit the page.
function () {
            var table = $('#<TableName>').DataTable();
            var d = table.row(this).data();
            DotNet.invokeMethodAsync("<namespace>", "DeviceDetails", d[0])
                .then(data => {
                    document.getElementById("Property1").innerHTML = data[0];
                    document.getElementById("Property2").innerHTML = data[1];
                    document.getElementById("Property3").innerHTML = data[2];
                    document.getElementById("Property4").innerHTML = data[3];
                    document.getElementById("Property5").innerHTML = data[4];
                });
        });

invokeMethodAsync的MS文档指出,它仅适用于静态方法,不允许我访问在PageModel中声明的DeviceService实例。它迫使我用“新的”所有东西创建一个难看的新实例。

我认为解决方案可能涉及使用接口或依赖注入,有人建议吗?

1 个答案:

答案 0 :(得分:0)

我通过研究依赖注入找到了答案。我使用以下命令从appsetting.json注册了一个字符串:

IConfigurationSection baseAPI = Configuration.GetSection("BaseAddress");
services.Configure<ApiBaseAddress>(baseAPI);

然后在我注入的页面上:

@inject IOptions<ApiBaseAddress> BaseAddress

现在,我们可以通过参数将此BaseAddress发送到静态方法:

DotNet.invokeMethodAsync("<namespace>", "DeviceDetails", d[0], "@BaseAddress.Value.Uri")

哪些允许我们在URI创建期间访问:

Uri location = new Uri(baseUri + "/api/worker");

虽然这还不是很完美-我真的不希望从头开始创建服务,但是至少我不需要在部署期间更改多段代码。