ํด๊ฒฐ์ฑ
์ ๋งจ ๋ง์ง๋ง์ ๋์์์ต๋๋ค.
์ํ์ฐฉ์ค๋ฅผ ๊ฒช์ผ๋ฉด์ ์ฐพ์๋ณธ ๋ฌธ์
๋ฌธ์์์ ๋์จ๋๋ก ๋ฐ๋ผํ๋ฉด ์ ๋๋ก ๋์ง ์์ต๋๋ค. github์๋ ๋ฒ๊ทธ๋ก ๊ธฐ๋ก๋์ด Merge๋ ๊ฒ์ผ๋ก ๋ณด์ MS๊ณต์๋ฌธ์์ด์ง๋ง ์ ๋ขฐํ ์๋ ์๋๋ฏ ํ๋ค์โฆhttps://github.com/dotnet/AspNetCore.Docs/issues/28044
MS๊ถ์ฅ๋ฐฉ๋ฒ1 : _Layout.cshtml์์ blazor.server.js ๋ก๋ฉ ์ดํ์ import
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"></script>
<script src="{SCRIPT PATH AND FILE NAME (.js)}"></script>
</body>
์ ์ฉ ๊ฒฐ๊ณผ(์คํจ)
@using Microsoft.AspNetCore.Components.Web
@namespace BlazorApp1.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" type="image/png" href="assets/images/logos/favicon.png" />
<link rel="stylesheet" href="assets/css/styles.min.css" />
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
@RenderBody()
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">๐</a>
</div>
<!-- Default -->
<script src="_framework/blazor.server.js"></script>
<!-- External js -->
<!-- ============================================================== -->
<script src="assets/libs/jquery/dist/jquery.min.js"></script>
<script src="assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/sidebarmenu.js"></script>
<script src="assets/js/app.min.js"></script>
<script src="assets/libs/apexcharts/dist/apexcharts.min.js"></script>
<script src="assets/libs/simplebar/dist/simplebar.js"></script>
<script src="assets/js/dashboard.js"></script>
</body>
</html>
MS๊ถ์ฅ๋ฐฉ๋ฒ2 : _Layout.cshtml์์ blazor.server.js ๋ก๋ฉํ ๋ autostart ์์ฑ์ false๋ก ๋ฐ๊พธ๊ณ , ๋ณ๋์ JSํจ์๋ก Blazor Start ์ดํ document์ script๋ฅผ ๋ก๋ํ๋ค.
<body>
...
<script src="_framework/blazor.{webassembly|server}.js"
autostart="false"></script>
<script>
Blazor.start().then(function () {
var customScript = document.createElement('script');
customScript.setAttribute('src', 'scripts.js');
document.head.appendChild(customScript);
});
</script>
</body>
์ ์ฉ๊ฒฐ๊ณผ (์๋์ ๊ฐ์ด ์ด์ฌํ ์ฝ์งํ์ฌ ํ๋์ฝ๋ฉํ์ผ๋ ๋ ์คํจ)
@using Microsoft.AspNetCore.Components.Web
@namespace BlazorApp1.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" type="image/png" href="assets/images/logos/favicon.png" />
<link rel="stylesheet" href="assets/css/styles.min.css" />
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
@RenderBody()
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">๐</a>
</div>
<!-- Default -->
<script src="_framework/blazor.server.js" autostart="false"></script>
<!-- External js -->
<script>
Blazor.start().then(function () {
var customScript1 = document.createElement('script');
customScript1.setAttribute('src', 'assets/libs/jquery/dist/jquery.min.js'); document.head.appendChild(customScript1);
var customScript2 = document.createElement('script');
customScript2.setAttribute('src', 'assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js'); document.head.appendChild(customScript2);
var customScript3 = document.createElement('script');
customScript3.setAttribute('src', 'assets/js/sidebarmenu.js'); document.head.appendChild(customScript3);
var customScript4 = document.createElement('script');
customScript4.setAttribute('src', 'assets/js/app.min.js'); document.head.appendChild(customScript4);
var customScript5 = document.createElement('script');
customScript5.setAttribute('src', 'assets/libs/apexcharts/dist/apexcharts.min.js'); document.head.appendChild(customScript5);
var customScript6 = document.createElement('script');
customScript6.setAttribute('src', 'assets/libs/simplebar/dist/simplebar.js'); document.head.appendChild(customScript6);
var customScript7 = document.createElement('script');
customScript7.setAttribute('src', 'assets/js/dashboard.js'); document.head.appendChild(customScript7);
});
</script>
*@
</body>
</html>
์ํ์ฐฉ์ค3) blazor.server.js๊ฐ ๋ก๋ฉ๋๊ธฐ ์ด์ ์ ํธ์ถ๋๋๋ก ์์๋ฅผ ๋ฐ๊พผ๋ค โ ์คํจ
๊ณต์๋ฌธ์์์๋ ๋ฐ๋์ blazor.server.js๋ฅผ ํธ์ถํ ๋ค์ ์ธ๋ถ Javascript๋ฅผ ๋ถ๋ฌ์ค๋ผ๊ณ ๋์ด์์ผ๋, ์๋ฉ๋๋ค.
github์ bug๋ก ๊ธฐ๋ก๋์ด 1์์ ๊ณ ์ณ์ง ๊ฒ์ผ๋ก ๋ณด์ด๋ฉฐ, ๊ทธ ํด๊ฒฐ์ฑ ์ผ๋ก๋ ํธ์ถ์์๋ฅผ ๋ฐ๊พธ๋ผ๊ณ ๋์ด์์ผ๋ ๊ทธ๋ ๊ฒ ํด๋ ์๋ฉ๋๋ค.
์ง๊ธ๋ถํฐ ํด๊ฒฐ์ฑ
์ ์ค๋ช
ํฉ๋๋ค.
๊ฐ์ฅ ๋จผ์ , Blazor ํ์ด์ง์ ์๋จ์ IJSRuntime์ DIํฉ๋๋ค.
@page "/test"
@inject IJSRuntime JS
๊ทธ๋ฐ ๋ค์ ํ์ด์ง์ ์ฝ๋ ๋ถ๋ถ์ OnAfterRenderAsync ๋ฉ์๋๋ฅผ overrideํ์ฌ JSRuntime์ ์ฌ์ฉํด์ Importํ๋ ๊ฒ์ ๋๋ค. ํ์ํ Javascript ํ์ผ์ ๊ฐ๊ฐ importํ๋ ์ฝ๋๋ฅผ ์์ฑํ๋ฉด ๋ฉ๋๋ค.
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeAsync<IJSObjectReference>("import", "./assets/libs/jquery/dist/jquery.min.js");
await JS.InvokeAsync<IJSObjectReference>("import", "./assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js");
await JS.InvokeAsync<IJSObjectReference>("import", "./assets/js/sidebarmenu.js");
await JS.InvokeAsync<IJSObjectReference>("import", "./assets/js/app.min.js");
await JS.InvokeAsync<IJSObjectReference>("import", "./assets/libs/apexcharts/dist/apexcharts.min.js");
await JS.InvokeAsync<IJSObjectReference>("import", "./assets/libs/simplebar/dist/simplebar.js");
await JS.InvokeAsync<IJSObjectReference>("import", "./assets/js/dashboard.js");
}
}
}
์ด ๋ฐฉ๋ฒ์ Blazor์์ Javascript์ ์ํธ์์ฉ(Interaction)ํ ๋๋ ๋ง์ฐฌ๊ฐ์ง๋ก ์ธ ์ ์์ต๋๋ค.
ํด๊ฒฐ์ฑ ์ด ๋์์๋ ๋งํฌ
https://code-maze.com/how-to-call-javascript-code-from-net-blazor-webassembly/
(ํด๊ฒฐ์ฑ
๋ง ์ฐพ์๋คํ๋ฉด ๋ง์ ํ๋๊บผ๋ค์โฆ)