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

原创

lindexi 2022-04-26 13:23:23 ©著作权

©著作权归作者所有：来自51CTO博客作者lindexi的原创作品，请联系作者获取转载授权，否则将追究法律责任

title	author	date	CreateTime	categories
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 点半左右就做出下图效果，虽然大部分逻辑都不理解

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

路由

在 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++;
    }
}