버튼 클릭시 모달 폼 띄우기
Blazor는 C#과 HTML, CSS를 사용하여 웹 애플리케이션을 개발할 수 있는 Microsoft의 프레임워크입니다. Blazor에서는 Razor 구문과 C# 코드를 함께 사용하여 UI와 로직을 작성할 수 있습니다.
이번 강좌에서는 Blazor를 사용하여 버튼 클릭 시 모달 폼을 띄우는 예제를 작성해 보겠습니다. 모달 폼은 ModalForm.razor 컴포넌트를 사용하여 구현하고, 버튼은 ButtonWithModal.razor 컴포넌트를 사용하여 구현할 것입니다.
1. 새 Blazor 프로젝트 생성하기
먼저 Visual Studio를 열고 새 Blazor 프로젝트를 생성합니다.
- Create a new project을 클릭합니다.
- 검색창에 "Blazor"를 입력하고 "Blazor App"을 선택합니다.
- 이름을 "BlazorModalExample"으로 지정하고, Create를 클릭합니다.
- Blazor Server App 템플릿을 선택하고, Create를 클릭합니다.
2. ModalForm 컴포넌트 작성하기
먼저, ModalForm.razor 파일을 생성하고 다음 코드를 작성합니다.
<!-- ModalForm.razor -->
<div class="modal" tabindex="-1" role="dialog" style="display: @(ShowModal ? "block" : "none")">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">@Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" @onclick="CloseModal">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
@ChildContent
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="CloseModal">Close</button>
</div>
</div>
</div>
</div>
@code {
[Parameter]
public RenderFragment ChildContent { get; set; }
[Parameter]
public string Title { get; set; }
[Parameter]
public bool ShowModal { get; set; }
[Parameter]
public EventCallback<bool> ShowModalChanged { get; set; }
private async Task CloseModal()
{
ShowModal = false;
await ShowModalChanged.InvokeAsync(false);
}
}
위 코드에서는 Bootstrap 4를 사용하여 모달 폼을 구현했습니다. ModalForm 컴포넌트는 다음과 같은 파라미터를 가집니다.
- ChildContent: 모달 폼 내부에 표시될 컨텐츠를 포함하는 RenderFragment입니다.
- Title: 모달 폼의 제목입니다.
- ShowModal: 모달 폼을 표시할지 여부를 나타내는 bool 값입니다.
- ShowModalChanged: ShowModal 값이 변경될 때 호출되는 이벤트입니다.
CloseModal 메서드는 모달 폼을 닫을 때 호출됩니다. ShowModal 값을 false로 설정하고, ShowModalChanged 이벤트를 발생시켜 ButtonWithModal 컴포넌트에서 ShowModal 값을 업데이트할 수 있도록 합니다.
3. ButtonWithModal 컴포넌트 작성하기
이제 ButtonWithModal.razor 파일을 생성하고 다음 코드를 작성합니다.
<!-- ButtonWithModal.razor -->
<button class="btn btn-primary" @onclick="() => ShowModal = true">Open Modal</button>
<ModalForm Title="My Modal" ShowModal="@ShowModal" ShowModalChanged="(value) => ShowModal = value">
<p>This is the content of the modal.</p>
</ModalForm>
@code {
private bool ShowModal = false;
}
위 코드에서는 Bootstrap 4의 버튼 스타일을 사용하여 버튼을 구현했습니다. 버튼을 클릭하면 ShowModal 값을 true로 설정하여 모달 폼을 표시합니다. ModalForm 컴포넌트를 사용하여 모달 폼을 구현하고, ShowModal 값을 전달하여 모달 폼의 표시 여부를 제어합니다.
ModalForm 컴포넌트는 Title과 ShowModal, ShowModalChanged 파라미터를 받아와 모달 폼을 표시하고 제어합니다. ChildContent 파라미터에는 모달 폼 내부에 표시될 컨텐츠를 작성합니다. 이 예제에서는 간단한 문장을 사용하여 모달 폼 내용을 표시했습니다.
4. ButtonWithModal 컴포넌트 사용하기
이제 ButtonWithModal 컴포넌트를 사용하는 페이지에서 ButtonWithModal 컴포넌트를 출력합니다. 이 예제에서는 Index.razor 페이지에서 ButtonWithModal 컴포넌트를 출력합니다.
<!-- Index.razor -->
@page "/"
<h1>Hello, Blazor!</h1>
<ButtonWithModal />
위 코드에서는 ButtonWithModal 컴포넌트를 Index.razor 페이지에서 사용합니다. 이제 브라우저에서 http://localhost:5000으로 접속하여 버튼을 클릭해 보면 모달 폼이 표시되는 것을 확인할 수 있습니다.
5. 세로 스크롤바 추가하기
만약 모달 폼의 내용이 세로 길이가 200px 이상이 되면 세로 스크롤바를 추가하고 싶다면, ModalForm.razor 파일에서 모달 내부에 스크롤 가능한 div 요소를 추가하면 됩니다. 다음과 같이 코드를 수정해주세요.
<!-- ModalForm.razor -->
<div class="modal" tabindex="-1" role="dialog" style="display: @(ShowModal ? "block" : "none")">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">@Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" @onclick="CloseModal">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="max-height: 200px; overflow-y: auto;">
@ChildContent
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="CloseModal">Close</button>
</div>
</div>
</div>
</div>
위 코드에서는 max-height 속성을 사용하여 모달 내부의 최대 높이를 200px로 제한하고, overflow-y 속성을 사용하여 세로 스크롤바를 추가합니다.
이제 브라우저에서 http://localhost:5000으로 접속하여 버튼을 클릭하고 모달 폼이 표시되면, 모달 내용이 200px 이상일 때 세로 스크롤바가 표시되는 것을 확인할 수 있습니다.