.razor

@foreach (var productrecord in product)
{
    <tr>
        <td>@productrecord.Id</td>
        <td>@productrecord.ProductName</td>
        <td>@productrecord.ProductCode</td>
        <td>
            <!-- Modal Trigger -->
            <button data-target="editmodal@(productrecord.Id)" class="waves-effect waves-light btn modal-trigger">
                                        <i class="Tiny material-icons right">mode_edit</i>編輯</button>
            <!-- Modal Structure -->
            <div id="editmodal@(productrecord.Id)" class="modal">
                <div class="modal-content">
                    <h5>編輯</h5>
                    <p>A bunch of text</p>
                </div>
                <div class="modal-footer">
                    <button class="waves-effect waves-light btn" @onclick="()=>UpdateProduct(productrecord)">儲存</button>
                </div>
            </div>
            <!-- Modal Trigger -->
            <button data-target="deletemodal@(productrecord.Id)" class="waves-effect waves-light btn modal-trigger">
                                        <i class="Tiny material-icons right">delete</i>刪除</button>
            <!-- Modal Structure -->
            <div id="deletemodal@(productrecord.Id)" class="modal">
                <div class="modal-content">
                    <h5>是否要刪除?</h5>
                </div>
                <div class="modal-footer">
                    <button class="waves-effect waves-light btn" @onclick="()=>DeleteProduct(productrecord)">刪除</button>
                </div>
            </div>
        </td>
    </tr>
}

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {

        await base.OnAfterRenderAsync(firstRender);
        if (firstRender)
        {
            await JS.InvokeVoidAsync("M.AutoInit");

        }
    }
}

.js

$(document).ready(function () {
    $('#modal').modal();
    document.onload = M.AutoInit();
});

小弟還是個超級菜鳥，有許多不懂的地方還請各位大神指教了~