From 801163ff2ca9d423932e0d3f8454fb59e7bc2de7 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Fri, 15 Sep 2023 09:04:41 -0400 Subject: [PATCH 1/4] Merge versions of Blazor-SignalR tutorial --- .../tutorials/signalr-blazor-preview.md | 393 ------------------ aspnetcore/blazor/tutorials/signalr-blazor.md | 371 +++++++++++++++-- aspnetcore/toc.yml | 2 - 3 files changed, 342 insertions(+), 424 deletions(-) delete mode 100644 aspnetcore/blazor/tutorials/signalr-blazor-preview.md diff --git a/aspnetcore/blazor/tutorials/signalr-blazor-preview.md b/aspnetcore/blazor/tutorials/signalr-blazor-preview.md deleted file mode 100644 index 50b075ac0142..000000000000 --- a/aspnetcore/blazor/tutorials/signalr-blazor-preview.md +++ /dev/null @@ -1,393 +0,0 @@ ---- -title: Use ASP.NET Core SignalR with Blazor (.NET 8 Preview) -author: guardrex -description: Create a chat app that uses ASP.NET Core SignalR with Blazor. -monikerRange: '>= aspnetcore-8.0' -ms.author: riande -ms.custom: mvc -ms.date: 06/30/2023 -uid: blazor/tutorials/signalr-blazor-preview ---- -# Use ASP.NET Core SignalR with Blazor (.NET 8 Preview) - - - -This tutorial provides a basic working experience for building a real-time app using SignalR with Blazor. For detailed Blazor guidance, see the [Blazor reference documentation](xref:blazor/index). - - - -> [!IMPORTANT] -> This is the .NET 8 preview version of this article. For the current release, see the [.NET 7 version of this article](xref:blazor/tutorials/signalr-blazor?view=aspnetcore-7.0&preserve-view=true). - -Learn how to: - -> [!div class="checklist"] -> * Create a Blazor project -> * Add the SignalR client library -> * Add a SignalR hub -> * Add SignalR services and an endpoint for the SignalR hub -> * Add Razor component code for chat - -At the end of this tutorial, you'll have a working chat app. - - - -## Prerequisites - -# [Visual Studio](#tab/visual-studio) - -[Visual Studio 2022 Preview](https://visualstudio.microsoft.com/vs/preview/) with the **ASP.NET and web development** workload - -# [Visual Studio Code](#tab/visual-studio-code) - -* [Visual Studio Code](https://code.visualstudio.com/download) -* [C# for Visual Studio Code (latest version)](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp) -* [.NET 8.0 Preview](https://dotnet.microsoft.com/download/dotnet/8.0) if it isn't already installed on the system or if the system doesn't have the latest version installed. - -The Visual Studio Code instructions use the .NET CLI for ASP.NET Core development functions such as project creation. You can follow these instructions on macOS, Linux, or Windows and with any code editor. Minor changes may be required if you use something other than Visual Studio Code. - -# [.NET Core CLI](#tab/netcore-cli/) - -[.NET 8.0 Preview](https://dotnet.microsoft.com/download/dotnet/8.0) - ---- - - - -## Create a Blazor Web App - -Follow the guidance for your choice of tooling: - -# [Visual Studio](#tab/visual-studio) - -> [!NOTE] -> Visual Studio 2022 or later and .NET Core SDK 8.0.0 or later are required. - -Create a new project. - -Select the **Blazor Web App** template. Select **Next**. - -Type `BlazorSignalRApp` in the **Project name** field. Confirm the **Location** entry is correct or provide a location for the project. Select **Next**. - -Confirm the **Framework** is .NET 8.0 or later. Select **Create**. - -# [Visual Studio Code](#tab/visual-studio-code) - - - -In a command shell, execute the following command: - -```dotnetcli -dotnet new blazor -o BlazorSignalRApp -``` - -The `-o|--output` option creates a folder for the project. If you've created a folder for the project and the command shell is open in that folder, omit the `-o|--output` option and value to create the project. - -In Visual Studio Code, open the app's project folder. - -When the dialog appears to add assets to build and debug the app, select **Yes**. Visual Studio Code automatically adds the `.vscode` folder with generated `launch.json` and `tasks.json` files. For information on configuring VS Code assets in the `.vscode` folder, including how to manually add the files to the [solution](xref:blazor/tooling#visual-studio-solution-file-sln), see the **Linux** operating system guidance in . - -# [.NET Core CLI](#tab/netcore-cli/) - -In a command shell, execute the following command: - - - -```dotnetcli -dotnet new blazor -o BlazorSignalRApp -``` - -The `-o|--output` option creates a folder for the project. If you've created a folder for the project and the command shell is open in that folder, omit the `-o|--output` option and value to create the project. - ---- - -## Add the SignalR client library - -# [Visual Studio](#tab/visual-studio/) - -In **Solution Explorer**, right-click the `BlazorSignalRApp` project and select **Manage NuGet Packages**. - -In the **Manage NuGet Packages** dialog, confirm that the **Package source** is set to `nuget.org`. - -With **Browse** and **Include prerelease** selected, type `Microsoft.AspNetCore.SignalR.Client` in the search box. - -In the search results, select the latest **preview** [`Microsoft.AspNetCore.SignalR.Client`](https://www.nuget.org/packages/Microsoft.AspNetCore.SignalR.Client) package. Select **Install**. - -If the **Preview Changes** dialog appears, select **OK**. - -If the **License Acceptance** dialog appears, select **I Accept** if you agree with the license terms. - -# [Visual Studio Code](#tab/visual-studio-code/) - -In the **Integrated Terminal** (**View** > **Terminal** from the toolbar), execute the following command: - -```dotnetcli -dotnet add package Microsoft.AspNetCore.SignalR.Client --prerelease -``` - - - -# [.NET Core CLI](#tab/netcore-cli/) - -In a command shell from the project's folder, execute the following command: - -```dotnetcli -dotnet add package Microsoft.AspNetCore.SignalR.Client --prerelease -``` - - - ---- - -## Add a SignalR hub - -Create a `Hubs` (plural) folder and add the following `ChatHub` class (`Hubs/ChatHub.cs`) to the root of the app: - -```csharp -using Microsoft.AspNetCore.SignalR; - -namespace BlazorSignalRApp.Hubs; - -public class ChatHub : Hub -{ - public async Task SendMessage(string user, string message) - { - await Clients.All.SendAsync("ReceiveMessage", user, message); - } -} -``` - - - -## Add Razor component support, services, and an endpoint for the SignalR hub - -Open the `Program` file. - -Add the namespaces for and the `ChatHub` class to the top of the file: - -```csharp -using Microsoft.AspNetCore.ResponseCompression; -using BlazorSignalRApp.Hubs; -``` - -Add Response Compression Middleware services: - -```csharp -builder.Services.AddResponseCompression(opts => -{ - opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat( - new[] { "application/octet-stream" }); -}); -``` - -Use Response Compression Middleware at the top of the processing pipeline's configuration: - -```csharp -app.UseResponseCompression(); -``` - -Add an endpoint for the hub immediately after the line `app.MapRazorComponents();`: - -```csharp -app.MapHub("/chathub"); -``` - -## Add Razor component code for chat - - -Open the `Components/Pages/Index.razor` file. - - - -Replace the markup with the following code: - -```razor -@page "/" -@attribute [RenderModeServer] -@using Microsoft.AspNetCore.SignalR.Client -@inject NavigationManager Navigation -@implements IAsyncDisposable - -Index - -
- -
-
- -
- - -
- -
    - @foreach (var message in messages) - { -
  • @message
    • - } -
