12 KiB
title | author | description | monikerRange | ms.author | ms.custom | ms.date | no-loc | uid | |
---|---|---|---|---|---|---|---|---|---|
Get started with ASP.NET Core Blazor | guardrex | Get started with Blazor by building a Blazor app with the tooling of your choice. | >= aspnetcore-3.0 | riande | mvc | 11/07/2019 |
|
blazor/get-started |
Get started with ASP.NET Core Blazor
By Daniel Roth and Luke Latham
Get started with Blazor:
::: moniker range=">= aspnetcore-3.1"
-
Install the .NET Core 3.1 Preview SDK.
-
Install the Blazor WebAssembly template by running the following command in a command shell. The Microsoft.AspNetCore.Blazor.Templates package has a preview version while Blazor WebAssembly is in preview.
dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview2.19528.8
-
Follow the guidance for your choice of tooling:
Visual Studio
1. Install Visual Studio 16.4 Preview 2 or later with the ASP.NET and web development workload.
2. Create a new project.
3. Select Blazor App. Select Next.
4. Provide a project name in the Project name field or accept the default project name. Confirm the Location entry is correct or provide a location for the project. Select Create.
5. For a Blazor WebAssembly experience, choose the Blazor WebAssembly App template. For a Blazor Server experience, choose the Blazor Server App template. Select Create. For information on the two Blazor hosting models, Blazor Server and Blazor WebAssembly, see xref:blazor/hosting-models.
6. Press Ctrl+F5 to run the app.
[!NOTE] If you installed the Blazor Visual Studio extension for a prior preview release of ASP.NET Core Blazor (Preview 6 or earlier), you can uninstall the extension. Installing the Blazor templates in a command shell is now sufficient to surface the templates in Visual Studio.
Visual Studio Code
1. Install Visual Studio Code.
2. Install the latest C# for Visual Studio Code extension.
3. For a Blazor WebAssembly experience, execute the following command in a command shell:
dotnet new blazorwasm -o WebApplication1
For a Blazor Server experience, execute the following command in a command shell:
dotnet new blazorserver -o WebApplication1
For information on the two Blazor hosting models, Blazor Server and Blazor WebAssembly, see xref:blazor/hosting-models.
4. Open the WebApplication1 folder in Visual Studio Code.
5. For a Blazor Server project, the IDE requests that you add assets to build and debug the project. Select Yes.
6. If using a Blazor Server app, run the app using the Visual Studio Code debugger. If using a Blazor WebAssembly app, execute
dotnet run
from the app's project folder.7. In a browser, navigate to
https://localhost:5001
..NET Core CLI
For a Blazor WebAssembly experience, execute the following commands in a command shell:
dotnet new blazorwasm -o WebApplication1 cd WebApplication1 dotnet run
For a Blazor Server experience, execute the following commands in a command shell:
dotnet new blazorserver -o WebApplication1 cd WebApplication1 dotnet run
For information on the two Blazor hosting models, Blazor Server and Blazor WebAssembly, see xref:blazor/hosting-models.
In a browser, navigate to
https://localhost:5001
.
::: moniker-end
::: moniker range="< aspnetcore-3.1"
-
Install the latest .NET Core 3.0 SDK release.
-
Optionally install the Blazor WebAssembly template by installing the .NET Core 3.1 Preview SDK and then running the following command in a command shell:
dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview2.19528.8
-
Follow the guidance for your choice of tooling:
Visual Studio
1. Install the latest Visual Studio with the ASP.NET and web development workload.
2. Optionally install Visual Studio 16.4 Preview 2 or later with the ASP.NET and web development workload for Blazor WebAssembly app development.
3. Create a new project.
4. Select Blazor App. Select Next.
5. Provide a project name in the Project name field or accept the default project name. Confirm the Location entry is correct or provide a location for the project. Select Create.
6. For a Blazor WebAssembly experience, choose the Blazor WebAssembly App template. For a Blazor Server experience, choose the Blazor Server App template. Select Create. For information on the two Blazor hosting models, Blazor Server and Blazor WebAssembly, see xref:blazor/hosting-models.
7. Press F5 to run the app.
[!NOTE] If you installed the Blazor Visual Studio extension for a prior preview release of ASP.NET Core Blazor (Preview 6 or earlier), you can uninstall the extension. Installing the Blazor templates in a command shell is now sufficient to surface the templates in Visual Studio.
Visual Studio Code
1. Install Visual Studio Code.
2. Install the latest C# for Visual Studio Code extension.
3. For a Blazor WebAssembly experience, execute the following command in a command shell:
dotnet new blazorwasm -o WebApplication1
For a Blazor Server experience, execute the following command in a command shell:
dotnet new blazorserver -o WebApplication1
For information on the two Blazor hosting models, Blazor Server and Blazor WebAssembly, see xref:blazor/hosting-models.
4. Open the WebApplication1 folder in Visual Studio Code.
5. For a Blazor Server project, the IDE requests that you add assets to build and debug the project. Select Yes.
6. If using a Blazor Server app, run the app using the Visual Studio Code debugger. If using a Blazor WebAssembly app, execute
dotnet run
from the app's project folder.7. In a browser, navigate to
https://localhost:5001
..NET Core CLI
For a Blazor WebAssembly experience, execute the following commands in a command shell:
dotnet new blazorwasm -o WebApplication1 cd WebApplication1 dotnet run
For a Blazor Server experience, execute the following commands in a command shell:
dotnet new blazorserver -o WebApplication1 cd WebApplication1 dotnet run
For information on the two Blazor hosting models, Blazor Server and Blazor WebAssembly, see xref:blazor/hosting-models.
In a browser, navigate to
https://localhost:5001
.
::: moniker-end
Multiple pages are available from tabs in the sidebar:
- Home
- Counter
- Fetch data
On the Counter page, select the Click me button to increment the counter without a page refresh. Incrementing a counter in a webpage normally requires writing JavaScript, but with Blazor you can use C#.
Pages/Counter.razor:
A request for /counter
in the browser, as specified by the @page
directive at the top, causes the Counter
component to render its content. Components render into an in-memory representation of the render tree that can then be used to update the UI in a flexible and efficient way.
Each time the Click me button is selected:
- The
onclick
event is fired. - The
IncrementCount
method is called. - The
currentCount
is incremented. - The component is rendered again.
The runtime compares the new content to the previous content and only applies the changed content to the Document Object Model (DOM).
Add a component to another component using HTML syntax. For example, add the Counter
component to the app's homepage by adding a <Counter />
element to the Index
component.
Pages/Index.razor:
Run the app. The homepage has its own counter provided by the Counter
component.
Component parameters are specified using attributes or child content, which allow you to set properties on the child component. To add a parameter to the Counter
component, update the component's @code
block:
- Add a public property for
IncrementAmount
with a[Parameter]
attribute. - Change the
IncrementCount
method to use theIncrementAmount
when increasing the value ofcurrentCount
.
Pages/Counter.razor:
Specify the IncrementAmount
in the Index
component's <Counter>
element using an attribute.
Pages/Index.razor:
Run the app. The Index
component has its own counter that increments by ten each time the Click me button is selected. The Counter
component (Counter.razor) at /counter
continues to increment by one.
Next steps
xref:tutorials/first-blazor-app