VScode Razor 페이지 만들기 (asp.net core 5.0)

우선 명령창을 실행하고 프로젝트 폴더를 생성한다.

 

명령창에서 다음 코드를 입력해서 Razor 프로젝트를 생성한다.

dotnet new webapp -o RazorPagesMovie

 

VScode 프로그램을 실행시킨다.

code -r RazorPagesMovie

 

Visual Studio Code 실행화면

명령창에 다음을 입력해서 "개발 인증서를 신뢰"을 인증하도록 한다.

그래야 브라우져에서 페이지를 확인 할 수 있다.

 

dotnet dev-certs https --trust

 

 

실행하기.

디버깅 없이 실행(ctrl + F5) 을 실시하면 에러가 발생하는데..이때는

 

명령파렛트에서 OmniSharp:Restart OmniSharp 를 실행하고

 

.NET: Generate Assets for Build and Debug 를 실행한 후 디버깅을 실행하면 웹사이트가 열린다.

 

웹사이트 실행화면.

Models 폴더를 만들고, Movie.cs 파일에 다음 코드를 입력한다.

using System;
using System.ComponentModel.DataAnnotations;

namespace RazorPagesMovie.Models
{
    public class Movie
    {
        public int ID { get; set; }
        public string Title { get; set; }

        [DataType(DataType.Date)]
        public DateTime ReleaseDate { get; set; }
        public string Genre { get; set; }
        public decimal Price { get; set; }
    }
}

 

VScode 추가된 화면.

 

데이타 모델 클래스가 추가된 모습이다.

이 Movie 클래스를 이용해서 DB에 자동으로 데이타 베이스를 생성하고 연결을 자동으로 만들어주는 패키지를 설치해야 한다.

 

다음을 하나씩 명령창에 입력해서 실행한다. 

dotnet tool install --global dotnet-ef
dotnet tool install --global dotnet-aspnet-codegenerator

위 코드는 "Entity FrameWork"와 코드 자동화 툴을 설치해 준다. 그 이후에

다음 패키지를 설치해 준다.

 

dotnet add package Microsoft.EntityFrameworkCore.Design
dotnet add package Microsoft.EntityFrameworkCore.SQLite
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer

 

패키지 설치전 프로젝트 파일 코드 모습니다.

 

패키지 설치한 후 프로젝트 파일에 추가된 모습

 

이제 가장 중요한 코드 자동화를 명령창에 입력해 준다.

 

dotnet aspnet-codegenerator razorpage -m Movie -dc RazorPagesMovieContext -udl -outDir Pages/Movies --referenceScriptLibraries -sqlite

영화 모델을 스캐폴드 합니다. 즉, 스캐폴드 도구로 영화 모델에 대한 CRUD(생성, 읽기, 수정 및 삭제) 작업을 위한 페이지를 생성합니다.

 

Data 폴더와, Page/Movies 폴더가 생성되었다.

하지만 아직 DB 테이블이 생성되어 있지 않다.

 

Dotnet ef migrations add InitialCreate

dotnet ef database update

위 명령을 실행하면 데이타 테이블 자동화 코드와 database가 업데이트 된다.

 

실행해 보면..(ctrl+F5)

localhost:5001/Movies

잘 실행된다.

 

위 내용은 아래 주소에서 자세히 확인할 수 있다.

https://docs.microsoft.com/ko-kr/aspnet/core/tutorials/razor-pages/?view=aspnetcore-5.0 

자습서: ASP.NET Core를 사용하여 Razor Pages 웹앱 만들기