微软很久就在做 Blazor 但是我现在才开始创建一个测试项目,我想用 C# 去控制 HTML 界面。小伙伴也许会问现在前端不是烂大街么,为什么还需要 Blazor 来做。可能原因只有一个,就是可以使用 C# 写脚本,代码比较清真
用 VisualStudio 创建一个默认的 Blazor 项目,在创建完成之后,可以看到有很多例子文件,这样可以降低入手成本。我是从睡醒3点开始创建项目,同时一边水群,一边看 B 站,然而我在 3 点半左右就做出下图效果,虽然大部分逻辑都不理解
所以本文不是教程,而是在告诉大家又有一个新坑
路由
在 Blazor 里面,用页面第一句代码 @page
说明这个页面的路由,也就是默认首页的是 /
可以这样写
@page "/"
也就是无论页面命名为什么,只需要设置了路由,就能更改默认页面
页面就是字符串
在我用 Blazor 的理解,整个页面除了代码就是字符串,而这个页面可以使用字段变量作为占位符替换。也就是整个页面的显示内容包括样式都是可以使用局部变量替换的,所以本文上面的逻辑就是通过让按钮的样式绑定变量,通过在代码修改变量的方式修改界面
默认有 Counter.razor 页面,在这个页面里面,默认的代码如下
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code
{
int currentCount = 0;
void IncrementCount()
{
currentCount++;
}
}
也就是在按钮点击时触发 IncrementCount 方法,而在上面有文本绑定 currentCount
在代码会被修改,此时可以看到点击按钮时将会修改文本的值
现在尝试将按钮的样式也进行绑定,将按钮的字体和 margin 进行绑定
<button class="btn btn-primary" style="
font-size: @fontSize;
margin-left: @(marginLeft)px;
" @onclick="IncrementCount">Click me</button>
当然此时需要在 code 里面添加 fontSize 和 marginLeft 的定义。在上面代码,因为需要拼接 xx px 字符串,而 marginLeft 的值和 px 中间没有空格隔开,也就是需要 margin-left: 10px;
才是需要的值,如果连一起写就是 margin-left: @marginLeftpx;
也就是无法识别为 @marginLeft
变量和 px
还是需要 @marginLeftpx
变量,此时就可以使用括号
修改代码让点击按钮触发事件,修改按钮样式
@code
{
string fontSize = "large";
int marginLeft = 1;
int currentCount = 0;
void IncrementCount()
{
if(fontSize == "large")
{
fontSize = "initial";
}
else
{
fontSize = "large";
}
marginLeft++;
}
}
这样就是上文的效果,如果有前端小伙伴协助写界面样式,此时让我来写 C# 业务逻辑,应该是可以快速上手的。这就是 Blazor 的优点
大部分项目都可以忽略性能和并发和流量,所以一些玩具可以使用 Blazor 开发
使用 HTML 写界面对我来说还是不清真,现在有 UNO 项目,这个项目是通过 XAML 写界面的,可以作为 WebAssembly 发布,这个玩具会更清真
微软的技术还是很强,可惜这些技术都不在实处,大概作为玩具还不错。期待这些玩具能真的作为产品级使用
本文会经常更新,请阅读原文: https://dotnet-campus.github.io//post/dotnet-Blazor-%E7%94%A8-C-%E6%8E%A7%E5%88%B6%E7%95%8C%E9%9D%A2%E8%A1%8C%E4%B8%BA.html ,以避免陈旧错误知识的误导,同时有更好的阅读体验。
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名 lindexi (包含链接: https://dotnet-campus.github.io/ ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请 与我联系 。