こんにちは、私は砂漠の果ての狼です。
Dotnet9ウェブサイトはBlazorリファクタリングに戻り、アクセス速度は本当に速いですが、Blazorのインタラクティブ機能を使用して、ウェブマスターはまた、いくつかのオンラインツールを追加し、この記事はBlazorリファクタリングプロセスを共有し、あなたのウェブサイトの開発に技術的な選択を行うことを願っています。
1. RAZor Pagesの詳細
以前のバージョンでは、フロントエンドでRazor Pagesを使用して開発されており、このスタックは主に検索エンジンのSEO最適化のために選択されました
MVCとRazor Pagesのどちらが優れているかについては、Razor Pagesの利点だけを説明します。
まず、Razor PagesはMVCよりもはるかにシンプルで直感的です。Razor Pagesはビューと処理ロジックを同じページにカプセル化しているため、開発者はコードを理解しやすく維持できます。小さなプロジェクトやページ数が少ないアプリケーションでは、Razor Pagesは開発速度の向上とコード構造の簡素化を提供し、当時のウェブマスターがRazor PagesをMVCから再構築する主な理由となった。
第二に、Razor PagesにはSEO（検索エンジン最適化）の面で一定の利点があります。Razor Pagesはビューと処理ロジックを同じページにカプセル化しているため、検索エンジンはページのコンテンツをより簡単に理解し、インデックス化できます。これは、より良い検索エンジンのランキングを必要とするアプリケーションにとって重要な考慮事項です。
Razor Pagesの利点といえば、なぜBlazorに移行するのでしょうか？Blazorがまた良い選択肢かもしれないので、私たちは続けます。
2. ブレザーについて話す。
Blazorは、開発者がC#言語を使用してJava Scriptを使用せずにWebアプリケーションを書くことを可能にする新興のWeb開発フレームワークです。Razor PagesやMVCと比較して、Blazorは多くのユニークな利点とユースケースを備えた新しい開発モデルを提供します。
まず、Blazorは真のフロントエンド開発エクスペリエンスを提供します。従来のWeb開発では、フロントエンド開発者はページのインタラクションや動的な効果を処理するためにJava Scriptを使用し、バックエンド開発者はビジネスロジックやデータ操作を処理します。この分離された開発モデルは、開発者間のコミュニケーションやコラボレーションの問題を引き起こします。Blazorはフロントエンドコードを書くためにC#言語を使用しているため、フロントエンドとバックエンドの開発者は同じ言語とツールを使用してより効率的にコラボレーションできます。
第二に、Blazorはクライアントサイドとサーバーサイドの両方のモードを提供し、パフォーマンスとユーザーエクスペリエンスを向上させます（Blazorハイブリッドモードについては、もう少しお話しします）。
- クライアントサイドモード：BlazorはWeb Assemblyテクノロジーを使用して、コンパイルされたバイナリコードをブラウザ内で直接実行し、ネイティブアプリケーションに近いパフォーマンスを実現します。
- サーバーサイドモード：BlazorはSignalR接続を使用してリアルタイムのデータ更新と双方向バインディングを実現し、従来のHTTPリクエストベースのページ更新と比較して、より高速でスムーズなユーザーエクスペリエンスを提供します。
さらに、Blazorは再利用性とコンポーネント開発に優れています。Blazorは豊富なコンポーネントライブラリとツールを提供し、美しく強力なインターフェイスを迅速に構築できます。開発者は、一般的なUIコンポーネントを再利用可能なコンポーネントにカプセル化し、開発効率とコード品質を向上できます。
Blazorは最新のフロントエンド開発技術とツールをサポートしています。開発者はBlazorを使用して、React、Vue.jsなどの既存のJava Scriptライブラリやフレームワークと統合できます。
結論として、BlazorはRazor PagesとMVC、特にフロントエンド開発エクスペリエンスの向上、パフォーマンスとユーザーエクスペリエンスの向上、再利用性とコンポーネント化開発の向上を必要とするプロジェクトにとって、より良い選択肢です。しかし、どの開発モデルを使用するかは、プロジェクトの特定のニーズと開発チームの好みに基づいて決定されます。どちらのモデルを選択するにせよ、プロジェクトの現実に基づいて合理的な選択を行い、開発プロセスを通じて優れた設計原則とベストプラクティスに従うことが重要です。
3. なぜBlazorを使うのでしょう？
ウェブマスターは昨年、フロントエンド用にBlazor Serverを使用してバージョンを開発しましたが、再接続エクスペリエンスの問題のためにRazor Pagesを使用してリファクタリングすることを選択しました。
6月13日のBlazorへのウェブマスターの回帰のターニングポイント-. NET 8 Preview 5リリース、VS2022プレビューもBlazor Web Appプロジェクトテンプレートに続き、さまざまな技術グループもクレイジーについて議論し、ウェブマスターはRazor PagesにRazorコンポーネントを追加しました。Microsoftは本当に素晴らしい、BlazorコンポーネントがクライアントとサーバーのすべてのWeb UIニーズを満たすことを目指しています。
但目前该模式Razor组件无法交互，页面还出现了重连置灰UI，索性直接用Blazor Server重构，经过几天的奋战，网站前台已经用Blazor Server完全替换Razor Pages，烦人的重连也解决了，现在访问网站飞快，不知道是不是错觉，个人感觉很好。（重连问题参考微软文档【ASP.NET Core BlazorSignalR 指南】和Token佬写的文章 【如何取消Blazor Server烦人的重新连接？】。）
Razor Pages（MVC）とBlazorは両方ともRazor構文を使用しているので、理論的には切り替えがシームレスで、コアコードはほとんど変更されず、プロジェクトコードファイル構造は以下のスクリーンショットを参照してください。
| Razor Pagesのエンジニアリング構造 | Blazor Serverバージョンのエンジニアリング |
 |
 |
