Intro

Download and install

To build your first .NET application, you'll need to install the .NET SDK, Visual Studio Code, and C# Dev Kit.

What are the .NET SDK, Visual Studio Code, and C# Dev Kit?

• The .NET SDK (Software Development Kit) is a free and open-source collection of tools and libraries you will need to build and run applications using C#. C# is the modern object-oriented programming language you will be using for this tutorial.

• Visual Studio Code (VS Code) is the world's most popular lightweight, free, and open-source code editor. This is where you will write your C# code.

• C# Dev Kit is a powerful set of VS Code extensions that makes C# development easier. It helps you write, test, and debug your code as you build apps.

The .NET WinGet Configuration file will install the .NET 9 SDK, VS Code, and C# Dev Kit for you. If you already have something installed, WinGet will skip that installation step.

To build your first .NET application with Visual Studio Code, set up your environment:

1. Download and install the .NET SDK:

   Install .NET 9 SDK instructions

   Download .NET 9 SDK x64 (Intel)
   Download .NET 9 SDK Arm64 (Apple Silicon)

   If you're on a Mac with an Apple M1 or M2 chip, you need to install the Arm64 version of the SDK.

2. Download and install VS Code:

   Download VS Code

3. Open VS Code and select theExtensions button in VS Code's Activity Bar to the left. TypeC# in the search bar, select C# Dev Kit, and then select theInstall button on the C# Dev Kit extension page.

Check everything installed correctly

Now that your environment is set up, go to theSearch in yourWindows Taskbar, and typeVisual Studio Code. Click the application to openVS Code.

Once you've set up your environment, open a new VS Code terminal. In the toolbar, selectTerminal, thenNew Terminal.

In your terminal, run the following command to check your installation.

dotnet

If the installation succeeded, you should see an output similar to the following:

Usage: dotnet [options]Usage: dotnet [path-to-application]Options:-h|--help         Display help.--info            Display .NET information.--list-sdks       Display the installed SDKs.--list-runtimes   Display the installed runtimes.path-to-application:The path to an application .dll file to execute.

If everything looks good, select theContinue button below to go to the next step.

Got an error?

If you receive a'dotnet' is not recognized as an internal or external command error, make sure you opened anew VS Code terminal. Ifrestarting VS Code orrestarting your machine doesn't resolve the issue, use theI ran into an issue button to get help fixing the problem.

Create your app

1. Open the command palette in VS Code by pressingCTRL+SHIFT+P.
2. Open the command palette in VS Code by pressingCMD+SHIFT+P.
3. Type.NET: to see the commands you can run with C# Dev Kit!
4. Find and select.NET: New Project to create a new .NET project.
5. Scroll down and selectBlazor Web App.
6. Choose the folder location you'd like to save your project.
7. Name the projectBlazorApp in the command palette when prompted. PressEnter to confirm.

Enable Workspace Trust by checking the box and selectingYes, I trust the authors.

If you have a Visual Studio Subscription, sign into your account. If you don't see a prompt pop up, click on theC# icon in VS Code's Status Bar towards the bottom right of your window.

In the Side Bar, make sure theVS Code Explorer is open. Here you will see theBlazorApp folder and theSolution Explorer.
Follow along with the video below to: collapse theBlazorApp folder, open theSolution Explorer, open theBlazorApp project, and drag and drop theSolution Explorer higher.

1. Collapse theBlazorApp folder in the VS Code Explorer.
2. Click on the chevron to the left of theSolution Explorer to expand it.
3. Click on the chevron to the left of theBlazorApp project in theSolution Explorer to expand it.
4. Drag and drop theSolution Explorer belowBlazorApp.

Your project is created and loaded in Visual Studio Code. Take a look at the contents of your project usingSolution Explorer.

Several files were created 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 and where you configure the app services and middleware.

• Inside theComponents directory:

  • App.razor is the root component for the app.
  • Routes.razor configures the Blazor router.
  • ThePages directory contains some example web pages for the app.
• BlazorApp.csproj defines the app project and its dependencies and can be viewed by double-clicking the BlazorApp project node in the Solution Explorer.
• ThelaunchSettings.json file inside theProperties directory defines different profile settings for the local development environment. A port number is automatically assigned at project creation and saved on this file.

If everything looks good, select theContinue button below to go to the next step.

Run your app

Select theRun and Debug icon in theActivity Bar on the left side of your workspace.

Select the blueRun and Debug button.

Visual Studio Code will open up a menu of launch configurations. SelectC#: BlazorApp [Default Configuration].

Then you need to select a debugger. SelectC#.

Wait for the app to launch in the browser. Once you get to the following page, you have successfully run your first Blazor app!

You can stop the app at any time by clicking on the stop button in the top toolbar.

To re-run your application, select the dropdown menu to the right of the run button in the top right, and selectRun project associated with this file.

The displayed page is defined by theHome.razor file located inside theComponents/Pages directory. This is what its contents look like:

It already contains the code that sets it as the homepage and displays the textHello, world! andWelcome to your new app. ThePageTitle component sets the title for the current page so that it shows up in the browser tab.

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 theClick 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 theCounter component atCounter.razor file located inside theComponents/Pages directory.

A request for/counter in the browser, as specified by the@page directive at the top, causes theCounter component to render its content. The@rendermode directive enables interactive server rendering for the component, so that it can handle user interface events from the browser.

Each time theClick me button is selected:

• Theonclick event is fired.
• TheIncrementCount method is called.
• ThecurrentCount 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.

Add aCounter component to the app's homepage by adding a<Counter /> element at the end of theHome.razor file.

@page "/"<PageTitle>Home</PageTitle><h1>Hello, world!</h1>Welcome to your new app.<Counter />

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 theCounter component for specifying how much it increments with every button click:

• Add a public property forIncrementAmount with a[Parameter] attribute.
• Change theIncrementCount method to use theIncrementAmount when incrementing the value ofcurrentCount.

The following code shows how to achieve that. The highlighted lines show the changes.

@page "/counter"@rendermode InteractiveServer<PageTitle>Counter</PageTitle><h1>Counter</h1><p role="status">Current count: @currentCount</p><button @onclick="IncrementCount">Click me</button>@code {    private int currentCount = 0;    [Parameter]    public int IncrementAmount { get; set; } = 1;    private void IncrementCount()    {        currentCount += IncrementAmount;    }}

InHome.razor, update the<Counter> element to add anIncrementAmount attribute that changes the increment amount to ten as shown by the highlighted line in the following code:

@page "/"<PageTitle>Home</PageTitle><h1>Hello, world!</h1>Welcome to your new app.<Counter IncrementAmount="10" />

Next steps

Congratulations, you've built and run your first Blazor app!

Keep learning

Now that you've got the basics, continue building your first Blazor app with Blazor self-guided learning module on Microsoft Learn where you will build a to-do list app.

Microsoft Learn: Build a Blazor todo list app

Blazor for Beginners

Learn how to build a full Blazor app from start to finish:

You might also be interested in...

Blazor documentation

Browse through our documentation on Blazor to learn how to build awesome web apps.

Blazor publishing concepts

Follow along on Microsoft Learn on how to publish a Blazor app and .NET API with Azure Static Web Apps.

Build a REST API

Create a REST API using ASP.NET