2019-11-20-dotnet-Blazor-用-C#-控制界面行为

dotnet Blazor 用 C# 控制界面行为

lindexi

2019-11-20 18:26:25 +0800

2019-11-09 15:39:16 +0800

dotnet C#

微软很久就在做 Blazor 但是我现在才开始创建一个测试项目，我想用 C# 去控制 HTML 界面。小伙伴也许会问现在前端不是烂大街么，为什么还需要 Blazor 来做。可能原因只有一个，就是可以使用 C# 写脚本，代码比较清真

用 VisualStudio 创建一个默认的 Blazor 项目，在创建完成之后，可以看到有很多例子文件，这样可以降低入手成本。我是从睡醒3点开始创建项目，同时一边水群，一边看 B 站，然而我在 3 点半左右就做出下图效果，虽然大部分逻辑都不理解

2019-11-20-dotnet-Blazor-用-C#-控制界面行为-LMLPHP

所以本文不是教程，而是在告诉大家又有一个新坑

路由

在 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 发布，这个玩具会更清真

微软的技术还是很强，可惜这些技术都不在实处，大概作为玩具还不错。期待这些玩具能真的作为产品级使用