BlazorFiddle - Blazor .Net Developer Playground and Code Editor in the Browser.

Index

@page "/"
@using MatBlazor

<MatTable Items="@cars" class="mat-elevation-z5">
    <MatTableHeader>
        <th>Name</th>
        <th>Price</th>
        <th>Horsepower</th>
        <th></th>
    </MatTableHeader>
    <MatTableRow>
        <td>@context.Name</td>
        <td>@String.Format("${0:f2}", @context.Price)</td>
        <td>@context.Horsepower</td>
        <td>
            <MatButton OnClick="@OpenDialog" Raised="true">Pick one</MatButton>
        </td>
    </MatTableRow>
</MatTable>

<MatDialog @bind-IsOpen="@dialogIsOpen">
    <MatDialogTitle>Hi</MatDialogTitle>
    <MatDialogContent>
        <p>What's your favorite animal?</p>
        <MatTextField @bind-Value="@dialogAnimal"></MatTextField>
    </MatDialogContent>
    <MatDialogActions>
        <MatButton OnClick="@(e => { dialogIsOpen = false; })">No Thanks</MatButton>
        <MatButton OnClick="@OkClick">OK</MatButton>
    </MatDialogActions>
</MatDialog>

@code {

    bool dialogIsOpen = false;
    string dialogAnimal = null;
    string animal = null;

    void OpenDialog()
    {
        dialogAnimal = null;
        dialogIsOpen = true;
    }

    void OkClick()
    {
        animal = dialogAnimal;
        dialogIsOpen = false;
    }

    public class Car
    {
        public string Name { get; set; }
        public double Price { get; set; }
        public int Horsepower { get; set; }

        public Car(string name, double price, int horsepower)
        {
            Name = name;
            Price = price;
            Horsepower = horsepower;
        }
    }

    Car[] cars = new[]
    {
        new Car("Volkswagen Golf", 10000, 220),
        new Car("Volkswagen Passat", 11000, 240),
        new Car("Volkswagen Polo", 12000, 110),
        new Car("Ford Focus", 13000, 200),
        new Car("Ford Fiesta", 14000, 160),
        new Car("Ford Fusion", 15000, 260),
        new Car("Ford Mondeo", 16000, 120),
    };
}

namespace BlazorFiddleProject
{
    using Microsoft.AspNetCore.Components.Builder;
    using Microsoft.Extensions.DependencyInjection;


    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
        }

        public void Configure(IComponentsApplicationBuilder app)
        {
            app.AddComponent<App>("app");
        }
    }
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width">
    <title>BlazorFiddleProject</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	
	<script src="_content/MatBlazor/dist/matBlazor.js"></script>

    <style>
        app { }
    </style>

    <script type="text/javascript">
    </script>
</head>
<body>
<app>Loading...</app>

<script src="_framework/blazor.webassembly.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

BlazorFiddle was updated from Blazor 0.7 to .NET 6.0. Your old source code could not work. You need to upgrade to latest.