4. Blazorのインタラクティブ性：いくつかのオンラインツールをもたらす
ページのイベント処理には、Blazorを使用すると便利です。昨夜追加された4つのガジェットがあります。
興味のある友人は、経験をクリックすることができます：https：//dotnet 9.com/tools、我々は直接4つのウィジェットコードを投稿し、Blazorのコードスタイルを楽しむかもしれません。
4.1. JSONフォーマット
アクセス先https//dotnet9.com/tools/jsonformatter
ページのコード：
@page "/tools/jsonformatter"
@using System.Text.Json
<PageTitle>@_title</PageTitle>
<MApp>
<h2 style="margin-bottom: 30px; margin-top: 10px; text-align: center;">@_title</h2>
<div>
<MTextarea BackgroundColor="grey lighten-2" Solo
Color="orange orange-darken-4" TValue="string" @bind-Value="_inputJson"
Label="输入Json" Rows="8" style="font-size:12px;" RowHeight="15" AutoGrow/>
</div>
<div>
<MButton Color="success" class="ma-2" OnClick="() => FormatJson(true)">格式化</MButton>
<MButton Color="lime" OnClick="() => FormatJson(false)">压缩</MButton>
</div>
<div>
<MTextarea BackgroundColor="amber lighten-4" Solo
Color="orange orange-darken-4" TValue="string" @bind-Value="_formattedJson"
Label="格式化或压缩后Json" Rows="8" style="font-size:12px;" RowHeight="15" AutoGrow/>
</div>
</MApp>
@code
{
private const string? _title = "工具箱-JSON格式化";
private string? _inputJson;
private string? _formattedJson;
private void FormatJson(bool writeIndented)
{
try
{
var jsonObject = JsonDocument.Parse(_inputJson).RootElement;
_formattedJson = JsonSerializer.Serialize(jsonObject, new JsonSerializerOptions { WriteIndented = writeIndented });
}
catch (JsonException)
{
_formattedJson = "无效的JSON格式";
}
}
}
4.2.オンライン文字列エンコードツール
アクセス先https//dotnet9.com/tools/string-encoder
ページのコード：
@page "/tools/string-encoder"
<PageTitle>@Title</PageTitle>
<MApp>
<h2 style="margin-bottom: 30px; margin-top: 10px; text-align: center;">@Title</h2>
<p>
<MTextarea BackgroundColor="grey lighten-2"
Color="cyan" Solo TValue="string" @bind-Value="_inputString"
Label="输入字符串"/>
</p>
<p>
<MTextarea BackgroundColor="amber lighten-4" Solo
Color="orange orange-darken-4" TValue="string" @bind-Value="_encodedOrDecodeString"
Label="编/解码结果"/>
</p>
<p>
<MButton OnClick="@Encode">编码</MButton>
<MButton OnClick="@Decode">解码</MButton>
<MButton OnClick="@Clear">清空</MButton>
</p>
</MApp>
@code {
private const string Title = "工具箱-在线字符串编码工具";
private string? _inputString;
private string? _encodedOrDecodeString;
private void Encode()
{
_encodedOrDecodeString = System.Web.HttpUtility.UrlEncode(_inputString);
}
private void Decode()
{
_encodedOrDecodeString = System.Web.HttpUtility.UrlDecode(_inputString);
}
private void Clear()
{
_inputString = string.Empty;
_encodedOrDecodeString = string.Empty;
}
}
4.3.カウントダウンダウン
アクセス先https//dotnet9.com/tools/countdown
ページのコード：
@page "/tools/countdown"
<PageTitle>@Title</PageTitle>
<MApp>
<h2 style="margin-bottom: 30px; margin-top: 10px; text-align: center;">@Title</h2>
<p>
<MTextField Label="持续时间（秒）" Type="number" TValue="int" @bind-Value="@_duration"/>
</p>
<p>
<MButton Color="success" class="ma-2" OnClick="@StartCountdown" Disabled="@_isCountingDown">开始</MButton>
<MButton Color="pink" class="ma-2 white--text" OnClick="@PauseCountdown" Disabled="!_isCountingDown">暂停</MButton>
<MButton Color="deep-orange" class="ma-2 white--text" OnClick="@ResetCountdown" Disabled="!_isCountingDown">重置</MButton>
剩余时间（秒）：@_remainingTime
</p>
<div class="text-center">
<MProgressCircular Value="@_remainingTimePercent" Size="100" Width="15" Rotate="360" Color="teal">@_remainingTime</MProgressCircular>
</div>
</MApp>
@code {
private const string Title = "工具箱-倒计时";
private int _duration = 20;
private int _remainingTime;
private int _remainingTimePercent;
private bool _isCountingDown;
private bool _isPause;
private CancellationTokenSource? _countdownTokenSource;
private async Task StartCountdown()
{
if (_duration < 0)
{
_duration = 10;
}
if (_isCountingDown)
{
return;
}
_isCountingDown = true;
if (!_isPause || _remainingTime <= 0)
{
_remainingTime = _duration;
ChangeRemainingTimePercent();
}
_countdownTokenSource = new CancellationTokenSource();
await Countdown(_countdownTokenSource.Token);
}
private void PauseCountdown()
{
if (!_isCountingDown)
{
return;
}
_isCountingDown = false;
_isPause = true;
_countdownTokenSource?.Cancel();
}
private async void ResetCountdown()
{
_isPause = false;
if (_isCountingDown && _countdownTokenSource != null)
{
await _countdownTokenSource.CancelAsync();
}
_remainingTime = _duration;
_isCountingDown = false;
ChangeRemainingTimePercent();
}
private async Task Countdown(CancellationToken cancellationToken)
{
while (_remainingTime > 0)
{
await Task.Delay(1000, cancellationToken);
_remainingTime--;
ChangeRemainingTimePercent();
if (cancellationToken.IsCancellationRequested)
{
return;
}
}
_isCountingDown = false;
}
private async void ChangeRemainingTimePercent()
{
_remainingTimePercent = (int)(_remainingTime * 100.0 / _duration);
await InvokeAsync(StateHasChanged);
}
}
4.4.タイムスタンプ変換
アクセス先https//dotnet9.com/tools/timestamp
站长原来写过一篇，可以看这里：使用Blazor做个简单的时间戳在线转换工具。
5. まとめまとめまとめ
ウェブサイトにバグがあるかもしれませんが、バグがある必要があり、ウェブマスターは常にリファクタリングと反復を繰り返します。
私はあなたと喜びを共有するためにサイトフロントの再構築、私はあなたの端午の日の健康を願っています。
- Webサイトhttps//dotnet9.com/
- Webサイトソースhttps//github.com/dotnet9/Dotnet9
- .NET版本： .NET 8.0.0-preview.5.23280.8