VO7E
A
익명님이 2022-08-01에 작성

Blazor C#에서 자바스크립트 함수를 실행하는 방법

Blazor,ASP.NET,.NET,.NET6,C#,javascript
블레이저로 프로그래밍을 할 때 에는 기본적으로 모든 프론트 엔드 동작을 C#으로 대체할 수 있습니다. 이는 개발자에게 있어서 굉장히 큰 장점인데요

그래도 모든 코드들을 C#으로 대체할 수 는 없습니다. 어떻게 하면 Blazor에서 처리를 할 수 있는 지를 살펴 보면.... 매우 간단합니다! IJS runtime 확장만 추가한 다음 InvokeVoidAsync를 통해 함수를 불러 올 수 있습니다. .razor 페이지 상단에 @inject IJSRuntime JSRuntime 를 추가해 주세요. 기본적으로 지원하기 때문에 굳이 nuget에서 설치할 필요는 없습니다. 그런 다음 자바스크립트에 실행할 보이드 형태의 함수를 async로 만들어 주시고 이름을 복사해 둡니다. 마지막으로 C#에서 invokevoidasync 코드로 해당 파일을 불러오면 끝! 그리고 왠만하면 자바스크립트 함수를 불러오는 것은 onafterrenderasync 에서 처리하셔야 합니다. Blazor의 수명 구성 요소 주기 특성상 모든 렌더링이 다 된다음에 인보크를 불러오지 않으면 에러가 발생하기 때문입니다. 페이지 로드 시 한번만 불러 오려고 하신다면 firstrender 변수로 if 문을 작성해 주시면 됩니다. 더욱 자세한 사항은 ASP.NET Blazor 공식 문서를 확인해 주세요. 함수안에 데이터를 넣는 방법은 ASP.NET 공식 문서를 확인해 주세요.

https://docs.microsoft.com/ko-kr/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-6.0blazor에서 원하는 자바스크립트 함수를 불러오는 방법 안내 이미지blazor에서 원하는 자바스크립트 함수를 불러오는 방법 안내 이미지

@inject IJSRuntime JSRuntime ~ protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await JSRuntime.InvokeVoidAsync("CallPage"); } } ~~ js 파일 또는 script 안 async function CallPage() { console.log("페이지 로딩"); }

Total 2

좋은프로그래밍정보!

댓글
Drag and drop files here or click
A
익명
2022-08-01에 작성

데이터를 전달 하려면 void 가 빠진 async를 사용하셔야 합니다!

A
익명
2022-08-01에 작성

A
익명
2022-08-01에 작성

vue나 리액트에서 rest api통신 하는것처럼 blazor 프론트단에서는 어떻게 api통신을 하는지 간단하게 알려주시면안될까요 ㅜㅜ

A
익명
2022-08-06에 작성

윗 분께서 말씀 주신 부분은 블레이저 서버에서는 사용할 필요 가 없습니다. 왜냐하면 바로 데이터 베이스에서 C#을 통해 불러 올수 있기 때문이에요~ REST API 로 데이터를 불러오는 것은 blazor webassembly 입니다 ㅠㅠ

A
익명
2022-08-06에 작성

만약 다른 곳에서 REST api로 데이터를 가져오시려고 한다면 블레이저 서버에서도 getfromjsonasync로 가져올 수 있습니다.

익명님, 안녕하세요!

로그인 하시면 작성된 글을 수정할 수 있습니다.

VO7E Recent Post

작성된 최신글을 확인하세요!

사이트 TIP

This site made with Mudblazor!

An error has occurred. This application may no longer respond until reloaded. Reload 🗙