From 402f52a319a1d13c6d8f6743c5aa6213af73ef5f Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Mon, 11 Sep 2023 09:04:01 -0400 Subject: [PATCH 1/3] Blazor RC1 updates --- aspnetcore/blazor/tooling.md | 26 +++++- .../blazor/tutorials/build-a-blazor-app.md | 86 +++++++++++-------- .../tutorials/signalr-blazor-preview.md | 32 ++++--- 3 files changed, 96 insertions(+), 48 deletions(-) diff --git a/aspnetcore/blazor/tooling.md b/aspnetcore/blazor/tooling.md index e43c4c660df2..aecf2797bfef 100644 --- a/aspnetcore/blazor/tooling.md +++ b/aspnetcore/blazor/tooling.md @@ -25,6 +25,9 @@ To create a Blazor app on Windows, use the following guidance: * Install the latest version of [Visual Studio Preview](https://visualstudio.microsoft.com/vs/preview/) with the **ASP.NET and web development** workload. + + * Create a new project: * For a Blazor Web App experience (*recommended*), choose the **Blazor Web App** template. Select **Next**. * For a Blazor WebAssembly experience, choose the **Blazor WebAssembly App** template, which includes demonstration code and Bootstrap, or the **Blazor WebAssembly App Empty** template without demonstration code and Bootstrap. Select **Next**. @@ -58,9 +61,12 @@ To create a Blazor app on Windows, use the following guidance: * For a Blazor Web App in the **Additional information** dialog: - * To enable interactivity with server-side rendering (SSR), select the **Use interactive server components** checkbox. + * Interactivity with server-side rendering (SSR) is enabled by default with the **Use interactive server components** checkbox. To disable SSR, deselect the checkbox. * To enable interactivity with client-side rendering (CSR), select the **Use interactive client components** checkbox. + + :::moniker-end :::moniker range="< aspnetcore-8.0" @@ -130,12 +136,18 @@ Create a new project: dotnet new blazor -o BlazorApp ``` - + + + Interactivity with server-side rendering (SSR) is enabled by default. If you want to disable SSR, pass `--use-server false`: + + ```dotnetcli + dotnet new blazor -o Blazor App --use-server false + ``` - To enable interactivity with server-side rendering (SSR), add the `--use-server` option to the command: + To enable interactivity with client-side rendering (CSR), add the `--use-wasm` option to the command: ```dotnetcli - dotnet new blazor -o BlazorApp --use-server + dotnet new blazor -o BlazorApp --use-wasm ``` * For a Blazor WebAssembly experience with demonstration code and Bootstrap, execute the following command: @@ -538,6 +550,9 @@ The Blazor framework provides templates for creating new apps. The templates are :::moniker range=">= aspnetcore-8.0" + + * Blazor Web App project template (*recommended*): `blazor` * Blazor WebAssembly project templates: `blazorwasm`, `blazorwasm-empty` @@ -569,6 +584,9 @@ For more information on template options, see the following resources: --> + + * The *.NET default templates for dotnet new* article in the .NET Core documentation: * [`blazorwasm`](/dotnet/core/tools/dotnet-new-sdk-templates#blazorwasm) (includes `blazorwasm-empty` options) * Passing the help option (`-h` or `--help`) to the [`dotnet new`](/dotnet/core/tools/dotnet-new) CLI command in a command shell: diff --git a/aspnetcore/blazor/tutorials/build-a-blazor-app.md b/aspnetcore/blazor/tutorials/build-a-blazor-app.md index 52e2039ae652..b2ceeecad1ca 100644 --- a/aspnetcore/blazor/tutorials/build-a-blazor-app.md +++ b/aspnetcore/blazor/tutorials/build-a-blazor-app.md @@ -26,6 +26,8 @@ At the end of this tutorial, you'll have a working todo list app. ## Prerequisites + + :::moniker range=">= aspnetcore-8.0" [Download and install the .NET 8.0 Preview](https://dotnet.microsoft.com/download/dotnet/8.0) @@ -44,11 +46,13 @@ At the end of this tutorial, you'll have a working todo list app. Create a new Blazor app named `TodoList` in a command shell: + + ```dotnetcli -dotnet new blazor -o TodoList --use-server +dotnet new blazor -o TodoList ``` -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. The `--use-server` option enables interactivity with server-side rendering (SSR). +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. :::moniker-end @@ -80,12 +84,28 @@ cd TodoList Add a new `Todo` Razor component to the app using the following command: +:::moniker range=">= aspnetcore-8.0" + + + +```dotnetcli +dotnet new razorcomponent -n Todo -o Components/Pages +``` + +The `-n|--name` option in the preceding command specifies the name of the new Razor component. The new component is created in the project's `Components/Pages` folder with the `-o|--output` option. + +:::moniker-end + +:::moniker range="< aspnetcore-8.0" + ```dotnetcli dotnet new razorcomponent -n Todo -o Pages ``` The `-n|--name` option in the preceding command specifies the name of the new Razor component. The new component is created in the project's `Pages` folder with the `-o|--output` option. +:::moniker-end + > [!IMPORTANT] > Razor component file names require a capitalized first letter. Open the `Pages` folder and confirm that the `Todo` component file name starts with a capital letter `T`. The file name should be `Todo.razor`. @@ -96,7 +116,7 @@ Open the `Todo` component in any file editor and make the following changes at t * Add an `@page` Razor directive with a relative URL of `/todo`. -* Add the `[RenderModeServer]` attribute. The attribute indicates that for this component the render mode should be server-side rendering (SSR), which means that the `Todo` component is rendered interactively on the server via Blazor Server hosting with server-side prerendering. +* Add the `[RenderModeServer]` attribute. The attribute indicates that for this component the render mode should be server-side rendering (SSR), which means that the `Todo` component is rendered interactively on the server via Blazor Server hosting with server-side prerendering. * Add a page title with the `PageTitle` component, which enables adding an HTML `` element to the page. :::moniker-end @@ -116,10 +136,12 @@ Open the `Todo` component in any file editor and add an `@page` Razor directive :::moniker-end -`Pages/Todo.razor`: +`Todo.razor`: :::moniker range=">= aspnetcore-8.0" +<!-- UPDATE 8.0 At RC2, we'll enable SSR from the root component (I think) --> + :::code language="razor" source="build-a-blazor-app/8.0/Todo0.razor" highlight="1-4"::: :::moniker-end @@ -148,7 +170,7 @@ Open the `Todo` component in any file editor and add an `@page` Razor directive :::moniker-end -Save the `Pages/Todo.razor` file. +Save the `Todo.razor` file. Add the `Todo` component to the navigation bar. @@ -156,39 +178,27 @@ The `NavMenu` component is used in the app's layout. Layouts are components that In the navigation element (`<nav>`) content of the `NavMenu` component, add the following `<div>` element for the `Todo` component. -In `Shared/NavMenu.razor`: - :::moniker range=">= aspnetcore-8.0" -:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Shared/build-a-blazor-app/NavMenu.razor"::: +In `Components/Layout/NavMenu.razor`: :::moniker-end -:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" - -:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Shared/build-a-blazor-app/NavMenu.razor"::: - -:::moniker-end - -:::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0" - -:::code language="razor" source="~/../blazor-samples/6.0/BlazorSample_WebAssembly/Shared/build-a-blazor-app/NavMenu.razor"::: - -:::moniker-end - -:::moniker range=">= aspnetcore-5.0 < aspnetcore-6.0" +:::moniker range="< aspnetcore-8.0" -:::code language="razor" source="~/../blazor-samples/5.0/BlazorSample_WebAssembly/Shared/build-a-blazor-app/NavMenu.razor"::: +In `Shared/NavMenu.razor`: :::moniker-end -:::moniker range="< aspnetcore-5.0" - -:::code language="razor" source="~/../blazor-samples/3.1/BlazorSample_WebAssembly/Shared/build-a-blazor-app/NavMenu.razor"::: - -:::moniker-end +```razor +<div class="nav-item px-3"> + <NavLink class="nav-link" href="todo"> + <span class="oi oi-list-rich" aria-hidden="true"></span> Todo + </NavLink> +</div> +``` -Save the `Shared/NavMenu.razor` file. +Save the `NavMenu.razor` file. Build and run the app by executing the [`dotnet watch run`](xref:tutorials/dotnet-watch) command in the command shell from the `TodoList` folder. After the app is running, visit the new Todo page by selecting the **`Todo`** link in the app's navigation bar, which loads the page at `/todo`. @@ -239,34 +249,42 @@ Return to the `Todo` component and perform the following tasks: * Add a field for the todo items in the `@code` block. The `Todo` component uses this field to maintain the state of the todo list. * Add unordered list markup and a `foreach` loop to render each todo item as a list item (`<li>`). -`Pages/Todo.razor`: - :::moniker range=">= aspnetcore-8.0" +`Components/Pages/Todo.razor`: + :::code language="razor" source="build-a-blazor-app/8.0/Todo2.razor" highlight="8-13,16"::: :::moniker-end :::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" +`Pages/Todo.razor`: + :::code language="razor" source="build-a-blazor-app/7.0/Todo2.razor" highlight="7-12,15"::: :::moniker-end :::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0" +`Pages/Todo.razor`: + :::code language="razor" source="build-a-blazor-app/6.0/Todo2.razor" highlight="7-12,15"::: :::moniker-end :::moniker range=">= aspnetcore-5.0 < aspnetcore-6.0" +`Pages/Todo.razor`: + :::code language="razor" source="build-a-blazor-app/5.0/Todo2.razor" highlight="7-12,15"::: :::moniker-end :::moniker range="< aspnetcore-5.0" +`Pages/Todo.razor`: + :::code language="razor" source="build-a-blazor-app/3.1/Todo2.razor" highlight="7-12,15"::: :::moniker-end @@ -303,7 +321,7 @@ The app requires UI elements for adding todo items to the list. Add a text input :::moniker-end -Save the `TodoItem.cs` file and the updated `Pages/Todo.razor` file. In the command shell, the app is automatically rebuilt when the files are saved. The browser reloads the page. +Save the `TodoItem.cs` file and the updated `Todo.razor` file. In the command shell, the app is automatically rebuilt when the files are saved. The browser reloads the page. When the **`Add todo`** button is selected, nothing happens because an event handler isn't attached to the button. @@ -395,7 +413,7 @@ Update the `AddTodo` method to add the `TodoItem` with the specified title to th :::moniker-end -Save the `Pages/Todo.razor` file. The app is automatically rebuilt in the command shell, and the page reloads in the browser. +Save the `Todo.razor` file. The app is automatically rebuilt in the command shell, and the page reloads in the browser. The title text for each todo item can be made editable, and a checkbox can help the user keep track of completed items. Add a checkbox input for each todo item and bind its value to the `IsDone` property. Change `@todo.Title` to an `<input>` element bound to `todo.Title` with `@bind`: @@ -419,7 +437,7 @@ Update the `<h3>` header to show a count of the number of todo items that aren't <!-- UPDATE 8.0 Re-enable the completed component display after the 8.0 sample app is created -The completed `Todo` component (`Pages/Todo.razor`): +The completed `Todo` component: :::moniker range=">= aspnetcore-8.0" @@ -453,7 +471,7 @@ The completed `Todo` component (`Pages/Todo.razor`): --> -Save the `Pages/Todo.razor` file. The app is automatically rebuilt in the command shell, and the page reloads in the browser. +Save the `Todo.razor` file. The app is automatically rebuilt in the command shell, and the page reloads in the browser. Add items, edit items, and mark todo items done to test the component. diff --git a/aspnetcore/blazor/tutorials/signalr-blazor-preview.md b/aspnetcore/blazor/tutorials/signalr-blazor-preview.md index 57144ac7137d..143f1cee9c06 100644 --- a/aspnetcore/blazor/tutorials/signalr-blazor-preview.md +++ b/aspnetcore/blazor/tutorials/signalr-blazor-preview.md @@ -18,8 +18,10 @@ uid: blazor/tutorials/signalr-blazor-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). +<!-- UPDATE 8.0 Remove preview NOTE --> + > [!IMPORTANT] -> This is the .NET 8 preview version of this article, which is currently undergoing updates for .NET 8. Some of the features described might not be available or fully working at this time. The work on this article will be completed when .NET 8 reaches the *Release Candidate* stage, which is currently scheduled for September. For the current release, see the [.NET 7 version of this article](xref:blazor/tutorials/signalr-blazor?view=aspnetcore-7.0&preserve-view=true). +> 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: @@ -32,7 +34,7 @@ Learn how to: At the end of this tutorial, you'll have a working chat app. -<!-- UPDATE 8.0 +<!-- UPDATE 8.0 Update prereqs and tooling guidance ## Prerequisites @@ -105,13 +107,15 @@ Confirm the **Framework** is .NET 8.0 or later. Select **Create**. # [Visual Studio Code](#tab/visual-studio-code) +<!-- UPDATE 8.0 Confirm SSR by default without --use-server --> + In a command shell, execute the following command: ```dotnetcli -dotnet new blazor -o BlazorSignalRApp --use-server +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. The `--use-server` option enables interactivity with server-side rendering (SSR). +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. <!-- The `--use-server` option enables interactivity with server-side rendering (SSR). --> In Visual Studio Code, open the app's project folder. @@ -177,7 +181,7 @@ To add an earlier version of the package, supply the `--version {VERSION}` optio ## Add a SignalR hub -Create a `Hubs` (plural) folder and add the following `ChatHub` class (`Hubs/ChatHub.cs`): +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; @@ -201,7 +205,7 @@ public class ChatHub : Hub ## Add Razor component support, services, and an endpoint for the SignalR hub -Open the `Program.cs` file. +Open the `Program` file. Add the namespaces for <xref:Microsoft.AspNetCore.ResponseCompression?displayProperty=fullName> and the `ChatHub` class to the top of the file: @@ -233,17 +237,25 @@ app.MapHub<ChatHub>("/chathub"); ``` ## Add Razor component code for chat +<!-- +:::moniker range=">= aspnetcore-8.0" +--> -Open the `Pages/Index.razor` file. +Open the `Components/Pages/Index.razor` file. -Replace the markup with the following code: +<!-- +:::moniker-end -<!-- UPDATE 8.0 -@rendermode Auto +:::moniker range="< aspnetcore-8.0" + +Open the `Pages/Index.razor` file. +:::moniker-end --> +Replace the markup with the following code: + ```razor @page "/" @attribute [RenderModeServer] From f66e8cc7a41c0a12bd9c3760e6a67f4a9fb1e9e7 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 12 Sep 2023 07:18:03 -0400 Subject: [PATCH 2/3] Updates --- aspnetcore/blazor/tooling.md | 13 +++++-------- aspnetcore/blazor/tutorials/build-a-blazor-app.md | 4 ++-- .../blazor/tutorials/signalr-blazor-preview.md | 4 ++-- 3 files changed, 9 insertions(+), 12 deletions(-) diff --git a/aspnetcore/blazor/tooling.md b/aspnetcore/blazor/tooling.md index aecf2797bfef..935bd6c95b38 100644 --- a/aspnetcore/blazor/tooling.md +++ b/aspnetcore/blazor/tooling.md @@ -61,8 +61,8 @@ To create a Blazor app on Windows, use the following guidance: <!-- UPDATE 8.0 Cross-link SSR --> * For a Blazor Web App in the **Additional information** dialog: - * Interactivity with server-side rendering (SSR) is enabled by default with the **Use interactive server components** checkbox. To disable SSR, deselect the checkbox. - * To enable interactivity with client-side rendering (CSR), select the **Use interactive client components** checkbox. + * Interactivity with server rendering is enabled by default with the **Use interactive server components** checkbox. + * To enable interactivity with client rendering, select the **Use interactive client components** checkbox. <!-- UPDATE 8.0 I think the interactive root component checkbox will appear at RC2. --> @@ -138,13 +138,9 @@ Create a new project: <!-- UPDATE 8.0 Cross-links --> - Interactivity with server-side rendering (SSR) is enabled by default. If you want to disable SSR, pass `--use-server false`: + Interactivity with server rendering is enabled by default. - ```dotnetcli - dotnet new blazor -o Blazor App --use-server false - ``` - - To enable interactivity with client-side rendering (CSR), add the `--use-wasm` option to the command: + To enable interactivity with client rendering, add the `--use-wasm` option to the command: ```dotnetcli dotnet new blazor -o BlazorApp --use-wasm @@ -155,6 +151,7 @@ Create a new project: ```dotnetcli dotnet new blazorwasm -o BlazorApp ``` + * Alternatively, create a Blazor WebAssembly app without demonstration code and Bootstrap using the `blazorwasm-empty` project template: ```dotnetcli diff --git a/aspnetcore/blazor/tutorials/build-a-blazor-app.md b/aspnetcore/blazor/tutorials/build-a-blazor-app.md index b2ceeecad1ca..01313445be5a 100644 --- a/aspnetcore/blazor/tutorials/build-a-blazor-app.md +++ b/aspnetcore/blazor/tutorials/build-a-blazor-app.md @@ -52,7 +52,7 @@ Create a new Blazor app named `TodoList` in a command shell: dotnet new blazor -o TodoList ``` -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. <!-- The `--use-server` option enables interactivity with server-side rendering (SSR). --> +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. <!-- The `--use-server` option enables interactivity with server rendering. --> :::moniker-end @@ -116,7 +116,7 @@ Open the `Todo` component in any file editor and make the following changes at t <!-- UPDATE 8.0 For render mode guidance --> * Add an `@page` Razor directive with a relative URL of `/todo`. -* Add the `[RenderModeServer]` attribute. The attribute indicates that for this component the render mode should be server-side rendering (SSR), which means that the `Todo` component is rendered interactively on the server via Blazor Server hosting with server-side prerendering. +* Add the `[RenderModeServer]` attribute. The attribute indicates that this component should be rendered on the server with client interactivity. * Add a page title with the `PageTitle` component, which enables adding an HTML `<title>` element to the page. :::moniker-end diff --git a/aspnetcore/blazor/tutorials/signalr-blazor-preview.md b/aspnetcore/blazor/tutorials/signalr-blazor-preview.md index 143f1cee9c06..c6934fc2be0b 100644 --- a/aspnetcore/blazor/tutorials/signalr-blazor-preview.md +++ b/aspnetcore/blazor/tutorials/signalr-blazor-preview.md @@ -115,7 +115,7 @@ In a command shell, execute the following command: 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. <!-- The `--use-server` option enables interactivity with server-side rendering (SSR). --> +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. <!-- The `--use-server` option enables interactivity with server rendering. --> In Visual Studio Code, open the app's project folder. @@ -129,7 +129,7 @@ In a command shell, execute the following command: dotnet new blazor -o BlazorSignalRApp --use-server ``` -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. The `--use-server` option enables interactivity with server-side rendering (SSR). +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. The `--use-server` option enables interactivity with server rendering. --- From a31bd7d5562dc07ce0ff46613e85a1250a606b6c Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 12 Sep 2023 07:37:29 -0400 Subject: [PATCH 3/3] Updates --- aspnetcore/blazor/tooling.md | 2 ++ aspnetcore/blazor/tutorials/build-a-blazor-app.md | 2 +- aspnetcore/blazor/tutorials/signalr-blazor-preview.md | 8 +++++--- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/aspnetcore/blazor/tooling.md b/aspnetcore/blazor/tooling.md index 935bd6c95b38..6b2dd9bb9706 100644 --- a/aspnetcore/blazor/tooling.md +++ b/aspnetcore/blazor/tooling.md @@ -138,6 +138,8 @@ Create a new project: <!-- UPDATE 8.0 Cross-links --> + <!-- UPDATE 8.0 Confirm default interactivity with SSR without --use-server --> + Interactivity with server rendering is enabled by default. To enable interactivity with client rendering, add the `--use-wasm` option to the command: diff --git a/aspnetcore/blazor/tutorials/build-a-blazor-app.md b/aspnetcore/blazor/tutorials/build-a-blazor-app.md index 01313445be5a..1176005974be 100644 --- a/aspnetcore/blazor/tutorials/build-a-blazor-app.md +++ b/aspnetcore/blazor/tutorials/build-a-blazor-app.md @@ -46,7 +46,7 @@ At the end of this tutorial, you'll have a working todo list app. Create a new Blazor app named `TodoList` in a command shell: -<!-- UPDATE 8.0 Confirm default SSR without --use-server --> +<!-- UPDATE 8.0 Confirm default interactivity with SSR without --use-server --> ```dotnetcli dotnet new blazor -o TodoList diff --git a/aspnetcore/blazor/tutorials/signalr-blazor-preview.md b/aspnetcore/blazor/tutorials/signalr-blazor-preview.md index c6934fc2be0b..50b075ac0142 100644 --- a/aspnetcore/blazor/tutorials/signalr-blazor-preview.md +++ b/aspnetcore/blazor/tutorials/signalr-blazor-preview.md @@ -107,7 +107,7 @@ Confirm the **Framework** is .NET 8.0 or later. Select **Create**. # [Visual Studio Code](#tab/visual-studio-code) -<!-- UPDATE 8.0 Confirm SSR by default without --use-server --> +<!-- UPDATE 8.0 Confirm default interactivity with SSR without --use-server --> In a command shell, execute the following command: @@ -125,11 +125,13 @@ When the dialog appears to add assets to build and debug the app, select **Yes** In a command shell, execute the following command: +<!-- UPDATE 8.0 Confirm default interactivity with SSR without --use-server --> + ```dotnetcli -dotnet new blazor -o BlazorSignalRApp --use-server +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. The `--use-server` option enables interactivity with server rendering. +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. <!-- The `--use-server` option enables interactivity with server rendering. --> ---