C# (C Sharp) .NET5 MVC(View) Razor pages & @RenderBody()

2021. 1. 25. 09:47

일단 dotnet 튜토리얼에서 지금까지 나온 것들을 정리해보면....

1. 문자열 리턴

public string Index() {
    return "HelloWorld Index String return";
}

return 타입 string

2. 변수를 문자열 처리해서 리턴

public string Welcome(string name, int ID = 1) {
    return HttpUtility.HtmlEncode("Hello " + name + ", ID is: " + ID);
}

return 타입 string
변수는 Http.Utility를 이용해 Html로 인코딩 해서 리턴

3. Razor로 페이지 리턴

public ActionResult Index() {
    return View();
}

문제는 이게 jsp처럼 서버에서 페이지를 html로 컴파일 해서 넘겨주는건지, html을 바로 넘겨주는건지 잘 모르겠다. 아마 html쪽 같아 보이기는 한데... 확장자는 또 왜 cshtml인건지;;

아무튼 return 타입은 ActionResult고 View()를 리턴한다고만 되어있다.

이 때도 역시 파일명을 따로 설정하지 않고 자동으로 매칭된다.

매칭되는 파일은 VIews/컨트롤러 이름/메소드이름.cshtml이 된다.

따라서 HelloWorldController의 Index 메소드의 View()에 의해 리턴되는 파일은 Views/HelloWorld/Index.cshtml이 된다.

이 Index.cshtml 파일은 다음과 같이 작성된다.

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@{ 
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

wktpgl qhaus자세히 보면 layout이 Views에 있는 다른 공유된 cshtml파일을 가리킨다. 거기에 이 페이지에서 추가한 코드 일부가 기본 탬플릿(?)같은 역할을 하는 레이아웃에 추가되서 완성된 페이지가 된다. (ViewBag.Title이라는거는 아래 레이아웃 페이지에 보면 <title></title>태그 사이에 @ViewBag.Title이라고 적혀있는 것을 볼 수 있을 것이다. 즉, 해당 변수를 "Index"라 하였으므로 탭에 표시되는 타이틀은 다음과 같다. 'Index - My ASP.NET Application')

참고로, _Layout.cshtml파일의 내용은 다음과 같다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

따라서 이런 페이지를 응답으로 받게 된다.

이 레이아웃에서 가장 중요한 부분은 '@RenderBody()'이란 annotation(?)이 있는 곳이다.

이곳에 각 Views에서 작성한 cshtml파일의 코딩 내용이 저 부분이 injection 되어 페이지가 완성된다.
(@ViewBag.Title처럼 정해진 위치로 가는 코드 제외)

위 코드를 조금 더 자세히 뜯어보면

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li>@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
  </ul>
</div>

이런 코드가 보일것이다. 모든 페이지에 네비게이터를 추가해주는 코드이다.

해당 메소드는 다음과 같은 역할을 한다.

음... 이렇게 보니 jsp 비슷한 건가보다... 서버에서 렌더링 해서 내려보내주는.... 아니 왜 최신 튜토리얼에서 이런 방식을...?? 프론트엔드/백엔드 완전히 나누는게 아니고 개발자가 디자인 빼고 다 하는... 완전 한국식인 것 같은데;;;

'개발자 > .NET' 카테고리의 다른 글

C# (C Sharp) The annotation for nullable reference types should only be used in code within a '#nullable' annotations context. (0)	2021.02.01
C# (C Sharp) Visual Studio 기본 생성 클래스 public으로 만들기 (0)	2021.01.25
C# (C Sharp) .NET5 MVC(Controller)URL 경로 (0)	2021.01.24
Visual Studio for Windows 단축키 변경 (0)	2021.01.24
C# (C Sharp) Interface (인터페이스 추상화) 자바와 차이 (0)	2021.01.22

좋은 개발자가 되자