Create a new project with Blazor (WebAssembly) for ASP.NET Core 3.1 in Visual Studio Code
Blazor WebAssembly is a client side framework that exists in ASP.NET Core 3 or higher. In this tutorial I am going to teach you how to start a project with Blazor in Visual Studio Code. In additional, I will show how to create a new page and get JSON data from API and show them in a table. To get started with Blazor, please install the following tools:
Also, you can search "start Blazor visual studio code" and click the Microsoft Link to find the newest tools.
- Install the .NET Core 3.1 SDK or higher. (in PowerSell by running dotnet --version in a command shell you can find which SDK is installed in your system.
- Install Blazor templates by this comment
dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview4.20210.8
- Install Visual Studio Code.
- Install the latest C# for Visual Studio Code extension and the JavaScript Debugger (Nightly) extension with
debug.javascript.usePreview
set totrue
. - For start a new Blazor WebAssembly, open the Visual Studio Code and run this commend in terminal:
dotnet new blazorwasm -o WebApplication1
in which WebApplication1 is the name of your project that you can change it
- Install JSON and C# package:
dotnet add package Newtonsoft.Json
- Install C# for Visual Studio Code (powered by OmniSharp).
Please wait until all packages installed successfully. Then run your project by below command in terminal:
dotnet run
by press Ctrl+Click on link you run you project on browser or type http://localhost:5000/ in address bar as below photo:
For stop of running press Ctrl+C in the terminal of Visual Studio Code (VSC)
In this step we want to add a new Razor page and get data from a real API. So, add a new page in page folder called People. See below photo:
In people.razor page copy below codes:
@page "/People"
@inject HttpClient Http
@using Newtonsoft.Json
<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>
@if (peoples == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>Email</th>
</tr>
</thead>
<tbody>
@foreach (var item in peoples)
{
<tr>
<td>@item.id</td>
<td>@item.name</td>
<td>@item.age</td>
<td>@item.email</td>
</tr>
}
</tbody>
</table>
}
@code {
private PeopleList[] peoples;
protected override async Task OnInitializedAsync()
{
using (var _client = new HttpClient())
{
var url="http://cutecodes.com/api/testapi";
var result =await _client.GetStringAsync(url);
//dotnet add package Newtonsoft.Json
peoples = JsonConvert.DeserializeObject<PeopleList[]>(result);
//cutecodes.com
}
}
public class PeopleList
{
public int id { get; set; }
public string name { get; set; }
public int age { get; set; }
public string email { get; set; }
}
}
In NavMenu.razor file is shared folder add li tag:
<li class="nav-item px-3">
<NavLink class="nav-link" href="People">
<span class="oi oi-list-rich" aria-hidden="true"></span> People List
</NavLink>
</li>