VSCode] ASP.NET Core Blazor App

1. .NET Core 3.1 또는 .NET 5.0 SDK 설치

https://dotnet.microsoft.com/download

C# 9.0 사용하려면 .NET 5.0을 설치한다.

Download .NET (Linux, macOS, and Windows)

 

2. C# extension for Visual Studio Code 설치 

3. Blazor Server 프로젝트 생성

dotnet new blazorserver

4. 앱 실행

$ dotnet watch run
watch : Started
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://localhost:5000
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: D:\BlazorApp_VSCode

4. component 추가 (ToDo 페이지)

$ dotnet new razorcomponent -n Todo -o Pages
The template "Razor Component" was created successfully.

Pages 폴더에 Todo.razor 파일이 생성되었다. 

<h3>Todo</h3>

@code {

}

NavMenu.razor에 todo 링크 태그를 추가한다.

         <li class="nav-item px-3">
            <NavLink class="nav-link" href="todo">
                  <span class="oi oi-list-rich" aria-hidden="true"></span> Todo
            </NavLink>
         </li>

프로젝트 루트에 새파일 추가 TodoItem.cs

public class TodoItem
{
    public string Title { get; set; }
    public bool IsDone { get; set; }
}