[javascript] Toastr와 함께 사용하는 ASP.NET

20 Dec 2023

ASP.NET 프로젝트에서 사용자에게 메시지를 표시하려면 Toastr와 같은 팝업 알림 라이브러리를 사용할 수 있습니다. Toastr는 훌륭한 디자인과 다양한 옵션을 제공하여 사용자에게 시각적인 피드백을 제공하는 데 도움이 됩니다.

Toastr 소개

Toastr는 경량의 팝업 알림 라이브러리로, 사용자에게 메시지를 전달하는 데 사용됩니다. 미리 디자인된 템플릿과 사용하기 편리한 API를 제공하여 웹 애플리케이션에서 사용하기 좋습니다.

먼저, ASP.NET 프로젝트에 Toastr를 설치해야 합니다. NPM 또는 Yarn을 사용하여 Toastr 패키지를 설치할 수 있습니다.

npm install toastr

또는

yarn add toastr

Toastr를 설치한 후에는 toastr.css와 toastr.js 파일을 HTML 페이지에 추가해야 합니다. ASP.NET 프로젝트의 Layout.cshtml 파일을 열고 다음과 같이 Toastr 스타일 및 스크립트 파일을 추가합니다.

<head>
  <link href="/path/to/toastr.css" rel="stylesheet" />
  <script src="/path/to/toastr.js"></script>
</head>

Toastr를 사용하여 ASP.NET 애플리케이션에서 메시지를 표시하려면 JavaScript로 다음과 같이 사용할 수 있습니다.

toastr.success('저장되었습니다.', '성공');

위 예제에서 toastr.success는 성공 메시지를 표시하는 함수이며, 첫 번째 매개변수는 메시지 내용이고 두 번째 매개변수는 제목입니다.

Toastr를 통해 성공, 정보, 경고, 오류 등 다양한 종류의 메시지를 표시할 수 있습니다.

ASP.NET 프로젝트에서 Toastr와 함께 사용하면 사용자에게 시각적인 피드백을 제공하는 데 유용합니다. Toastr의 간단한 설치 및 사용법을 통해 ASP.NET 애플리케이션에서 손쉽게 팝업 알림을 표시할 수 있습니다.