C# Blazor 에서 js 파일 추가하여 js 파일 내 함수 호출하는 방법

C# Blazor 에서 js 파일 추가하여 js 파일 내 함수 호출하는 방법

 

1. JavaScript 파일 추가

Blazor 프로젝트의 wwwroot 폴더 안에 JavaScript 파일을 추가합니다. 예를 들어, example.js라는 이름으로 JS 파일을 만듭니다.

window.exampleFunctions = {
    showAlert: function (message) {
        alert(message);
    }
};

 

2. JavaScript 파일 참조

_Host.cshtml (Blazor Server) 또는 index.html (Blazor WebAssembly) 파일에서 생성한 JavaScript 파일을 참조합니다.

<script src="example.js"></script>

 

3. JavaScript 함수 호출

Blazor 컴포넌트 내에서 IJSRuntime 인터페이스를 사용하여 JavaScript 함수를 호출할 수 있습니다.

Example.razor 예시

@inject IJSRuntime JSRuntime

<button @onclick="CallJavaScript">Call JavaScript Function</button>

@code {
    private async Task CallJavaScript()
    {
        await JSRuntime.InvokeVoidAsync("exampleFunctions.showAlert", "Hello from Blazor!");
    }
}

 

이 예제에서 CallJavaScript 메서드는 버튼 클릭 이벤트에 바인딩되어 있으며, 클릭 시 exampleFunctions.showAlert JavaScript 함수를 호출합니다.

이 함수는 인자로 "Hello from Blazor!" 문자열을 받아 alert 메세지를 표시합니다.