diff --git a/aspnetcore/blazor/tooling.md b/aspnetcore/blazor/tooling.md index 6a10062b7994..f9334797c8fc 100644 --- a/aspnetcore/blazor/tooling.md +++ b/aspnetcore/blazor/tooling.md @@ -19,10 +19,12 @@ This article describes tools for building Blazor apps on various platforms. Sele To create a Blazor app on Windows, use the following guidance: -* Install the latest version of [Visual Studio](https://visualstudio.microsoft.com) with the **ASP.NET and web development** workload. + :::moniker range=">= aspnetcore-8.0" +* 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**. @@ -31,6 +33,8 @@ To create a Blazor app on Windows, use the following guidance: :::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" +* Install the latest version of [Visual Studio](https://visualstudio.microsoft.com) with the **ASP.NET and web development** workload. + * Create a new project: * For a Blazor Server experience, choose the **Blazor Server App** template, which includes demonstration code and [Bootstrap](https://getbootstrap.com/), or the **Blazor Server App Empty** template without demonstration code and Bootstrap. 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**. @@ -39,6 +43,8 @@ To create a Blazor app on Windows, use the following guidance: :::moniker range="< aspnetcore-7.0" +* Install the latest version of [Visual Studio](https://visualstudio.microsoft.com) with the **ASP.NET and web development** workload. + * Create a new project: * For a Blazor Server experience, choose the **Blazor Server App** template. Select **Next**. * For a Blazor WebAssembly experience, choose the **Blazor WebAssembly App** template. Select **Next**. @@ -90,8 +96,18 @@ To create a Blazor app on Linux, use the following guidance: Use the [.NET command-line interface (CLI)](/dotnet/core/tools/) to execute commands in a Linux command shell. +:::moniker range=">= aspnetcore-8.0" + +Install the latest version of the [.NET Core SDK Preview](https://dotnet.microsoft.com/download/dotnet/8.0). If you previously installed the SDK, you can determine your installed version by executing the following command: + +:::moniker-end + +:::moniker range="< aspnetcore-8.0" + Install the latest version of the [.NET Core SDK](https://dotnet.microsoft.com/download). If you previously installed the SDK, you can determine your installed version by executing the following command: +:::moniker-end + ```dotnetcli dotnet --version ``` @@ -475,15 +491,15 @@ For more information, see -* For a Blazor Web Apps experience (*recommended*), Visual Studio for Mac can't create a Blazor Web App in its UI at this time. +* Install [Visual Studio for Mac Preview](https://visualstudio.microsoft.com/vs/mac/preview/). When the installer requests the workloads to install, select **.NET**. + +* Select **New Project** from the **File** menu or create a **New** project from the **Start Window**. + +* For a Blazor Web Apps experience (*recommended*), Visual Studio for Mac Preview can't create a Blazor Web App in its UI at this time. Install the [.NET 8.0 Preview SDK](https://dotnet.microsoft.com/download/dotnet/8.0) using the correct macOS installer for your platform architecture (Arm64 or x64). For more information on trusting the ASP.NET Core HTTPS development certificate, see . @@ -495,7 +511,7 @@ To create a Blazor app on macOS, use the following guidance: - To enable interactivity with server-side rendering (SSR), add the `--use-server`option to the command: + To enable interactivity with server-side rendering (SSR), add the `--use-server` option to the command: ```dotnetcli dotnet new blazor -o BlazorApp --use-server @@ -520,6 +536,10 @@ For a Blazor Web App experience (*recommended*), choose the **Blazor Web App** t :::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" +* Install [Visual Studio for Mac](https://visualstudio.microsoft.com/vs/mac/). When the installer requests the workloads to install, select **.NET**. + +* Select **New Project** from the **File** menu or create a **New** project from the **Start Window**. + * In the sidebar, select **Web and Console** > **App**. * Create the app: @@ -530,6 +550,10 @@ For a Blazor Web App experience (*recommended*), choose the **Blazor Web App** t :::moniker range="< aspnetcore-7.0" +* Install [Visual Studio for Mac](https://visualstudio.microsoft.com/vs/mac/). When the installer requests the workloads to install, select **.NET**. + +* Select **New Project** from the **File** menu or create a **New** project from the **Start Window**. + * In the sidebar, select **Web and Console** > **App**. * Create the app: diff --git a/aspnetcore/blazor/tutorials/build-a-blazor-app.md b/aspnetcore/blazor/tutorials/build-a-blazor-app.md index 52099dbcb4ca..5b4799036c9f 100644 --- a/aspnetcore/blazor/tutorials/build-a-blazor-app.md +++ b/aspnetcore/blazor/tutorials/build-a-blazor-app.md @@ -424,6 +424,8 @@ Update the `

` header to show a count of the number of todo items that aren't

Todo (@todos.Count(todo => !todo.IsDone))

``` + + Save the `Pages/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.