[Web] Blazor에 자바스크립트(JS) 연동

웹 프로그래밍에서 많이 사용되는 자바스크립트를 Blazor에 연동하여 동작할 수 있도록 구현하는 방법을 다룹니다. Blazor C#으로는 구현이 어려운 기능을 자바스크립트로 구현하여 사용할 수 있기에 중요합니다.

· JS파일 생성 및 등록

• 자바스크립트 파일을 생성합니다. wwwroot폴더 하위에 생성합니다.
• test.js라는 이름으로 생성하였습니다.

 

• Pages/_Host.cshtml에서 <script src="test.js"></script>라고 설정하여 test.js 파일을 등록합니다.

 

· JS 작성

var func = (function () {

    window.testFunction = {
        helloWorld: function () {
            return alert("Hello World");
        },
        inputName: function (text) {
            return prompt(text, 'Input Name');
        }
    };

});

func();

• 두개의 함수를 작성합니다.
• helloWorld는 단순히 알림창으로 Hello World를 출력하게 합니다.
• inputName은 입력 다이얼로그를 사용하여 문자열을 입력하도록 합니다.

 

· JS 사용

@page "/JSInterop"
@inject IJSRuntime JSRuntime

<h3>JSInterop</h3>

<div>
	<button type="button" class="btn btn-primary" @onclick="HelloWorld">
		Hello World!
	</button>
</div>

<br />

<div>
	<button type="button" class="btn btn-primary" @onclick="InputName">
		Input Name!
	</button>
	<p>@_name</p>
</div>

@code {

	string? _name;

	public async void HelloWorld()
	{
		await JSRuntime.InvokeVoidAsync("testFunction.helloWorld", null);
	}

	public async void InputName()
	{
		_name = await JSRuntime.InvokeAsync<string>("testFunction.inputName", "이곳에 입력");

		StateHasChanged();
	}

}

• 새로운 페이지를 생성합니다.

 

@inject IJSRuntime JSRuntime

• 자바스크립트를 사용하기위한 기능을 인젝트합니다.

 

public async void HelloWorld()
{
    await JSRuntime.InvokeVoidAsync("testFunction.helloWorld", null);
}

• 리턴타입이 없는 void형 함수를 호출합니다.
• testFunction이라는 이름의 helloWorld라는 함수를 호출합니다. 매개변수가 없기에 null로 합니다.

 

public async void InputName()
{
    _name = await JSRuntime.InvokeAsync<string>("testFunction.inputName", "이곳에 입력");

    StateHasChanged();
}

• 리턴타입이 string인 함수를 호출합니다.
• inputName이라는 함수를 호출합니다. 매개변수 "이곳에 입력"을 전달하면 다이얼로그박스에 이 텍스트가 나타납니다.
• 리턴타입인 string을 _name 멤버변수에 바인딩하여 페이지에 나타나게 합니다.

 

· 결과

• 자바스크립트에 작성한 함수들이 호출되는것을 볼 수 있습니다.