[ASP.NET CORE/MVC ] #11 VIEW파일 분할해서 보여주기(Partial)

[ASP.NET/MVC CORE] #11 VIEW파일 분할해서 보여주기(Partial)

안녕하세요 미나라이입니다.

 

이번에는 ASP.NET CORE MVC Web에서 VIEW파일을 분할해주는 기능인 Partial에 대해서 포스팅 해보려고 합니다.

프로젝트 환경

OS : Windows 10

IDE : Visual Studio Code 1.62.2

.Net SDK : 5.0.403

.Net Runtime : .NetCore.App 5.0.10 / 5.0.12

 

Partial은 어떠한 경우에 자주 쓰는가 하면 같은 페이지에서 탭을 사용해서 내용만 변경해주고 싶을 때 사용 됩니다.

내용이 적으면 한 페이지만으로 끝내도 되지만 내용이 길어지면 나중에 코드 관리가 매우 힘들어집니다.

이번 프로젝트를 진행하면서 활용 할 기회가 있어서 한번 간단하게 정리를 해 보았습니다.

 

탭나누기는 부트스트랩의 NAV 기능을 이용했습니다.

부트스트랩도 해당 버전의 ASP.NET MVC프로젝트를 생성하면 Bootstrap 4가 자동으로 정의됩니다.

Navs

VIEW페이지

Index.cshtml

내용을 추가하고 싶은 부분에 <Partial name="CSHTML파일경로">를 적어주면 됩니다.

경로 맨 앞에 "~" 는 루트 경로를 가리킵니다.

<!-- 필수 라이브러리 -->
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>


<div class="container">
    <!-- 탭 부분 -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
        </li>
    </ul>

	<!-- 내용 부분 -->
    <div class="tab-content">
        <div id="home" class="container tab-pane active"><br>
            <h3>HOME Page</h3>
        </div>
        <div id="menu1" class="container tab-pane fade"><br>
            <!-- 분할 페이지 1 -->
            <partial name="~/Views/Home/menu1.cshtml" />
        </div>
        <div id="menu2" class="container tab-pane fade"><br>
            <!-- 분할 페이지 2 -->
            <partial name="~/Views/Home/menu2.cshtml" />
        </div>
    </div>
</div>

menu1.cshtml

<h3>Menu 1 Page</h3>

menu2.cshtml

<h3>Menu 2 Page</h3>

 

화면 출력

HOME메뉴일 때

Menu1을 선택 했을 때

디버깅 툴로 보면 컴파일 이후에는 하나의 페이지로 소스가 합쳐져 있는 것을 확인 할 수 있습니다.

샘플 프로젝트를 첨부 합니다.

TestProject_partial.zip

1.21MB

 

이상으로 간단하게 VIEW페이지 내용 분할하는 방법에 대해 알아보았습니다.