본문 바로가기

Programming/asp.net core

ASP.NET Core에서 Razor 페이지 만들기

ASP.NET Core에서 Razor 페이지 만들기

다음의 네가지 목표를 이번 포스트팅에서 알아보고자 합니다.

  • asp.net core를 이용하여 레이져웹페이지 프로젝트를 생성
  • 원격지의 sql 서버를 연결
  • 코드를 이용하여 데이터베이스 개체들을 생성
  • 클래스에 대하여 자동으로 웹페이지 생성

프로젝트 생성

Visual Studio에서 새로 만들기 > 프로젝트를 선택합니다.

ASP.NET Core WEb Application을 선택합니다.

프로젝트 생성

.NET core와 ASP.NET Core 2.0을 선택합니다.

프레임워크 선택

자동 생성된 파일 및 폴더

  • Wwwroot - 정적파일
  • appsettings.json - 설정
  • Program.cs - asp.net core앱을 호스트합니다.
  • Startup.cs - 서비스 설정
  • Pages - 레이아웃
    • _Layout.cshtml - 공통적인 레이아웃
    • _ViewStart.cshtml - Layout 속성을 설정
    • _ViewImports.cshtml - 지시자 임포트
    • _ValidationScriptsPartial.cshtml - jQuery 요효성 검사 스크립트 참조 제공

데이터 모델 생성

Models 폴더를 생성하고 Student 클래스를 추가합니다. ID는 기본키로 추후 테이블에 생성됩니다.

namespace RazorPageSchool.Models
{
    public class Student
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }

    }
}

데이터베이스 컨텍스트 클래스 추가합니다. 클래스명은 StudentContext로 하겠습니다. Microsoft.EntityFrameworkCore를 임포트하고 클래스는 DbContext에서 상속받습니다.

    public class StudentContext :  DbContext
    {
        public StudentContext(DbContextOptions<StudentContext> options)
                : base(options)
        {

        }

        public DbSet<Student> Student { get; set; };
    }

데이터베이스 연결 문자열을 appsettings.json에 추가합니다.

  "ConnectionStrings": {
    "StudentContext": "Server=192.168.219.112;Database=TestDB;User Id=xxxxx; Password=xxxxx;;MultipleActiveResultSets=true"
  }

startup.cs 파일에 DbContext 사용에 대한 종속성을 주입합니다. (AddDbContext)

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddDbContext<StudentContext>(options =>
                    options.UseSqlServer(Configuration.GetConnectionString("StudentContext")));
            services.AddMvc();
        }

Package Manager Console로 이동하여 다음의 명령을 수행합니다.

Install-Package Microsoft.VisualStudio.Web.CodeGeneration.Design -Version 2.0.0
Add-Migration Initial
Update-Database
  • Install-Package은 패키지를 설치하는 명령이고 Microsoft.VisualStudio.Web.CodeGeneration.Design은 자동으로 웹페이지를 생성해주는 패키지입니다.
  • Add-Migration 은 모델에 생성한 클래스를 이용하여 데이터베이스에 테이블을 생성할 때 이용하는 스크립트를 생성합니다.
    • Initial은 마이그레이션 명칭입니다. 사용자가 원하는 이름을 사용합니다.
    • 해당명령은 수행하면 Migrations 폴더에 스크립트들이 생성됩니다.
  • Update-Database은 Add-Migration에 의하여 생성된 스크립트를 실행하여 실제로 데이터베이스에 테이블등을 생성합니다.

Update-Database를 수행후에 Student 테이블이 생성되었음을 확인합니다.

Student 클래스를 사용하는 웹페이지 자동생성

명령창에서 다음의 명령을 수행하여 Student클래스를 이용하여 웹페이지를 자동으로 생성합니다. 명령은 .csproj 파일이 위치한 곳에서 수행해야합니다.

dotnet aspnet-codegenerator razorpage -m Student -dc StudentContext -udl -outDir Pages\Students --referenceScriptLibraries

Pages 폴더에 Students 폴더가 자동으로 생성되었고 몇몇 .cshtml 파일들이 생성되었음을 확인합니다.

student 웹페이지

앱을 실행한 후에 http://localhost:50398/Students 로 이동하면 자동으로 생성된 웹페이지들이 동작하는 것을 볼 수 있습니다.

student 페이지