Skip to content

Blazor RC1 updates #30296

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
guardrex merged 3 commits into from
Sep 12, 2023
Merged

Blazor RC1 updates #30296

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
402f52a
Blazor RC1 updates
guardrex Sep 11, 2023
f66e8cc
Updates
guardrex Sep 12, 2023
a31bd7d
Updates
guardrex Sep 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 22 additions & 5 deletions aspnetcore/blazor/tooling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<!-- UPDATE 8.0 Confirm whether or not the blazorwasm-empty
template survives in 8.0+ -->

* 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**.
Expand Down Expand Up @@ -58,8 +61,11 @@ 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:
* To enable interactivity with server-side rendering (SSR), select the **Use interactive server components** 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. -->

:::moniker-end

Expand Down Expand Up @@ -130,19 +136,24 @@ Create a new project:
dotnet new blazor -o BlazorApp
```

<!-- UPDATE 8.0 Cross-link SSR -->
<!-- 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 server-side rendering (SSR), add the `--use-server` 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-server
dotnet new blazor -o BlazorApp --use-wasm
```

* For a Blazor WebAssembly experience with demonstration code and Bootstrap, execute the following command:

```dotnetcli
dotnet new blazorwasm -o BlazorApp
```

* Alternatively, create a Blazor WebAssembly app without demonstration code and Bootstrap using the `blazorwasm-empty` project template:

```dotnetcli
Expand Down Expand Up @@ -538,6 +549,9 @@ The Blazor framework provides templates for creating new apps. The templates are

:::moniker range=">= aspnetcore-8.0"

<!-- UPDATE 8.0 Confirm whether or not the blazorwasm-empty
template survives in 8.0+ -->

* Blazor Web App project template (*recommended*): `blazor`
* Blazor WebAssembly project templates: `blazorwasm`, `blazorwasm-empty`

Expand Down Expand Up @@ -569,6 +583,9 @@ For more information on template options, see the following resources:

-->

<!-- UPDATE 8.0 Confirm whether or not the blazorwasm-empty
template survives in 8.0+ -->

* 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:
Expand Down
86 changes: 52 additions & 34 deletions aspnetcore/blazor/tutorials/build-a-blazor-app.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ At the end of this tutorial, you'll have a working todo list app.

## Prerequisites

<!-- UPDATE 8.0 Remove the preview guidance -->

:::moniker range=">= aspnetcore-8.0"

[Download and install the .NET 8.0 Preview](https://dotnet.microsoft.com/download/dotnet/8.0)
Expand All @@ -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:

<!-- UPDATE 8.0 Confirm default interactivity with SSR without --use-server -->

```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. <!-- The `--use-server` option enables interactivity with server rendering. -->

:::moniker-end

Expand Down Expand Up @@ -80,12 +84,28 @@ cd TodoList

Add a new `Todo` Razor component to the app using the following command:

:::moniker range=">= aspnetcore-8.0"

<!-- UPDATE 8.0 Confirm command for RC1 -->

```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`.

Expand All @@ -96,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. <!-- `@rendermode` Razor directive set to `Auto`. The directive indicates that for this component the render mode should be determined automatically based on a policy. The default render mode for a Blazor Web App is 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
Expand All @@ -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
Expand Down Expand Up @@ -148,47 +170,35 @@ 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.

The `NavMenu` component is used in the app's layout. Layouts are components that allow you to avoid duplication of content in an app. The `NavLink` component provides a cue in the app's UI when the component URL is loaded by the app.

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`.

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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`:

Expand All @@ -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"

Expand Down Expand Up @@ -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.

Expand Down
38 changes: 26 additions & 12 deletions aspnetcore/blazor/tutorials/signalr-blazor-preview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand All @@ -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

Expand Down Expand Up @@ -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 default interactivity with SSR 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 rendering. -->

In Visual Studio Code, open the app's project folder.

Expand All @@ -121,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-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. -->

---

Expand Down Expand Up @@ -177,7 +183,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;
Expand All @@ -201,7 +207,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:

Expand Down Expand Up @@ -233,17 +239,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]
Expand Down