ついに.NET Core 3.1 LTSがリリースされましたね!
あわせてASP.NET Core 3.1もリリースされました。
Microsoft Docsの特設ページはこちらです。
変更点は以下の通りです。
Here’s what’s new in this release for ASP.NET Core:
- Partial class support for Razor components
- Pass parameters to top-level components
- New component tag helper
- Prevent default actions for events in Blazor apps
- Stop event propagation in Blazor apps
- Detailed errors during Blazor app development
- Support for shared queues in HttpSysServer
- Breaking changes for SameSite cookies
気になる点だけ細かく見ていきましょう。
Partial class support for Razor components
Razor ComponentでPartial Classがサポートされたそうです。
今まではPartialっぽい動きを実現するには以下の手順が必要でした。
ComponentBase
を継承したCode Behind Classを用意- .razor側で上記Classを
@inherits
で継承
今回のUpdateからは、.razorファイルと同じ名前のClassにpartialを指定するだけになりました。
具体的には以下のようになります。
Counter.razor
@page "/counter" <h1>Counter</h1> <p>Current count: @currentCount</p> <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
Counter.cs
namespace BlazorApp.Pages { public partial class Counter { int currentCount = 0; void IncrementCount() { currentCount++; } } }
Pass parameters to top-level components
<component />
を使ってRazor Componentの描画ができるようになりました。
これはPreview2で追加されたやつですね。
そして<component />
を使えばpara-***
でComponentの[Parameter]
属性を持つプロパティにパラメータ渡しができます。
最初の頃はパラーメータ渡しは出来なかったんですよね。
以前の書き方
// .NET Core 3.0 Preview8 までの書き方 @(await Html.RenderComponentAsync<BlazorComponent>()) // .NET Core 3.0 Preview9 から.NET Core 3.1 Preview1 までの書き方 @(await Html.RenderComponentAsync<BlazorComponent>(RenderMode.ServerPrerendered))
バージョンアップ後の書き方
// .NET Core 3.1 Preview2 以降の書き方 <component type="typeof(BlazorComponent)" render-mode="ServerPrerendered" param-IncrementAmount="10" />
New component tag helper
上記<component />
のことなので省略します。
Prevent default actions for events in Blazor apps
@on{EventName}:preventDefault
でイベントの既定の動作を禁止することができます。
過去にこの記事で触れたやつですね。
こんな感じに書けるようです。
※下記コードを実行すると、Textboxでキーを押下してもKeyHanderが発火されません。
<input value="@_count" @onkeypress="KeyHandler" @onkeypress:preventDefault />
PreventDefault
って何?って人はMDNとかが参考になるかと思います。
Stop event propagation in Blazor apps
@on{EVENT}:stopPropagation
でイベントの伝播を停止させることができます。
私の過去の記事から引用します。
@oneventname:stopPropagationディレクティブ属性を使用して、Blazorアプリでイベントの伝播を停止します。
次の例では、チェックボックスをオンにすると、子divからのクリックイベントが親に伝播しなくなります。
<input @bind="stopPropagation" type="checkbox" /> <div @onclick="OnClickParentDiv"> Parent div <div @onclick="OnClickChildDiv" @onclick:stopPropagation="stopPropagation"> Child div </div> </div> <button @onclick="OnClick">Click me!</button> @code { bool stopPropagation; void OnClickParentDiv() => Console.WriteLine("Parent div clicked."); void OnClickChildDiv() => Console.WriteLine("Child div clicked."); }
Detailed errors during Blazor app development
Blazorがより詳細なエラー情報を出力するようになりました。
これはデバッグ実行時にブラウザのConsoleへ例外を吐くのと、画面下部に黄色くバーが表示されるようになった件ですね。
バーはエラー発生時に<div id="blazor-error-ui"></div>
のHtmlを描画するようになっています。
テンプレートに入っているので、エラー発生時の画面のカスタマイズが楽になりました。
※今までは自分で追加する必要がありました。。
以下がそのHtmlです。
<div id="blazor-error-ui"> <environment include="Staging,Production"> An error has occurred. This application may no longer respond until reloaded. </environment> <environment include="Development"> An unhandled exception has occurred. See browser dev tools for details. </environment> <a href="" class="reload">Reload</a> <a class="dismiss">🗙</a> </div>
Support for shared queues in HttpSysServer
Microsoft Docsから引用します。
HTTP.sysは、匿名要求キューの作成をサポートしています。ASP.NET Core 3.1では、既存の名前付きHTTP.sys要求キューを作成または添付する機能が追加されました。既存の名前付きHTTP.sys要求キューを作成または添付すると、キューを所有するHTTP.Sysコントローラープロセスがリスナープロセスから独立したシナリオが可能になります。この独立性により、リスナープロセスの再起動間で既存の接続とエンキューされた要求を保持できます。
cs public static IHostBuilder CreateHostBuilder(string[] args) => Host.CreateDefaultBuilder(args) .ConfigureWebHostDefaults(webBuilder => { // ... webBuilder.UseHttpSys(options => { options.RequestQueueName = "MyExistingQueue"; options.RequestQueueMode = RequestQueueMode.CreateOrAttach; }); });
Breaking changes for SameSite cookies
Microsoft Docsから引用します。
SameSite Cookieの動作は、今後のブラウザーの変更を反映するように変更されました。これは、AzureAd、OpenIdConnect、WsFederationなどの認証シナリオに影響する場合があります。詳細については、「ASP.NET CoreでSameSite Cookieを使用する」を参照してください。
おわり
Partial嬉しいです