Once you've installed, open a new command prompt and run the following command:
Once you've installed, open a new terminal and run the following command:
Terminal
dotnet
If the command runs, printing out information about how to use dotnet, you're good to go.
Got an error?
If you receive a 'dotnet' is not recognized as an internal or external command error, make sure you opened a new command prompt. If you can't resolve the issue, use the I ran into an issue button to get help fixing the problem.
Create your app
In your command prompt, run the following commands:
In your terminal, run the following commands:
Terminal
dotnet new blazorserver -o BlazorApp --no-httpscd BlazorApp
What do these commands mean?
The dotnet new blazorserver command creates a new Blazor Server app for you.
The -o parameter creates a directory named BlazorApp where your app is stored and populates it with the required files.
The --no-https flag specifies not to enable HTTPS.
The command cd BlazorApp changes your directory to the one you just created.
What files were created?
Several files were created in the BlazorApp directory, to give you a simple Blazor app that is ready to run.
Program.cs is the entry point for the app that starts the server.
Startup.cs is where you configure the app services and middleware.
App.razor is the root component for the app.
The BlazorApp/Pages directory contains some example web pages for the app.
BlazorApp.csproj defines the app project and its dependencies.
Run your app
In your command prompt, run the following command:
In your terminal, run the following command:
Terminal
dotnet run
Wait for the app to display that it's listening on http://localhost:5000 and then, open a browser and navigate to that address.
Once you get to the following page, you have successfully run your first Blazor app!
The displayed page is defined by the Pages/Index.razor file.
Pages/Index.razor
@page "/"<h1>Hello, world!</h1>Welcome to your new app.<SurveyPrompt Title="How is Blazor working for you?" />
It already contains the code that sets it as the homepage and displays the text "Hello, world!" and "Welcome to your new app". It also includes a SurveyPrompt component that renders a link to the Blazor feedback survey.
Try the counter
In the running app, navigate to the Counter page by clicking the Counter tab in the sidebar on
the left. The following page should then be displayed.
Select the Click me button to increment the count without a page refresh. Incrementing a counter in a webpage normally requires writing JavaScript, but with Blazor you can use C#.
You can find the implementation of the Counter component at 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.
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 to show the updated count.
Add a component
Each of the .razor files defines a UI component that can be reused.
Open Pages/Index.razor in a text editor of your choice. Add a Counter component to the app's homepage by adding a <Counter /> element at the end of the file.
Pages/Index.razor
@page "/"<h1>Hello, world!</h1>Welcome to your new app.<SurveyPrompt Title="How is Blazor working for you?" /><Counter />
Re-run your app
End the previous dotnet run command that is running the site locally, then run the following command to re-launch the site:
Terminal
dotnet run
Refresh the browser to see the change:
Modify a component
Component parameters are specified using attributes or child content, which allow you to set
properties on the child component. Define a parameter on the Counter component for
specifying how much it increments with every button click:
Add a public property for IncrementAmount with a [Parameter]
attribute.
Change the IncrementCount method to use the IncrementAmount when
incrementing the value of currentCount.
In Index.razor, update the <Counter> element to add an
IncrementAmount attribute that changes the increment amount to ten.
Pages/Index.razor
@page "/"<h1>Hello, world!</h1>Welcome to your new app.<SurveyPrompt Title="How is Blazor working for you?" /><Counter IncrementAmount="10" />
Rerun the app. The Index component now has its own counter that increments by ten
each time the Click me button is selected, as shown in the following image. The Counter component
(Counter.razor) at /counter continues to increment by one.
Next steps
Congratulations, you've built and run your first Blazor app!
Learn more by following the tutorial to build a to do list app.
Before starting this tutorial, we recommend installing an editor.
Visual Studio
Fully-featured integrated development environment (IDE) on Windows for building every type of .NET application.
Build native Android, iOS, macOS, and Windows apps with Xamarin, plus websites and services with ASP.NET Core. In the installer, select the .NET Core workload.
