[Blazor] JSRuntime - 새로운 탭에서 razor 파일 열기

Blazor에서 페이지 이동은 NavManager를 사용한다.

NavManager의 NavigateTo 메소드를 사용하면 원하는 페이지로 이동할 수 있다.

아래의 코드는 dcn_no라는 데이터를 파라미터로 해서 dcnlist/dcn_no 페이지로 이동하겠다는 것이다.

NavManager.NavigateTo("/dcnlist/" + dcn_no);

 

여기서 페이지 이동은 현재의 탭에서 다른 페이지로 이동하는 것이다.

나는 새로운 페이지에서 또다른 razor 파일을 열기를 원했다.

찾아보니 JSRuntime을 사용하면 된다고 한다.

 

JSRuntime은 JavaScript 함수로 .NET 메소드에소 JS함수를 호출하는 방법은

아래의 문서에 잘 설명되어 있다.

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

 

 

결과코드를 살펴보자.

@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime

@code
{
	private async Task XMLPage_Load(string dcn_no)
    {
        string url = "/dcnlist/xml/" + dcn_no;
        await JSRuntime.InvokeAsync<IJSObjectReference>("open", url, "_blank");
    }
}

JSRuntime을 사용하기 위한 세팅을 해주고,

다음과 같이 코드를 작성하면 새로운 탭에서 /dcnlist/xml/dcn_no 페이지가 열린다.