🐥note.

小鳥とMicrosoft <3 なエンジニアの技術Blog📚

ASP.NET Core 3.1の変更点について

.NET ASP.NET Core Blazor Microsoft

ついに.NET Core 3.1 LTSがリリースされましたね！

あわせてASP.NET Core 3.1もリリースされました。

devblogs.microsoft.com

Microsoft Docsの特設ページはこちらです。

docs.microsoft.com

変更点は以下の通りです。

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でイベントの既定の動作を禁止することができます。

過去にこの記事で触れたやつですね。

blog.piyosi.com

こんな感じに書けるようです。
※下記コードを実行すると、Textboxでキーを押下してもKeyHanderが発火されません。

<input value="@_count" @onkeypress="KeyHandler" @onkeypress:preventDefault />

PreventDefaultって何？って人はMDNとかが参考になるかと思います。

developer.mozilla.org

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へ例外を吐くのと、画面下部に黄色くバーが表示されるようになった件ですね。

f:id:piyo_esq:20191204065446p:plain
Exception発生時

バーはエラー発生時に<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; }); });

docs.microsoft.com

Breaking changes for SameSite cookies

Microsoft Docsから引用します。

SameSite Cookieの動作は、今後のブラウザーの変更を反映するように変更されました。これは、AzureAd、OpenIdConnect、WsFederationなどの認証シナリオに影響する場合があります。詳細については、「ASP.NET CoreでSameSite Cookieを使用する」を参照してください。

docs.microsoft.com

おわり

Partial嬉しいです