[Blazor] JavaScript 연동

Blazor 앱은 .NET 메서드에서 JavaScript함수를 호출하고, JavaScript함수에서 .NET메서드를 호출할 수 있다.

이것을 JavaScript interop이라고 한다. 

 

Blazor의 .NET 메서드에서 JavaScript 함수 호출

1. index.html body 태그안에 script를 추가한다. 

    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script>
        window.showAlert = (comment) => {
            alert(comment);
        };
    </script>

2. index.razor에서 버튼을 클릭하면 showAlert 함수를 호출하도록 한다.

• .NET에서 JS를 호출하려면 IJSRuntime 추상화를 삽입하고 InvokeVoidAsync 함수를 호출한다.

@page "/"
@inject IJSRuntime JS

<h1>Hello, world!</h1>

Welcome to your new app.


<p>
		<button @onclick="ShowAlert">알림창 띄우기</button>
</p>

<SurveyPrompt Title="How is Blazor working for you?" />

@code {
		private async Task ShowAlert()
		{
				await JS.InvokeVoidAsync("showAlert", "Hello, world!");
		}
}

3. 알림창 띄우기 버튼을 클릭하면 alert 을 확인할 수 있다. 

showAlert 자바스크립트 함수를 index.html에서 별도의 파일로 옮겨보자. => JS isolation

1. wwwroot/js/script.js 에 아래 함수 저장

export function showAlert(comment) {
    alert(comment);
}

2. index.razor 수정

IJSInProcessObjectReference는 함수를 동기적으로 호출할 수 있는 JS 개체에 대한 참조를 나타냅니다.

@page "/"
@inject IJSRuntime JS

<h1>Hello, world!</h1>

Welcome to your new app.


<p>
		<button @onclick="ShowAlert">알림창 띄우기</button>
</p>

<SurveyPrompt Title="How is Blazor working for you?" />

@code {

		private IJSObjectReference module;

		protected override async Task OnAfterRenderAsync(bool firstRender)
		{
				if (firstRender)
				{
						module = await JS.InvokeAsync<IJSObjectReference>("import",
								"./js/scripts.js");
				}
		}

		private async Task ShowAlert()
		{
				await module.InvokeVoidAsync("showAlert", "Hello, world!");
		}
}

3. 알림창 띄우기 버튼을 클릭하면 alert 을 확인할 수 있다. 

 

 

ref : https://bigexecution.tistory.com/49