微軟很久就在做 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://blog.lindexi.com/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

---

.NET社區新聞，深度好文，歡迎訪問公眾號文章匯總?http://www.csharpkit.com?

總結

以上是生活随笔為你收集整理的dotnet Blazor 用 C# 控制界面行为的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。