티스토리 뷰
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
</head>
<body>
<div>
@Html.ActionLink("새 할일", "Create")
@Html.ActionLink("할일 목록", "Index")
</div>
<br />
Index.cshtml과 Create.cshtml을 보면 이 부분이 똑같습니다
페이지가 두 개뿐인데다가 코딩양도 많지 않아 이정도는 상관없는데
이카운트 ERP 사이트를 보면 가운데 메뉴가 나오는 부분은 계속 바뀌지만
좌측과 상단에 메뉴가 나오는 부분은 계속 똑같아요
그럼 이 부분을 모든 페이지마다 다 코딩을 해줘야 할까요?
너~~무 귀찮죠? 개발자는 귀찮은 짓하는 데에는 아주 질색을 하는 게으른 놈들입니다
그래서 ASP.NET도 같은 부분은 한 곳에 몰아놓을 수 있도록 기능을 제공합니다
그것이 바로 Layout 입니다
이 Layout기능을 사용해서 우리의 Todo 리스트 웹앱을 개선해 보죠
먼저, 공통의 Layout 페이지를 만들어 보겠습니다
Views/Shared 폴더에 _TodoLayout.cshtml 파일을 생성합니다
_TodoLayout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div>
@Html.ActionLink("새 할일", "Create")
@Html.ActionLink("할일 목록", "Index")
</div>
<br />
<div>
@RenderBody()
</div>
</body>
</html>
-
ViewBag은 말 그대로 뷰가방입니다. 여기에다가 뷰에서 사용할 정보를 담아놓을 수 있습니다. 뷰가방에서 Title을 꺼내 보여줍니다
-
Index.cshtml과 Create.cshtml에서 반복되었던 링크부분을 이곳에 넣습니다
-
@RenderBody() 이 부분이 Layout의 중요한 부분입니다
해당 Layout을 사용하는 페이지의 코딩은 바로 이 @RenderBody() 부분에 삽입되게 됩니다
Index.cshtml과 Create.cshtml을 _TodoLayout.cshtml을 사용하도록 수정하겠습니다
Index.cshtml
@model List<TodoListRazor.Models.Todo>
@{
ViewBag.Title = "할일 목록";
Layout = "~/Views/Shared/_TodoLayout.cshtml";
}
할일목록
<table>
<tr>
<th>번호</th>
<th>내용</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>@item.No</td>
<td>@item.Contents</td>
<td>@Html.ActionLink("삭제", "Delete", item)</td>
</tr>
}
</table>
Create.cshtml
@model TodoListRazor.Models.Todo
@{
ViewBag.Title = "새 할일";
Layout = "~/Views/Shared/_TodoLayout.cshtml";
}
할일 입력하기
@using (Html.BeginForm()) {
@Html.LabelFor(x => x.Contents)
@Html.TextBoxFor(x => x.Contents)
<button type="submit">저장</button>
}
-
공통부분이 layout으로 모두 넘어가서 코딩이 심플해 졌습니다
-
ViewBag.Title에 원하는 제목을 넣어 layout에서 꺼내 쓸 수 있도록 합니다
-
Layout에 _TodoLayout.cshtml을 연결합니다
F5를 눌러 화면을 확인해 볼까요?
화면상으로는 변경없이 원래대로 잘 나오고 동작하는 것을 확인할 수 있습니다
이러한 방법으로 화면에서 반복되는 코딩을 최대한 줄일 수 있습니다
※ 추가적으로 알면 좋은 내용
Index.cshtml과 Create.html에서 Layout = ... 부분을 삭제하고 화면을 다시 확인해 볼까요?
갑자기 이런 이상한 화면이 나옵니다
어떻게 이런 화면이 나왔을 까요?
Layout을 제외한 모든 cshtml 파일들은 Views/_ViewStart.cshtml의 내용이 먼저 포함됩니다
보통 이 파일에서는 import를 선언하거나 Layout을 선언하는 등의 종속성과 관련된 내용을 넣습니다
_ViewStart.cshtml파일을 열어보면
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
이렇게 Layout이 지정되어 있는 것을 확인할 수 있습니다
결과적으로, 명시적인 Layout을 제거했을 때 다음과 같이 화면이 구성되어 위와 같은 이상한 화면이 나왔습니다
Index.cshtml, Create.cshtml -> _ViewStart.cshtml -> _Layout.cshtml
'Dev 일반 > ASP.NET Razor' 카테고리의 다른 글
| [ASP.NET Razor] 9. 최종 연습문제 및 마무리 (1) | 2019.05.10 |
|---|---|
| [ASP.NET Razor] 7. Todo 삭제하기 (0) | 2019.05.10 |
| [ASP.NET Razor] 6. Todo 조회화면 만들기 (0) | 2019.05.10 |
| [ASP.NET Razor] 5. Todo 입력화면 만들기 (0) | 2019.05.10 |
| [ASP.NET Razor] 4. 모델 만들기 (0) | 2019.05.09 |