Razor

Razor

Razor는 HTML과 C#을 혼합하여 동적인 웹 페이지를 작성할 수 있음.

동적인 컨트롤은 JavaScript 통해야 한다는 개념을 없앰. But 비동기 적인 부분에서는 script 언어를 사용해야함.

Razor는 IntelliSense(자동완성) 기능을 지원함. (View 에서 C# 코드 자동완성을 지원함)

Razor는 Core의 기능들을 HTML 요소에 적용할 수 있음. 이런 부분 때문에 동적으로 컨트롤 가능함.

 

 

Razor 사용 방법

컨트롤러에서 Taco 클래스를 반환함.

   public IActionResult Index()
        {
            Taco taco = new Taco();

            taco.No = 1;
            taco.Nmae = "타코야끼";

            return View(taco);
        }

 

 

뷰에서는 컨트롤러에서 받은 클래스를 받아서 HTML에서 사용 가능함

상단에 @model Taco 클래스를 선언해주고 HTML 사이에 @Model.Property 사용이 가능함.

@model Taco


<h1>@Model.No</h1>
<h1>@Model.Nmae</h1>

 

 

이번에는 배열로 Razor 구문을 사용해 보겠음

컨트롤러에서 List 형태로 변경해서 던져 보겠음

        public IActionResult Index()
        {
            List<Taco> taco = new List<Taco> 
            { 
                new Taco{No = 1, Nmae = "타코" },
                new Taco{No = 2, Nmae = "타코2" },
                new Taco{No = 3, Nmae = "타코3" }
            };
            return View(taco);
        }

 

 

항상 컨트롤러와 뷰의 형태와 모델은 일치해야함

@model List<Taco>




@foreach (var item in Model)
{
    <h1>@item.No</h1>
    <h1>@item.Nmae</h1>
}

 

 

좀 더 응용 해보면 C# 클래스들을 모두 사용할 수 있음

똑같이 상단에 네임스페이스 추가해주고 사용 가능

어찌보면 한 페이지에서 모든게 이루어지는 ASP를 떠올리게 함... (ASP는 엄청난 녀석임 ㅋ)

@using System.Data.SqlClient;
@model List<Taco>

@{
    string a = string.Empty;
    int b = 1;
    double c = Math.Round(100.12, 1);

    SqlConnection conn = new SqlConnection("");
}

 

 

MVC 버전이 아닌 오리지널 Razor WEB 버전으로도 해봄

컨트롤러가 없기 때문에 WebForm과 비슷함.

한 페이지당 cshtml와 cshtml.cs 2개로 나눠져 있음.

cs 소스이고 상단에 TacoModel 과 PageModel 부분을 주목해야 함

TacoModel이 뷰로 반환되는 모델이고 PageModel은 뷰에서 해당 모델을 사용할 수 있도록 해줌.

    public class TacoModel : PageModel
    {
        public Taco tacos { get; set; }

        public void OnGet()
        {
            tacos = new Taco();
            tacos.No = 1;
            tacos.Name = "타코";
        }

        public string GetName()
        {
            return "타코 메서드";
        }
    }

 

 

모델 프로퍼티야 그러려니 하는데, 메서드도 가지고옴... ㅋ

전재산 그대로 가져온 느낌.

결과적으로 cs 단계에서 처리한 작업을 Model 하나로 모두 넘기는 개념임.

상단에 @page가 선언되어야 해당 페이지가 Razor 페이지로 인식함.

@page
@model TacoModel
@{
    ViewData["Title"] = "Home page";
}

<h1>@Model.tacos.No</h1>
<h1>@Model.tacos.Name</h1>
<h1>@Model.GetName();</h1>

 

 

미들웨어

HTTP 요청 처리

Razor 미들웨어는 HTTP 요청을 받아 처리하고, 요청된 Razor 페이지를 렌더링하여 HTTP 응답 생성함

Razor 페이지 렌더링

요청된 Razor 페이지의 렌더링을 처리하고, 이 과정에서 서버측(C#) 코드를 실행함.

 

모델 바인딩

어찌보면 핵심 기술이라고 보여짐. 서버에서 작업된 데이터를 모델에 담아서 뷰로 던지는... ㅋ

MVC만 쓸 때는 Entity만 던질 수 있는줄 알았는데 Razor 에서는 클래스 단위로 던질 수 있어 안에 속한 메서드도 동작 가능함

 

뷰 실행

Razor 미들웨어는 뷰 엔진을 실행하여 페이지를 해석하고 해당 코드를 실행함.

뷰에 Razor로 작성된 C# 코드는 디버깅도 가능함

 

HTTP 응답 생성

렌더링된 Razor 페이지를 포함한 HTTP 응답을 생성하고 사용자에게 전달함

 

MapRazorPages

MapRazorPages 미들웨어는 ASP.NET Core의 라우팅 시스템에서 Razor 페이지를 처리 하기 위해 사용함.

라우팅 파이프라인에서 Razor 페이지 경로를 매핑하고 해당 요청이 들어오면 Razor 페이지를 실행 시키고 렌더링 역할을 함

해당 미들웨어가 있기에 Pages 경로 내의 Razor 페이지들을 처리 할 수 있는거임.

결론적으로 MapRazorPages 미들웨어는 Razor 페이지의 경로를 매핑하는 역할을 수행함.

그래서 MVC 어플리케이션에는 해당 미들웨어가 없음.

 

 

결론

Razor 개념은 한마디로 HTML 소스에 C# 코드를 융합 하는 것임.

융합하면서 정적이던 HTML 이녀석을 동적으로 춤추게함.

MVC 와 Razor 페이지에서 주로 사용되며, MVC의 경우 컨트롤러에서 뷰로 모델을 던지고 해당 뷰에서 모델을 HTML과 사용하는 것을 의미함.