javascript interoperability

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();
+    }
+}

BlazorApp/BlazorStateApp/Pages/_Layout.cshtml

@@ -28,5 +28,6 @@
     </div>
 
     <script src="_framework/blazor.server.js"></script>
+    <script src="~/test.js"></script>
 </body>
 </html>

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>
 

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();