웹 서버/ASP.NET Core 둘러보기

Razor Page

코다람쥐 2022. 4. 23. 22:57

1. Razor Page 구성

MVC패턴에서는 M, V, C의 3가지 구성요소로 이루어져있었다.

M : 원본 데이터를 표현

V : 웹 사이트에 출력되는 걸 표현

C : 기능 표현

 

그리고 Razor Page는 M-VC모델이라고 봐도되는데 VC의 역할을 하는 것이 Page이다.

 

2. Razor Page 구현

저번의 MVC처럼 이번에도 HelloEmpty프로젝트를 통해 Razor Page를 구현해본다.

index.cshtml 생성
index.csthml과 index.cshtml.cs

그러면 위의 사진처럼 2개의 파일이 생성되는데 index.cshtml이 View의 역할을 하고, index.cshtml.cs가 Controller의 역할을 한다.

 

index.cshtml

@page
@model HelloEmpty.Pages.IndexModel

<html>
<head>
    <title>Hello Razor Pages !</title>
</head>
<body>
    <h1>@Model.HelloMsg.Message</h1>
    <hr />
    <h2>@Model.Noti</h2>
    <form method="post">
        <label asp-for="HelloMsg.Message">Enter Message</label>
        <br />
        <input type="text" asp-for="HelloMsg.Message" />
        <br />
        <button type="submit">Submit</button>
    </form>
</body>
</html>

 

index.cshtml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using HelloEmpty.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace HelloEmpty.Pages
{
    public class IndexModel : PageModel
    {
        [BindProperty] // 모델 바인딩 참가 암시
        public HelloMessage HelloMsg { get; set; }

        public string Noti { get; set; }
        public void OnGet() // 기능의 시작
        {
            this.HelloMsg = new HelloMessage()
            {
                Message = "Hello Razor Pages"
            };
        }

        public void OnPost() // 최종요청을 할 때는 이 함수
        {
            this.Noti = "Message Changed";
        }
    }
}

 

Startup.cs

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages(); // RazorPages를 사용하겠다는 뜻
        }
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
            });

Startup.cs는 자동으로 생성되는데 위의 두 개의 함수만 수정해주면 된다.

 

웹페이지의 기능은 MVC패턴의 예제와 동일하다

하지만 MVC에 비해 더 간단하게 구현할 수 있다는 것을 알 수 있었다.

 

Razor Page가 MVC와의 가장 큰 차이점은 index.cshtml - index.cshtml.cs(V - C)가 묶여있어서 코드가 더 관리하기 쉬워진다.