ASP.NET 기초 Razor Pages에서 Partial 사용하

 

partial? 그 어떤 WEB 개발에서도 들어본 적이 없을 것이다. 그럼 이것은 무엇인가?

 

Partial이란 무엇인가?

Partial이란 Razor Pages에서 공통으로 사용되는 HTML 코드를 여러 페이지에서 재사용이 가능하게 도와주는 기능이다. 즉, 공통으로 사용되는 코드를 파일로 저장하고 여러 곳에서 사용하게 가능한 것이다. 이전에 우리는 header와 footer를 재사용하기 위해서 Layout을 만들어서 공유했었다. 그러나 Partial은 이와는 다르다. 어떻게 다른가?

 

파일명: _MyPartial.cshtml

<div>Here's some content from a partial!</div>

 

위와 같은 코드를 파일명 _MyPartial로 만들어서 저장했다고 가정했을 때, 우리는 이를 mainpage에서 사용을 할 수 있게 만들어야한다. 뭐 궂이 mainpage가 아니여도 된다. 여러 곳에서 재사용할 수 있도록 말이다.

 

파일명: MainPage.cshtml

<div>
	<h1>Welcome To Main Page</h1>
    
   	<div>Here's some content from a partial!</div>
</div>

 

기존에 우리는 partial.cshtml에 있는 내용을 재사용하려면 일일이 붙여넣기 했어야 했다. 그러나 Partial을 사용하면 아래와 같이 바뀐다.

 

파일명: MainPage.cshtml

<div>
  <h1>Welcome to My Page!</h1>
  <partial name="_MyPartial"/>
</div>

 

위와 같이 작성해도 Here's some content from a partial이 MainPage에서도 출력된다.

 

그럼 이제 대충 사용법을 알았으니 실제 예제로 가보자

@page
@model MyApp.Namespace.LoginModel
@{
}


<div class="jumbotron">
  <h1 class="display-4">Log in!</h1>
  <p class="lead">Welcome back!</p>
  <hr class="my-4">
  <p>Provide your information below to log in</p>
	<!-- Form partial -->
    <form>
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

 

위와 같은 코드가 있다. 그러나 <form> 태그 안에 있는 내용을 중복해서 재사용하고 싶다면 어떻게 해야할까? 지금까지 배운 Partial을 사용해보자

 

_Form.cshtml이라는 파일을 만들었다고 가정했을 때

  <form>
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

 

<form> 태그 안에 내용을 _Form.cshtml로 저장해준다.

 

@page
@model MyApp.Namespace.LoginModel
@{
}


<div class="jumbotron">
  <h1 class="display-4">Log in!</h1>
  <p class="lead">Welcome back!</p>
  <hr class="my-4">
  <p>Provide your information below to log in</p>
	<!-- Form partial -->
  <partial name="_Form"/>
</div>

 

MainPage.cshtml로 돌아와서 만들어 둔 partial을 위 코드에 <partial name="_Form"/>로 사용하게 되면 아래와 같은 결과를 가질 수 있다.

 

 

즉, 간단하게 말해서 재사용해야하는 코드는 partial 지정해서 사용이 가능하다는 것이 이번 내용이다.