- -@code { - private HubConnection? hubConnection; - private List messages = new List(); - private string? userInput; - private string? messageInput; - - protected override async Task OnInitializedAsync() - { - hubConnection = new HubConnectionBuilder() - .WithUrl(Navigation.ToAbsoluteUri("/chathub")) - .Build(); - - hubConnection.On("ReceiveMessage", (user, message) => - { - var encodedMsg = $"{user}: {message}"; - messages.Add(encodedMsg); - InvokeAsync(StateHasChanged); - }); - - await hubConnection.StartAsync(); - } - - private async Task Send() - { - if (hubConnection is not null) - { - await hubConnection.SendAsync("SendMessage", userInput, messageInput); - } - } - - public bool IsConnected => - hubConnection?.State == HubConnectionState.Connected; - - public async ValueTask DisposeAsync() - { - if (hubConnection is not null) - { - await hubConnection.DisposeAsync(); - } - } -} -``` - -> [!NOTE] -> Disable Response Compression Middleware in the `Development` environment when using [Hot Reload](xref:test/hot-reload). For more information, see . - -## Run the app - -Follow the guidance for your tooling: - -# [Visual Studio](#tab/visual-studio) - -Press F5 to run the app with debugging or Ctrl+F5 (Windows)/⌘+F5 (macOS) to run the app without debugging. - -# [Visual Studio Code](#tab/visual-studio-code) - -Press F5 to run the app with debugging or Ctrl+F5 (Windows)/⌘+F5 (macOS) to run the app without debugging. - -# [.NET Core CLI](#tab/netcore-cli/) - -In a command shell from the project's folder, execute the following commands: - -```dotnetcli -dotnet run -``` - ---- - -Copy the URL from the address bar, open another browser instance or tab, and paste the URL in the address bar. - -Choose either browser, enter a name and message, and select the button to send the message. The name and message are displayed on both pages instantly: - -![SignalR Blazor sample app open in two browser windows showing exchanged messages.](signalr-blazor/_static/signalr-blazor-finished.png) - -Quotes: *Star Trek VI: The Undiscovered Country* ©1991 [Paramount](https://www.paramountmovies.com/movies/star-trek-vi-the-undiscovered-country) - -## Next steps - -In this tutorial, you learned how to: - -> [!div class="checklist"] -> * Create a Blazor project -> * Add the SignalR client library -> * Add a SignalR hub -> * Add SignalR services and an endpoint for the SignalR hub -> * Add Razor component code for chat - -To learn more about building Blazor apps, see the Blazor documentation: - -> [!div class="nextstepaction"] -> -> [Bearer token authentication with Identity Server, WebSockets, and Server-Sent Events](xref:signalr/authn-and-authz#bearer-token-authentication) - -## Additional resources - -* -* [SignalR cross-origin negotiation for authentication](xref:blazor/fundamentals/signalr#client-side-signalr-cross-origin-negotiation-for-authentication) -* [SignalR configuration](xref:blazor/host-and-deploy/server#signalr-configuration) -* -* -* [Blazor samples GitHub repository (`dotnet/blazor-samples`)](https://github.com/dotnet/blazor-samples) diff --git a/aspnetcore/blazor/tutorials/signalr-blazor.md b/aspnetcore/blazor/tutorials/signalr-blazor.md index 912bbf5cf315..e0a8feebcc37 100644 --- a/aspnetcore/blazor/tutorials/signalr-blazor.md +++ b/aspnetcore/blazor/tutorials/signalr-blazor.md @@ -7,7 +7,6 @@ ms.author: riande ms.custom: mvc ms.date: 01/25/2022 uid: blazor/tutorials/signalr-blazor -zone_pivot_groups: blazor-hosting-models --- # Use ASP.NET Core SignalR with Blazor @@ -30,6 +29,294 @@ Learn how to: At the end of this tutorial, you'll have a working chat app. +:::moniker range=">= aspnetcore-8.0" + + + +## Prerequisites + +# [Visual Studio](#tab/visual-studio) + +[Visual Studio 2022 Preview](https://visualstudio.microsoft.com/vs/preview/) with the **ASP.NET and web development** workload + +# [Visual Studio Code](#tab/visual-studio-code) + +* [Visual Studio Code](https://code.visualstudio.com/download) +* [C# for Visual Studio Code (latest version)](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp) +* [.NET 8.0 Preview](https://dotnet.microsoft.com/download/dotnet/8.0) if it isn't already installed on the system or if the system doesn't have the latest version installed. + +The Visual Studio Code instructions use the .NET CLI for ASP.NET Core development functions such as project creation. You can follow these instructions on macOS, Linux, or Windows and with any code editor. Minor changes may be required if you use something other than Visual Studio Code. + +# [.NET Core CLI](#tab/netcore-cli/) + +[.NET 8.0 Preview](https://dotnet.microsoft.com/download/dotnet/8.0) + +--- + +## Create a Blazor Web App + +Follow the guidance for your choice of tooling: + +# [Visual Studio](#tab/visual-studio) + +> [!NOTE] +> Visual Studio 2022 or later and .NET Core SDK 8.0.0 or later are required. + +Create a new project. + +Select the **Blazor Web App** template. Select **Next**. + +Type `BlazorSignalRApp` in the **Project name** field. Confirm the **Location** entry is correct or provide a location for the project. Select **Next**. + +Confirm the **Framework** is .NET 8.0 or later. Select **Create**. + +# [Visual Studio Code](#tab/visual-studio-code) + +In a command shell, execute the following command: + +```dotnetcli +dotnet new blazor -o BlazorSignalRApp +``` + +The `-o|--output` option creates a folder for the project. If you've created a folder for the project and the command shell is open in that folder, omit the `-o|--output` option and value to create the project. + +In Visual Studio Code, open the app's project folder. + +When Visual Studio Code requests that you add assets to build and debug the project, select **Yes**. + +If Visual Studio Code doesn't automatically offer to add build and debug assets (the `.vscode` folder with `launch.json` and `tasks.json` files), select **View** > **Command Palette** and type "`.NET`" into the search box. From the list of commands, select the "`.NET: Generate Assets for Build and Debug`" command. + +# [.NET Core CLI](#tab/netcore-cli/) + +In a command shell, execute the following command: + +```dotnetcli +dotnet new blazor -o BlazorSignalRApp +``` + +The `-o|--output` option creates a folder for the project. If you've created a folder for the project and the command shell is open in that folder, omit the `-o|--output` option and value to create the project. + +--- + +## Add the SignalR client library + +# [Visual Studio](#tab/visual-studio/) + +In **Solution Explorer**, right-click the `BlazorSignalRApp` project and select **Manage NuGet Packages**. + +In the **Manage NuGet Packages** dialog, confirm that the **Package source** is set to `nuget.org`. + +With **Browse** and **Include prerelease** selected, type `Microsoft.AspNetCore.SignalR.Client` in the search box. + +In the search results, select the latest **preview** [`Microsoft.AspNetCore.SignalR.Client`](https://www.nuget.org/packages/Microsoft.AspNetCore.SignalR.Client) package. Select **Install**. + +If the **Preview Changes** dialog appears, select **OK**. + +If the **License Acceptance** dialog appears, select **I Accept** if you agree with the license terms. + +# [Visual Studio Code](#tab/visual-studio-code/) + +In the **Integrated Terminal** (**View** > **Terminal** from the toolbar), execute the following command: + +```dotnetcli +dotnet add package Microsoft.AspNetCore.SignalR.Client --prerelease +``` + + + +# [.NET Core CLI](#tab/netcore-cli/) + +In a command shell from the project's folder, execute the following command: + +```dotnetcli +dotnet add package Microsoft.AspNetCore.SignalR.Client --prerelease +``` + + + +--- + +## Add a SignalR hub + +Create a `Hubs` (plural) folder and add the following `ChatHub` class (`Hubs/ChatHub.cs`) to the root of the app: + +```csharp +using Microsoft.AspNetCore.SignalR; + +namespace BlazorSignalRApp.Hubs; + +public class ChatHub : Hub +{ + public async Task SendMessage(string user, string message) + { + await Clients.All.SendAsync("ReceiveMessage", user, message); + } +} +``` + +## Add services and an endpoint for the SignalR hub + +Open the `Program` file. + +Add the namespaces for and the `ChatHub` class to the top of the file: + +```csharp +using Microsoft.AspNetCore.ResponseCompression; +using BlazorSignalRApp.Hubs; +``` + +Add Response Compression Middleware services: + +```csharp +builder.Services.AddResponseCompression(opts => +{ + opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat( + new[] { "application/octet-stream" }); +}); +``` + +Use Response Compression Middleware at the top of the processing pipeline's configuration: + +```csharp +app.UseResponseCompression(); +``` + +Add an endpoint for the hub immediately after the line `app.MapRazorComponents();`: + +```csharp +app.MapHub("/chathub"); +``` + +## Add Razor component code for chat + +Open the `Components/Pages/Home.razor` file. + +Replace the markup with the following code: + +```razor +@page "/" +@attribute [RenderModeServer] +@using Microsoft.AspNetCore.SignalR.Client +@inject NavigationManager Navigation +@implements IAsyncDisposable + +Index + +
+ +
+
+ +
+ + +
+ +
    + @foreach (var message in messages) + { +
  • @message
    • + } +
