이전

다음

Razor 클래스 라이브러리 만들기

완료됨

이 연습에서는 기본 Blazor 템플릿 애플리케이션에서 재사용할 수 있는 Razor 클래스 라이브러리의 모달 대화 상자를 만듭니다.

Razor 클래스 라이브러리 프로젝트 만들기

이 모듈에서는 .NET 6.0 SDK를 사용합니다. 기본 설정 터미널에서 다음 명령을 실행하여 .NET 6.0이 설치되어 있는지 확인합니다.

dotnet --list-sdks

그러면 다음과 같은 출력이 표시됩니다.

3.1.100 [C:\program files\dotnet\sdk]
5.0.100 [C:\program files\dotnet\sdk]
6.0.100 [C:\program files\dotnet\sdk]

6으로 시작하는 버전이 나열되어 있는지 확인합니다. 나열되는 버전이 없거나 명령을 찾을 수 없는 경우 최신 .NET 6.0 SDK를 설치합니다.

먼저 모달 대화 상자 구성 요소에 대한 Razor 클래스 라이브러리 프로젝트를 만듭니다. Visual Studio를 사용하여 새 프로젝트를 만들거나 다음과 같이 .NET 명령줄 도구를 사용하여 새 폴더에 프로젝트를 만들 수 있습니다.

dotnet new razorclasslib -o FirstClassLibrary -f net8.0

모달 대화 상자 구성 요소 빌드

다음으로, 적절한 CSS 파일을 사용하여 프로젝트에서 모달 구성 요소를 빌드하고 초기 형식을 제공합니다.

1. Component1.razor 파일의 이름을 Modal.razor로 바꾸고 Component1.razor.css 파일의 이름을 Modal.razor.css로 바꿉니다. Modal.razor 파일에는 만들 구성 요소가 포함되어 있으며 나중에 프로젝트에 빈 텍스트 파일을 추가하고 Razor 또는 CSS용 콘텐츠로 적절하게 서식을 지정할 수 있습니다.

2. Modal.razor 파일에 다음 Razor 콘텐츠를 추가합니다.

   @if (Show) {
   
    <div class="dialog-container">
     <div class="dialog">
      <div class="dialog-title">
       <h2>@Title</h2>
      </div>
   
      <div class="dialog-body">
       @ChildContent
      </div>
   
      <div class="dialog-buttons">
       <button class="btn btn-secondary mr-auto" @onclick="OnCancel">@CancelText</button>
       <button class="btn btn-success ml-auto" @onclick="OnConfirm">@ConfirmText</button>
      </div>
   
     </div>
    </div>
   
   }
   
   @code {
   
    [Parameter]
    public string Title { get; set; }
   
    [Parameter]
    public string CancelText { get; set; } = "Cancel";
   
    [Parameter]
    public string ConfirmText { get; set; } = "Ok";
   
    [Parameter]
    public RenderFragment ChildContent { get; set; }
   
    [Parameter]
    public bool Show { get; set; }
   
   
    [Parameter] public EventCallback OnCancel { get; set; }
    [Parameter] public EventCallback OnConfirm { get; set; }
   
   }
   

   이 구성 요소에는 프로젝트 간에 공유할 수 있는 몇 가지 멋진 기능이 있습니다.

   • 제목.
   • 취소 및 확인 단추(레이블을 구성할 수 있고 클릭 이벤트를 관리할 수 있음).
   • ChildContent 매개 변수를 통해 구성 요소의 내부 콘텐츠를 설정할 수 있습니다.
   • Show 매개 변수를 사용하여 대화 상자의 표시 상태를 제어할 수 있습니다.

3. 구성 요소에 대한 기본 서식을 제공하려면 다음 CSS를 Modal.razor.css 파일에 추가합니다.

   .dialog-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2000;
    display: flex;
    animation: dialog-container-entry 0.2s;
   }
   
   @keyframes dialog-container-entry {
    0% {
      opacity: 0;
    }
   
    100% {
      opacity: 1;
    }
   }
   
   .dialog {
    background-color: white;
    box-shadow: 0 0 12px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    z-index: 2000;
    align-self: center;
    margin: auto;
    width: 700px;
    max-height: calc(100% - 3rem);
    animation: dialog-entry 0.4s;
    animation-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
   }
   
   @keyframes dialog-entry {
    0% {
      transform: translateY(30px) scale(0.95);
    }
   
    100% {
      transform: translateX(0px) scale(1.0);
    }
   }
   
   .dialog-title {
    background-color: #444;
    color: #fff2cc;
    padding: 1.3rem 0.5rem;
   }
   
    .dialog-title h2 {
      color: white;
      font-size: 1.4rem;
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.3rem;
    }
   
   .dialog-body {
    flex-grow: 1;
    padding: 0.5rem 3rem 1rem 0.5rem;
   }
   
   .dialog-buttons {
    height: 4rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    background-color: #eee;
    padding: 0 1rem;
   }
   

이 태그는 아래쪽의 제목 표시줄 및 단추 표시줄에 몇 가지 기본 색 지정을 제공하므로 단순한 회색 HTML 요소 집합보다 더 흥미롭습니다.

모달 구성 요소 참조 및 사용

FirstClassLibrary 프로젝트에 있는 모달 구성 요소를 사용하여 새 Blazor Server 애플리케이션을 추가하고 모달 구성 요소 사용을 시작합니다.

1. Visual Studio 새 프로젝트 추가 기능을 사용하거나 다음 명령을 실행하여 FirstClassLibrary 프로젝트 옆에 있는 폴더에 MyBlazorApp이라는 새 Blazor 서버 프로젝트를 만듭니다.

   dotnet new blazor -o MyBlazorApp -f net8.0
   

2. MyBlazorApp 프로젝트에서 Visual Studio 참조 추가 기능을 사용하거나 MyBlazorServer 폴더에서 다음 명령을 실행하여 FirstClassLibrary 프로젝트에 대한 참조를 추가합니다.

   dotnet add reference ../FirstClassLibrary
   

이 프로젝트 참조를 사용하면 MyBlazorApp 애플리케이션이 FirstClassLibrary 프로젝트의 구성 요소와 상호 작용할 수 있습니다.

1. MyBlazorApp 애플리케이션의 Components 폴더에 있는 _Imports.razor 파일의 끝에 항목을 추가하여 모달 구성 요소를 더 쉽게 참조할 수 있도록 합니다. 이렇게 하면 구성 요소의 전체 네임스페이스를 지정하지 않고도 모달 구성 요소를 참조할 수 있습니다.

   @using FirstClassLibrary
   

2. 이 애플리케이션의 오프닝 페이지인 Components/Pages/Home.razor 파일에 모달 구성 요소 추가

   <Modal Title="My first Modal dialog" Show="true">
    <p>
      This is my first modal dialog
    </p>
   </Modal>
   

   a. 구성 요소에 "My first Modal dialog"라는 제목을 지정합니다.
   b. 대화 상자 안에 표시할 짧은 단락을 추가합니다. 이 내용은 대화 상자의 목적을 설명합니다.
   c. Show 매개 변수를 사용하여 대화 상자를 표시하도록 설정합니다.

작업 확인

MyBlazorApp 애플리케이션을 dotnet run 시작하고 브라우저에서 탐색합니다. My first Modal dialog 대화 상자가 화면의 나머지 콘텐츠 위에 표시됩니다.

계속