在页面上写C#(我的Blazor学习一)

Blazor入门:在页面上写C#

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

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

@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; }
    }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

刘欣的博客

你将成为第一个打赏博主的人!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值