在一些網頁，像是提供範例程式碼或是網址時，通常旁邊會有一個按鈕，按下去後資訊就自動複製了，非常方便。而最近在用 Blazor 開發 side project 時，就有類似的需求，查了資料，發現還是得呼叫原本的 JS Function，看來即使用 Blazor，還是很難擺脫 JS。

首先，看下列 Razor 語法：

<tbody>
    @foreach (var item in list)
    {
        <tr>
            <td>@item.Name</td>
            <td><a href="@item.Url" target="_blank">@item.Url</a></td>
            <td><input type="button" value="複製文字" @onclick="@(e => CopyToClipboard(@item.Url))" /></td>
        </tr>
    }
</tbody>

再來就是上面表格中呼叫的 CopyToClipboard，它的程式碼如下：

private string message = string.Empty;
List<ToastMessage> messages = new List<ToastMessage>();

private async Task CopyToClipboard(string text)
{
    jsInterop.InvokeVoidAsync("navigator.clipboard.writeText", text);

    ToastMessage message = new ToastMessage
    {
        Type = ToastType.Info,
        Message = $"已複製",
    };
    messages.Add(message);
}

最後，別忘了在頁面最上頭加入宣告：@inject IJSRuntime jsInterop

參考資料