原文鏈接：https://blazor-university.com/javascript-interop/calling-javascript-from-dotnet/

從 .NET 調用 JavaScript

JavaScript 應添加到服務器端 Blazor 應用程序的 /Pages/_Host.cshtml 或 Web Assembly Blazor 應用程序的 wwwroot/index.html 中。

然后可以通過將 IJSRuntime 服務注入我們的組件來從 Blazor 調用我們的 JavaScript。

源代碼^[1]

public?interface?IJSRuntime
{ValueTask<TValue>?InvokeAsync<TValue>(string?identifier,?object[]?args);ValueTask<TValue>?InvokeAsync<TValue>(string?identifier,?CancellationToken?cancellationToken,?object[]?args);//?Via?an?extension?classvoid?InvokeVoid(string?identifier,?params?object[]?args);
}

identifier 必須是作用域為全局 window 變量的 JavaScript 函數，但不必在標識符中包含 window。因此，要調用 window.alert，我們只需要指定 alert 作為標識符。

@page?"/"
@inject?IJSRuntime?JSRuntime<button?@onclick=ButtonClicked>Perform?interop</button>@code
{private?async?Task?ButtonClicked(){await?JSRuntime.InvokeVoidAsync("alert",?"Hello?world");}
}

傳遞參數

源代碼^[2]

前面的示例將字符串“Hello world”作為參數傳遞給 JavaScript 警報函數。也可以將復雜對象傳遞給 JavaScript。參數被序列化為 JSON，然后在 JavaScript 中反序列化，然后作為匿名對象類型按值傳遞給被調用的函數。

傳遞給 JavaScript 的所有參數類型必須是基本類型（string / int / 等）或者是 JSON 可序列化的。

創建一個新的 Blazor 應用程序，并添加以下 Person 類。

using?System.Collections.Generic;namespace?PassingComplexObjectsToJavaScript.Models
{public?class?Person{public?string?Salutation?{?get;?set;?}public?string?GivenName?{?get;?set;?}public?string?FamilyName?{?get;?set;?}public?List<KeyValuePair<string,?string>>?PhoneNumbers?{?get;?set;?}public?Person(){PhoneNumbers?=?new?List<KeyValuePair<string,?string>>();}}
}

現在在我們的 Index.razor 頁面中創建一個 Person 實例并將其傳遞給 console.log。

@page?"/"
@inject?IJSRuntime?JSRuntime<button?@onclick=ButtonClicked>Perform?interop</button>@code
{private?async?Task?ButtonClicked(){var?person?=?new?Models.Person{Salutation?=?"Mr",GivenName?=?"Chuck",FamilyName?=?"Morris"};person.PhoneNumbers.Add(new?KeyValuePair<string,?string>("Home",?"+44?(0)121?999?9999"));person.PhoneNumbers.Add(new?KeyValuePair<string,?string>("Work",?"+44?(0)161?999?9999"));await?JSRuntime.InvokeVoidAsync("console.log",?"Hello",?person);}
}

如果我們查看瀏覽器的控制臺輸出，我們應該在單擊按鈕時看到以下內容。

訪問 JavaScript 返回值

源代碼^[3]

到目前為止，我們只使用了 IJSRuntime 擴展方法 InvokeVoidAsync。如果我們想從 JavaScript 函數接收返回值，我們需要使用 InvokeAsync<TValue> 方法。在以下示例中，我們將調用標準 JavaScript 確認函數（返回布爾值）和提示函數（返回字符串）。

@page?"/"
@inject?IJSRuntime?JSRuntime<p>Status:?@Result
</p>
<p><button?@onclick=ShowConfirm>Confirm?popup</button>
</p>
<p><button?@onclick=ShowPrompt>Prompt?popup</button>
</p>@code
{private?string?Result;private?async?Task?ShowConfirm(){bool?confirmed?=?await?JSRuntime.InvokeAsync<bool>("confirm",?"Are?you?sure?");Result?=?confirmed???"You?clicked?OK"?:?"You?clicked?Cancel";}private?async?Task?ShowPrompt(){string?name?=?await?JSRuntime.InvokeAsync<string>("prompt",?"What?is?your?name?");Result?=?"Your?name?is:?"?+?name;}
}

參考資料

[1]

源代碼: https://github.com/mrpmorris/blazor-university/tree/master/src/JavaScriptInterop/CallingJavaScriptFromDotNet

[2]

源代碼: https://github.com/mrpmorris/blazor-university/tree/master/src/JavaScriptInterop/PassingComplexObjectsToJavaScript

[3]

源代碼: https://github.com/mrpmorris/blazor-university/tree/master/src/JavaScriptInterop/AccessingJavaScriptReturnValues