1. 자바스크립트 파일 작성
// wwwroot/scripts/cctv.js
window.test = () => {
console.log("test function is running!" );
}
//변수가 있는 경우
//window.test = (name) => {
// console.log("your name is: " + name);
//}
2. js 파일 적용
// wwwroot/index.html 파일
<body>
<div id="app">
<svg class="loading-progress">
<circle r="40%" cx="50%" cy="50%" />
<circle r="40%" cx="50%" cy="50%" />
</svg>
<div class="loading-progress-text"></div>
</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="scripts/cctv.js"></script> //js 파일 추가
<script src="_framework/blazor.webassembly.js"></script>
</body>참고
기존 Blazor Assembly App의 경우, blazor.webassembly.js와 커스텀 js 파일의 순서를 반대로 해도 상관 없었다.
하지만 Standalone App의 경우, 커스텀앱이 blazor.webassembly.js 뒤에 오면 함수를 찾을 수 없다는 에러가 뜬다.
3. Page에 적용
// Page/Cctv.razor
protected override async Task OnInitializedAsync(){
await JsRuntime.InvokeVoidAsync("test");
// 변수가 있는 경우
// await JsRuntime.InvokeVoidAsync("test", "삽사");
}
// 또는
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JsRuntime.InvokeVoidAsync("test");
// 변수가 있는 경우
// await JsRuntime.InvokeVoidAsync("test", "삽사");
}
}
4. 잘 되는지 확인
프로젝트 실행 시키고, 개발자 도구 연 다음에 콘솔에 텍스트가 찍히는지 확인
'C# > C# FullStack' 카테고리의 다른 글
| [ASP.NET core]The system cannot find the file specified. File name: '[모듈이름], Culture=neutral, PublicKeyToken=null (0) | 2024.05.28 |
|---|---|
| ASP.NET Core API Ubuntu 배포 (1) | 2024.05.24 |
| [ASP.NET Core Web API] PUT기능 구현 (0) | 2024.04.18 |
| [Blazor] 간단한 웹 예제 따라하기 (0) | 2023.12.29 |
| 미니멀 API 만들기 (0) | 2023.08.10 |
