개발꿈나무
[Blazor] Blazor에서 JavaScript 사용하기 (div.empty() 작업) 본문
반응형
Blazor에서 프로젝트를 진행하던 중 div를 비워야 하는 상황이 발생했다.
구글을 엄청 뒤져봤는데, blazor에서 div의 content를 바로 지우는 방법을 찾지 못했다.
그래서 JavaScript를 사용하기로 했다.
JS 코드 작성
따로 .js파일을 만들어도 되지만, 나는 귀찮았기 때문에
blazor defailt 파일인 _Host.cshtml에 js코드를 작성했다.
js 코드는 무조건 <body> 태그 안에 작성해야 한다.
<body>
<script>
function EmptyId(div_name) {
var content = document.getElementById(div_name);
if (content.innerHTML != "")
{
content.innerHTML = "";
}
};
</script>
</body>div_name이라는 매개변수를 가지는 EmptyId라는 function을 만들었다.
div_name을 통해 div를 가져와서
div의 innerHTML을 비우는 함수이다.
JS 코드 호출
나는 razor 파일의 @code 부분에서 js 함수를 호출했다.
호출하는 방법은 다음과 같다.
@inject IJSRuntime JSRuntime
@code{
protected async void CallJSMethod()
{
await JSRuntime.InvokeVoidAsync("EmptyId", "tabdiv_name");
}
}IJSRuntime을 inject 한 후
await.JSRuntime.InvokeVoidAsync("함수명", 매개변수) 형식으로 호출한다.
return 값이 없는 경우 InvokeVoidAsync 메소드를 사용하면 되지만,
return 값이 있는 경우 InvokeAsync<return type> 메소드를 사용해야 한다.
await JSRuntime.InvokeAsync<string>("EmptyId", "tabdiv_name");반응형
'C# > Blazor' 카테고리의 다른 글
| [Blazor] Page 간 데이터 전송 (service 이용) (0) | 2022.01.04 |
|---|---|
| [Blazor] HTML Tag Encoding (0) | 2021.12.09 |
| [Blazor] XML Node 읽기 - XmlNodeType별로 출력하기 (0) | 2021.10.22 |
| [Blazor] server에 있는 파일 다운로드 받기 - BlazorDownloadFile (1) | 2021.10.22 |
| [Blazor] NuGet Package 설치하기 (0) | 2021.10.21 |
'C#/Blazor' Related Articles
more
Comments