ASP.NET Core 3.1 の新機能What's new in ASP.NET Core 3.1

この記事では、ASP.NET Core 3.1 の最も大きな変更点について説明します。また、関連するドキュメントへのリンクも示します。This article highlights the most significant changes in ASP.NET Core 3.1 with links to relevant documentation.

Razor コンポーネントの部分クラスのサポートPartial class support for Razor components

Razor コンポーネントが部分クラスとして生成されるようになりました。Razor components are now generated as partial classes. Razor コンポーネントのコードは、単一ファイル内のコンポーネントのすべてのコードを定義するのではなく、部分クラスとして定義された分離コード ファイルを使用して記述できます。Code for a Razor component can be written using a code-behind file defined as a partial class rather than defining all the code for the component in a single file. 詳細については、「部分クラスのサポート」を参照してください。For more information, see Partial class support.

Blazor コンポーネント タグ ヘルパーと最上位レベルのコンポーネントへのパラメーターの引き渡し Component Tag Helper and pass parameters to top-level components

ASP.NET Core 3.0 がインストールされた Blazor では、コンポーネントは HTML ヘルパー (Html.RenderComponentAsync) を使用してページとビューにレンダリングされていました。In Blazor with ASP.NET Core 3.0, components were rendered into pages and views using an HTML Helper (Html.RenderComponentAsync). ASP.NET Core 3.1 では、新しいコンポーネント タグ ヘルパーを使用して、ページまたはビューからコンポーネントがレンダリングされます。In ASP.NET Core 3.1, render a component from a page or view with the new Component Tag Helper:

<component type="typeof(Counter)" render-mode="ServerPrerendered" />

HTML ヘルパーは ASP.NET Core 3.1 でも引き続きサポートされていますが、コンポーネント タグ ヘルパーをお勧めします。The HTML Helper remains supported in ASP.NET Core 3.1, but the Component Tag Helper is recommended.

Blazor 初回のレンダリング時に、サーバーアプリで最上位レベルのコンポーネントにパラメーターを渡すことができるようになりました。 Server apps can now pass parameters to top-level components during the initial render. 以前は、最上位レベルのコンポーネントにパラメーターを渡すには、RenderMode.Static を使用するしかありませんでした。Previously you could only pass parameters to a top-level component with RenderMode.Static. このリリースでは、RenderMode.ServerRenderModel.ServerPrerendered の両方がサポートされています。With this release, both RenderMode.Server and RenderModel.ServerPrerendered are supported. 指定されたパラメーター値はすべて JSON としてシリアル化され、初回の応答に含まれます。Any specified parameter values are serialized as JSON and included in the initial response.

たとえば、インクリメント量 (IncrementAmount) を使用して Counter コンポーネントを事前レンダリングする場合は、次のようになります。For example, prerender a Counter component with an increment amount (IncrementAmount):

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-IncrementAmount="10" />

詳細については、「コンポーネントを Razor Pages と MVC アプリに統合する」を参照してください。For more information, see Integrate components into Razor Pages and MVC apps.

Http.sys での共有キューのサポートSupport for shared queues in HTTP.sys

Http.sys では、匿名の要求キューの作成がサポートされています。HTTP.sys supports creating anonymous request queues. ASP.NET Core 3.1 では、既存の名前付き HTTP.sys 要求キューに作成またはアタッチする機能が追加されています。In ASP.NET Core 3.1, we've added to ability to create or attach to an existing named HTTP.sys request queue. 既存の名前付き HTTP.sys 要求キューに作成またはアタッチすると、キューを所有する HTTP.sys コントローラー プロセスがリスナー プロセスから独立しているシナリオが可能になります。Creating or attaching to an existing named HTTP.sys request queue enables scenarios where the HTTP.sys controller process that owns the queue is independent of the listener process. このような独立によって、リスナー プロセスの再起動の間に既存の接続とエンキューされた要求を保持することができます。This independence makes it possible to preserve existing connections and enqueued requests between listener process restarts:

public static IHostBuilder CreateHostBuilder(string[] args) =>
     Host.CreateDefaultBuilder(args)
        .ConfigureWebHostDefaults(webBuilder =>
        {
            // ...
            webBuilder.UseHttpSys(options =>
            {
                options.RequestQueueName = "MyExistingQueue";
                options.RequestQueueMode = RequestQueueMode.CreateOrAttach;
            });
        });

SameSite Cookie の重大な変更Breaking changes for SameSite cookies

SameSite Cookie の動作が、今後のブラウザーの変更を反映するように変更されました。The behavior of SameSite cookies has changed to reflect upcoming browser changes. これは、AzureAd、OpenIdConnect、WsFederation などの認証シナリオに影響を与える可能性があります。This may affect authentication scenarios like AzureAd, OpenIdConnect, or WsFederation. 詳細については、「ASP.NET Core での SameSite cookie の使用」を参照してください。For more information, see ASP.NET Core での SameSite cookie の使用.

Blazor アプリのイベントに対する既定のアクションを回避するPrevent default actions for events in Blazor apps

イベントに対する既定のアクションを回避するには、@on{EVENT}:preventDefault ディレクティブ属性を使用します。Use the @on{EVENT}:preventDefault directive attribute to prevent the default action for an event. 次の例では、テキスト ボックスにキーの文字を表示する既定のアクションが回避されます。In the following example, the default action of displaying the key's character in the text box is prevented:

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

詳細については、「既定のアクションを禁止する」を参照してください。For more information, see Prevent default actions.

Blazor アプリでのイベント伝達を停止するStop event propagation in Blazor apps

イベント伝達を停止するには、@on{EVENT}:stopPropagation ディレクティブ属性を使用します。Use the @on{EVENT}:stopPropagation directive attribute to stop event propagation. 次の例では、チェック ボックスをオンにすると、子 <div> からのクリック イベントが親 <div> に伝達されなくなります。In the following example, selecting the check box prevents click events from the child <div> from propagating to the parent <div>:

<input @bind="_stopPropagation" type="checkbox" />

<div @onclick="OnSelectParentDiv">
    <div @onclick="OnSelectChildDiv" @onclick:stopPropagation="_stopPropagation">
        ...
    </div>
</div>

@code {
    private bool _stopPropagation = false;
}

詳細については、「イベントの伝達の停止」を参照してください。For more information, see Stop event propagation.

Blazor アプリの開発中の詳細なエラーDetailed errors during Blazor app development

開発中に Blazor アプリが正常に機能していない場合、アプリからの詳細なエラー情報を受け取ることで、問題のトラブルシューティングと修正に役立ちます。When a Blazor app isn't functioning properly during development, receiving detailed error information from the app assists in troubleshooting and fixing the issue. エラーが発生すると Blazor アプリによって画面の下部に金色のバーが表示されます。When an error occurs, Blazor apps display a gold bar at the bottom of the screen:

  • 開発中は、金色のバーによってブラウザー コンソールが表示され、そこで例外を確認できます。During development, the gold bar directs you to the browser console, where you can see the exception.
  • 実稼働環境では、金色のバーによって、エラーが発生したことがユーザーに通知され、ブラウザーの更新が推奨されます。In production, the gold bar notifies the user that an error has occurred and recommends refreshing the browser.

詳細については、「開発中の詳細なエラー」を参照してください。For more information, see Detailed errors during development.