+ +@code { + private HubConnection? hubConnection; + private List messages = new List(); + private string? userInput; + private string? messageInput; + + protected override async Task OnInitializedAsync() + { + hubConnection = new HubConnectionBuilder() + .WithUrl(Navigation.ToAbsoluteUri("/chathub")) + .Build(); + + hubConnection.On("ReceiveMessage", (user, message) => + { + var encodedMsg = $"{user}: {message}"; + messages.Add(encodedMsg); + InvokeAsync(StateHasChanged); + }); + + await hubConnection.StartAsync(); + } + + private async Task Send() + { + if (hubConnection is not null) + { + await hubConnection.SendAsync("SendMessage", userInput, messageInput); + } + } + + public bool IsConnected => + hubConnection?.State == HubConnectionState.Connected; + + public async ValueTask DisposeAsync() + { + if (hubConnection is not null) + { + await hubConnection.DisposeAsync(); + } + } +} +``` + +> [!NOTE] +> Disable Response Compression Middleware in the `Development` environment when using [Hot Reload](xref:test/hot-reload). For more information, see . + +## Run the app + +Follow the guidance for your tooling: + +# [Visual Studio](#tab/visual-studio) + +Press F5 to run the app with debugging or Ctrl+F5 (Windows)/⌘+F5 (macOS) to run the app without debugging. + +# [Visual Studio Code](#tab/visual-studio-code) + +Press F5 to run the app with debugging or Ctrl+F5 (Windows)/⌘+F5 (macOS) to run the app without debugging. + +# [.NET Core CLI](#tab/netcore-cli/) + +In a command shell from the project's folder, execute the following commands: + +```dotnetcli +dotnet run +``` + +--- + +Copy the URL from the address bar, open another browser instance or tab, and paste the URL in the address bar. + +Choose either browser, enter a name and message, and select the button to send the message. The name and message are displayed on both pages instantly: + +![SignalR Blazor sample app open in two browser windows showing exchanged messages.](signalr-blazor/_static/signalr-blazor-finished.png) + +Quotes: *Star Trek VI: The Undiscovered Country* ©1991 [Paramount](https://www.paramountmovies.com/movies/star-trek-vi-the-undiscovered-country) + +:::moniker-end + +:::moniker range="< aspnetcore-8.0" + ## Prerequisites # [Visual Studio](#tab/visual-studio) @@ -56,11 +343,11 @@ Downloading the tutorial's sample chat app isn't required for this tutorial. The [View or download sample code](https://github.com/dotnet/blazor-samples) -:::zone pivot="webassembly" +## Hosted Blazor WebAssembly experience -## Create a hosted Blazor WebAssembly app +### Create the app -Follow the guidance for your choice of tooling: +Follow the guidance for your choice of tooling to create a hosted Blazor WebAssembly app: # [Visual Studio](#tab/visual-studio) @@ -116,7 +403,7 @@ Confirm that a hosted Blazor WebAssembly app was created: Confirm the presence o --- -## Add the SignalR client library +### Add the SignalR client library # [Visual Studio](#tab/visual-studio/) @@ -154,11 +441,13 @@ To add an earlier version of the package, supply the `--version {VERSION}` optio --- -## Add a SignalR hub +### Add a SignalR hub In the `BlazorWebAssemblySignalRApp.Server` project, create a `Hubs` (plural) folder and add the following `ChatHub` class (`Hubs/ChatHub.cs`): -:::moniker range=">= aspnetcore-7.0" +:::moniker-end + +:::moniker range=">= aspnetcore-7.0 < aspnetcore.8.0" :::code language="csharp" source="~/../blazor-samples/7.0/BlazorWebAssemblySignalRApp/Server/Hubs/ChatHub.cs"::: @@ -182,9 +471,13 @@ In the `BlazorWebAssemblySignalRApp.Server` project, create a `Hubs` (plural) fo :::moniker-end -## Add services and an endpoint for the SignalR hub +:::moniker range="< aspnetcore-8.0" + +### Add services and an endpoint for the SignalR hub + +:::moniker-end -:::moniker range=">= aspnetcore-6.0" +:::moniker range=">= aspnetcore-6.0 < aspnetcore-8.0" In the `BlazorWebAssemblySignalRApp.Server` project, open the `Program.cs` file. @@ -254,13 +547,17 @@ endpoints.MapHub("/chathub"); :::moniker-end -## Add Razor component code for chat +:::moniker range="< aspnetcore-8.0" + +### Add Razor component code for chat In the `BlazorWebAssemblySignalRApp.Client` project, open the `Pages/Index.razor` file. Replace the markup with the following code: -:::moniker range=">= aspnetcore-7.0" +:::moniker-end + +:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" :::code language="razor" source="~/../blazor-samples/7.0/BlazorWebAssemblySignalRApp/Client/Pages/Index.razor"::: @@ -284,14 +581,16 @@ Replace the markup with the following code: :::moniker-end -:::moniker range=">= aspnetcore-6.0" +:::moniker range=">= aspnetcore-6.0 < aspnetcore-8.0" > [!NOTE] > Disable Response Compression Middleware in the `Development` environment when using [Hot Reload](xref:test/hot-reload). For more information, see . :::moniker-end -## Run the app +:::moniker range="< aspnetcore-8.0" + +### Run the app Follow the guidance for your tooling: @@ -352,13 +651,11 @@ Choose either browser, enter a name and message, and select the button to send t Quotes: *Star Trek VI: The Undiscovered Country* ©1991 [Paramount](https://www.paramountmovies.com/movies/star-trek-vi-the-undiscovered-country) -:::zone-end +## Blazor Server experience -:::zone pivot="server" +### Create the app -## Create a Blazor Server app - -Follow the guidance for your choice of tooling: +Follow the guidance for your choice of tooling to create a Blazor Server app: # [Visual Studio](#tab/visual-studio) @@ -399,7 +696,7 @@ The `-o|--output` option creates a folder for the project. If you've created a f --- -## Add the SignalR client library +### Add the SignalR client library # [Visual Studio](#tab/visual-studio/) @@ -437,9 +734,11 @@ To add an earlier version of the package, supply the `--version {VERSION}` optio --- +:::moniker-end + :::moniker range="< aspnetcore-5.0" -## Add the System.Text.Encodings.Web package +### Add the System.Text.Encodings.Web package *This section only applies to apps for ASP.NET Core version 3.x.* @@ -485,11 +784,15 @@ To add an earlier version of the package, supply the `--version {VERSION}` optio :::moniker-end -## Add a SignalR hub +:::moniker range="< aspnetcore-8.0" + +### Add a SignalR hub Create a `Hubs` (plural) folder and add the following `ChatHub` class (`Hubs/ChatHub.cs`): -:::moniker range=">= aspnetcore-7.0" +:::moniker-end + +:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" :::code language="csharp" source="~/../blazor-samples/7.0/BlazorServerSignalRApp/Hubs/ChatHub.cs"::: @@ -513,9 +816,13 @@ Create a `Hubs` (plural) folder and add the following `ChatHub` class (`Hubs/Cha :::moniker-end -## Add services and an endpoint for the SignalR hub +:::moniker range="< aspnetcore-8.0" -:::moniker range=">= aspnetcore-6.0" +### Add services and an endpoint for the SignalR hub + +:::moniker-end + +:::moniker range=">= aspnetcore-6.0 < aspnetcore-8.0" Open the `Program.cs` file. @@ -585,13 +892,17 @@ endpoints.MapHub("/chathub"); :::moniker-end -## Add Razor component code for chat +:::moniker range="< aspnetcore-8.0" + +### Add Razor component code for chat Open the `Pages/Index.razor` file. Replace the markup with the following code: -:::moniker range=">= aspnetcore-7.0" +:::moniker-end + +:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" :::code language="razor" source="~/../blazor-samples/7.0/BlazorServerSignalRApp/Pages/Index.razor"::: @@ -615,14 +926,16 @@ Replace the markup with the following code: :::moniker-end -:::moniker range=">= aspnetcore-6.0" +:::moniker range=">= aspnetcore-6.0 < aspnetcore-8.0" > [!NOTE] > Disable Response Compression Middleware in the `Development` environment when using [Hot Reload](xref:test/hot-reload). For more information, see . :::moniker-end -## Run the app +:::moniker range="< aspnetcore-8.0" + +### Run the app Follow the guidance for your tooling: @@ -652,7 +965,7 @@ Choose either browser, enter a name and message, and select the button to send t Quotes: *Star Trek VI: The Undiscovered Country* ©1991 [Paramount](https://www.paramountmovies.com/movies/star-trek-vi-the-undiscovered-country) -:::zone-end +:::moniker-end ## Next steps diff --git a/aspnetcore/toc.yml b/aspnetcore/toc.yml index bd0fc75fea48..1436e84a4b39 100644 --- a/aspnetcore/toc.yml +++ b/aspnetcore/toc.yml @@ -381,8 +381,6 @@ items: uid: blazor/tutorials/build-a-blazor-app - name: SignalR with Blazor uid: blazor/tutorials/signalr-blazor - - name: SignalR with Blazor (.NET 8 Preview) - uid: blazor/tutorials/signalr-blazor-preview - name: Learn modules href: /training/paths/build-web-apps-with-blazor/ - name: Blazor Hybrid From e88d45b1372dd1a0fb90165e9639d4209c6d77d9 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Fri, 15 Sep 2023 09:11:13 -0400 Subject: [PATCH 2/4] Updates --- aspnetcore/blazor/tutorials/build-a-blazor-app.md | 4 ++-- aspnetcore/blazor/tutorials/index.md | 6 ++---- aspnetcore/blazor/tutorials/signalr-blazor.md | 4 ++-- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/aspnetcore/blazor/tutorials/build-a-blazor-app.md b/aspnetcore/blazor/tutorials/build-a-blazor-app.md index 1176005974be..6440c05a438e 100644 --- a/aspnetcore/blazor/tutorials/build-a-blazor-app.md +++ b/aspnetcore/blazor/tutorials/build-a-blazor-app.md @@ -44,7 +44,7 @@ At the end of this tutorial, you'll have a working todo list app. :::moniker range=">= aspnetcore-8.0" -Create a new Blazor app named `TodoList` in a command shell: +Create a new Blazor Web App named `TodoList` in a command shell: @@ -140,7 +140,7 @@ Open the `Todo` component in any file editor and add an `@page` Razor directive :::moniker range=">= aspnetcore-8.0" - + :::code language="razor" source="build-a-blazor-app/8.0/Todo0.razor" highlight="1-4"::: diff --git a/aspnetcore/blazor/tutorials/index.md b/aspnetcore/blazor/tutorials/index.md index 3d4f2a98e91d..0acc07485d5b 100644 --- a/aspnetcore/blazor/tutorials/index.md +++ b/aspnetcore/blazor/tutorials/index.md @@ -20,11 +20,9 @@ For an overview of Blazor, see . * [Build your first Blazor app](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/intro) -* +* (Blazor Web App) - - -* +* (Blazor Web App) * diff --git a/aspnetcore/blazor/tutorials/signalr-blazor.md b/aspnetcore/blazor/tutorials/signalr-blazor.md index e0a8feebcc37..6cacff50bd71 100644 --- a/aspnetcore/blazor/tutorials/signalr-blazor.md +++ b/aspnetcore/blazor/tutorials/signalr-blazor.md @@ -212,7 +212,7 @@ Replace the markup with the following code: @inject NavigationManager Navigation @implements IAsyncDisposable -Index +Home