在页面上写C#（我的Blazor学习一）

博主一直想找一个效率最高的web框架，看起来Blazor是可以的。看B站上的专题讲到在页面上写C#，于是自己试了一个，改了一下微软的示例代码，更接近平时使用的内容。另外，B站上也提到CSS就是bootstrap的css,也方便，不用自己搞什么CSS了。

自己改的代码如下，后面看看它是怎么完成前端页面到后端数据库的功能代码实现。

cs 复制代码

@page "/weather"
@attribute [StreamRendering]

<PageTitle>Weather</PageTitle>

<h1>Weather</h1>

<p>This component demonstrates showing data.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>日期</th>
                <th>物料</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.zdate.ToShortDateString()</td>
                    <td>@forecast.matnr</td>
                    <td>@forecast.value</td>
             
                </tr>
            }
        </tbody>
    </table>
}

@code {
    public List<WeatherForecast> forecasts = new List<WeatherForecast>();

    protected override async Task OnInitializedAsync()
    {
        // Simulate asynchronous loading to demonstrate streaming rendering
        await Task.Delay(500);     

        forecasts.Add(new WeatherForecast { zdate = DateOnly.FromDateTime(DateTime.Now), matnr = "机油", value = 100 });
        forecasts.Add(new WeatherForecast { zdate = DateOnly.FromDateTime(DateTime.Now), matnr = "机油", value = 100 });
        forecasts.Add(new WeatherForecast { zdate = DateOnly.FromDateTime(DateTime.Now), matnr = "机油", value = 100 });
        forecasts.Add(new WeatherForecast { zdate = DateOnly.FromDateTime(DateTime.Now), matnr = "机油", value = 100 });

    }

    public class WeatherForecast
    {
        public DateOnly zdate { get; set; }
        public string? matnr { get; set; }        
        public int value { get; set; }
    }
}