From 95777f6143e0f30d05002a52cb396aef82f67fcf Mon Sep 17 00:00:00 2001
From: syneffort <syneffort@gmail.com>
Date: Fri, 25 Aug 2023 09:32:32 +0900
Subject: [PATCH] javascript interoperability

---
 .../BlazorStateApp/Pages/JSInterop.razor      | 34 +++++++++++++++++++
 BlazorApp/BlazorStateApp/Pages/_Layout.cshtml |  1 +
 BlazorApp/BlazorStateApp/Shared/NavMenu.razor |  5 +++
 BlazorApp/BlazorStateApp/wwwroot/test.js      | 14 ++++++++
 4 files changed, 54 insertions(+)
 create mode 100644 BlazorApp/BlazorStateApp/Pages/JSInterop.razor
 create mode 100644 BlazorApp/BlazorStateApp/wwwroot/test.js

diff --git a/BlazorApp/BlazorStateApp/Pages/JSInterop.razor b/BlazorApp/BlazorStateApp/Pages/JSInterop.razor
new file mode 100644
index 0000000..0faf0fd
--- /dev/null
+++ b/BlazorApp/BlazorStateApp/Pages/JSInterop.razor
@@ -0,0 +1,34 @@
+@page "/jsinterop"
+@inject IJSRuntime _jsRuntime;
+
+<h3>JSInterop</h3>
+
+<div>
+    <button type="button" class="btn btn-primary" @onclick="HelloWorld">
+        Hello World!
+    </button>
+</div>
+
+<br />
+
+<div>
+    <button type="button" class="btn btn-primary" @onclick="InputName">
+        Input Name
+    </button>
+    <p>@_name</p>
+</div>
+
+@code {
+    string _name;
+
+    private async void HelloWorld()
+    {
+        await _jsRuntime.InvokeVoidAsync("testFunction.helloWorld", null);
+    }
+
+    private async void InputName()
+    {
+        _name = await _jsRuntime.InvokeAsync<string>("testFunction.inputName", "Send from Blazor");
+        StateHasChanged();
+    }
+}
diff --git a/BlazorApp/BlazorStateApp/Pages/_Layout.cshtml b/BlazorApp/BlazorStateApp/Pages/_Layout.cshtml
index 61d1235..a5f053b 100644
--- a/BlazorApp/BlazorStateApp/Pages/_Layout.cshtml
+++ b/BlazorApp/BlazorStateApp/Pages/_Layout.cshtml
@@ -28,5 +28,6 @@
     </div>
 
     <script src="_framework/blazor.server.js"></script>
+    <script src="~/test.js"></script>
 </body>
 </html>
diff --git a/BlazorApp/BlazorStateApp/Shared/NavMenu.razor b/BlazorApp/BlazorStateApp/Shared/NavMenu.razor
index 14eb9b9..1380604 100644
--- a/BlazorApp/BlazorStateApp/Shared/NavMenu.razor
+++ b/BlazorApp/BlazorStateApp/Shared/NavMenu.razor
@@ -28,6 +28,11 @@
                 <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
             </NavLink>
         </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="jsinterop">
+                <span class="oi oi-aperture" aria-hidden="true"></span> JSInterop
+            </NavLink>
+        </div>
     </nav>
 </div>
 
diff --git a/BlazorApp/BlazorStateApp/wwwroot/test.js b/BlazorApp/BlazorStateApp/wwwroot/test.js
new file mode 100644
index 0000000..6f9cece
--- /dev/null
+++ b/BlazorApp/BlazorStateApp/wwwroot/test.js
@@ -0,0 +1,14 @@
+
+var func = (function () {
+
+	window.testFunction = {
+		helloWorld: function () {
+			return alert('Hello World');
+		},
+		inputName: function (text) {
+			return prompt(text, 'input name');
+		}
+	}
+});
+
+func();
\ No newline at end of file