Migrated old jQuery Tic-Tac-Toe App to run on a Razor Page

- https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript?view=aspnetcore-7.0
JosephWee · Apr 23, 2023 · 240aaa8 · 240aaa8
1 parent 4a504da
commit 240aaa8
Show file tree

Hide file tree

Showing 10 changed files with 748 additions and 16 deletions.
diff --git a/BlazorServerApp/BlazorServerApp.csproj b/BlazorServerApp/BlazorServerApp.csproj
@@ -13,6 +13,11 @@
     <None Remove="Blazor\**" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Compile Remove="Data\WeatherForecast.cs" />
+    <Compile Remove="Data\WeatherForecastService.cs" />
+  </ItemGroup>
+
   <ItemGroup>
     <ProjectReference Include="..\TicTacToe.Distribution\TicTacToe.Distribution.csproj" />
   </ItemGroup>

diff --git a/BlazorServerApp/Data/TicTacToeService.cs b/BlazorServerApp/Data/TicTacToeService.cs
@@ -15,9 +15,9 @@ public TicTacToeService(IConfiguration config)
             _config = config;
         }
 
-        public Task<string> GetTimestampAsync()
+        public string GetTimestamp()
         {
-            return Task.FromResult(DateTime.UtcNow.ToString("O"));
+            return DateTime.UtcNow.ToString("O");
         }
 
         public TicTacToeUpdateResponse UpdateTicTacToe(TicTacToeUpdateRequest request)

diff --git a/BlazorServerApp/Pages/Shared/_Layout.cshtml b/BlazorServerApp/Pages/Shared/_Layout.cshtml
@@ -10,6 +10,13 @@
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
     <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
     <link rel="stylesheet" href="~/BlazorServerApp.styles.css" asp-append-version="true" />
+
+    <script src="~/lib/jquery/dist/jquery.min.js"></script>
+    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="~/js/site.js" asp-append-version="true"></script>
+    <script src="~/_framework/blazor.server.js"></script>
+    @await RenderSectionAsync("Scripts", required: false)
+
     <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
     <title>@ViewData["Title"]</title>
 </head>
@@ -31,7 +38,10 @@
                             <a class="nav-link text-dark" href="/Test">Test</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link text-dark" href="/TicTacToe">Tic-Tac-Toe</a>
+                            <a class="nav-link text-dark" href="/TicTacToeRz">Tic-Tac-Toe (Razor)</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link text-dark" href="/TicTacToeJq">Tic-Tac-Toe (jQuery)</a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
@@ -52,12 +62,5 @@
             &copy; 2023 - BlazorServerApp - <a asp-area="" asp-page="/Privacy">Privacy</a>
         </div>
     </footer>
-
-    <script src="~/lib/jquery/dist/jquery.min.js"></script>
-    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="~/js/site.js" asp-append-version="true"></script>
-    <script src="~/_framework/blazor.server.js"></script>
-
-    @await RenderSectionAsync("Scripts", required: false)
 </body>
 </html>
diff --git a/BlazorServerApp/Pages/TicTacToeJq.cshtml b/BlazorServerApp/Pages/TicTacToeJq.cshtml
@@ -0,0 +1,54 @@
+@page
+@model TicTacToeJqModel
+@{
+    ViewData["Title"] = "Tic-Tac-Toe (jQuery)";
+}
+@using Microsoft.JSInterop
+
+<link rel="stylesheet" href="~/Tic-Tac-Toe/css/tic-tac-toe.css" asp-append-version="false" />
+<script src="~/Tic-Tac-Toe/js/tic-tac-toe.js" asp-append-version="false"></script>
+
+<h1>@ViewData["Title"]</h1>
+<p>The Tic-Tac-Toe project was started in 16 Feb 2022 as a way to learn about Machine Learning. This is the jQuery version.</p>
+
+<form method="post">
+    <div style="display: table">
+        <div style="display: table-row">
+            <div style="display: table-cell">
+                <div id="tictactoejq1" class="tictactoejq"></div>
+            </div>
+            @*
+            <div style="display: table-cell">
+                <div id="tictactoejq2" class="tictactoejq"></div>
+            </div>*@
+        </div>
+    </div>
+</form>
+
+<script type="text/javascript">
+    jQuery(document).ready(function () {
+
+        function OnPostUpdateTicTacToe(requestArgs) {
+
+            if (console && console.log)
+                console.log('OnPostUpdateTicTacToe');
+
+            if (console && console.log)
+                console.log(requestArgs);
+
+            let requestData = JSON.stringify(requestArgs);
+            let thepromise = DotNet.invokeMethodAsync('BlazorServerApp', 'jsUpdateTicTacToe', requestData);
+
+            if (console && console.log)
+                console.log(thepromise);
+
+            return thepromise;
+        }
+
+        var app1 = new TicTacToeJq("tictactoejq1");
+        app1.OnUpdate(OnPostUpdateTicTacToe);
+        
+        @*var app2 = new TicTacToeJq("tictactoejq2");
+        app2.OnUpdate(OnPostUpdateTicTacToe);*@
+    });
+</script>
diff --git a/BlazorServerApp/Pages/TicTacToeJq.cshtml.cs b/BlazorServerApp/Pages/TicTacToeJq.cshtml.cs
@@ -0,0 +1,70 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using Microsoft.JSInterop;
+using System.Text.Json;
+using TicTacToe.Models;
+
+namespace BlazorServerApp.Pages
+{
+    public class TicTacToeJqModel : PageModel
+    {
+        static IConfiguration _config = null;
+
+        public TicTacToeJqModel(IConfiguration config)
+        {
+            _config = config;
+        }
+
+        public void OnGet()
+        {
+        }
+
+        [JSInvokableAttribute("jsUpdateTicTacToe")]
+        public static async Task<string> OnPostUpdateTicTacToeAsync(string requestData)
+        {
+            var request = JsonSerializer.Deserialize<TicTacToeUpdateRequest>(requestData);
+
+            if (request != null)
+            {
+                var configExternalServices =
+                    _config.GetSection("ExternalServices");
+
+                if (configExternalServices != null)
+                {
+                    var configTicTacToeWebApi = configExternalServices.GetSection("TicTacToeWebApi");
+                    if (configTicTacToeWebApi != null)
+                    {
+                        var endpoint = configTicTacToeWebApi["endpoint"];
+
+                        var client = new HttpClient();
+                        var httpPostTask =
+                            client.PostAsJsonAsync<TicTacToeUpdateRequest>(
+                                endpoint,
+                                request
+                            );
+
+                        httpPostTask.Wait();
+
+                        var httpResponseMessage = httpPostTask.Result;
+
+                        var readJsonTask =
+                            httpResponseMessage
+                            .Content
+                            .ReadFromJsonAsync<TicTacToeUpdateResponse>();
+
+                        readJsonTask.Wait();
+
+                        if (readJsonTask.Result != null)
+                        {
+                            var tictactoeUpdateResponse = readJsonTask.Result;
+                            if (tictactoeUpdateResponse != null)
+                                return JsonSerializer.Serialize(tictactoeUpdateResponse);
+                        }
+                    }
+                }
+            }
+
+            return string.Empty;
+        }
+    }
+}
diff --git a/BlazorServerApp/Pages/TicTacToe.razor → BlazorServerApp/Pages/TicTacToeRz.razor b/BlazorServerApp/Pages/TicTacToe.razor → BlazorServerApp/Pages/TicTacToeRz.razor
@@ -1,9 +1,9 @@
-@page "/tictactoe"
+@page "/tictactoerz"
 
-<PageTitle>Tic-Tac-Toe</PageTitle>
+<PageTitle>Tic-Tac-Toe (Blazor)</PageTitle>
 
-<h1>Tic-Tac-Toe</h1>
-<p>The Tic-Tac-Toe project was started in 16 Feb 2022 as a way to learn about Machine Learning.</p>
+<h1>Tic-Tac-Toe (Blazor)</h1>
+<p>The Tic-Tac-Toe project was started in 16 Feb 2022 as a way to learn about Machine Learning. This is the Razor Component version.</p>
 @foreach (var componentID in componentIDs)
 {
     <TicTacToeGame ID="@componentID" GridSize="3"></TicTacToeGame>

diff --git a/BlazorServerApp/Program.cs b/BlazorServerApp/Program.cs
@@ -8,7 +8,7 @@
 // Add services to the container.
 builder.Services.AddRazorPages();
 builder.Services.AddServerSideBlazor();
-builder.Services.AddSingleton<WeatherForecastService>();
+//builder.Services.AddSingleton<WeatherForecastService>();
 
 //builder.Services.AddSingleton<TicTacToeService>();
 var ticTacToeService = new TicTacToeService(builder.Configuration);

diff --git a/BlazorServerApp/wwwroot/Tic-Tac-Toe/css/tic-tac-toe.css b/BlazorServerApp/wwwroot/Tic-Tac-Toe/css/tic-tac-toe.css
@@ -0,0 +1,95 @@
+div.tic-tac-toe-page {
+    cursor: url('/Tic-Tac-Toe/blueArrow32x32.png'), pointer !important;
+}
+
+div.tic-tac-toe-grid {
+    display: table;
+}
+
+div.tic-tac-toe-row-first {
+    display: table-row;
+}
+
+div.tic-tac-toe-row {
+    display: table-row;
+}
+
+div.tic-tac-toe-row-last {
+    display: table-row;
+}
+
+div.tic-tac-toe-cell-first {
+    display: table-cell;
+    border-right: medium solid black;
+    padding: 2px;
+}
+
+div.tic-tac-toe-cell {
+    display: table-cell;
+    border-left: medium solid black;
+    border-right: medium solid black;
+    padding: 2px;
+}
+
+div.tic-tac-toe-cell-last {
+    display: table-cell;
+    border-left: medium solid black;
+    padding: 2px;
+}
+
+div.tic-tac-toe-row-first div {
+    border-bottom: medium solid black;
+}
+
+div.tic-tac-toe-row div {
+    border-top: medium solid black;
+    border-bottom: medium solid black;
+}
+
+div.tic-tac-toe-row-last div {
+    border-top: medium solid black;
+}
+
+div.tic-tac-toe-display {
+    padding-top: 5px;
+}
+
+div.tic-tac-toe-display div {
+    vertical-align: middle;
+}
+
+div.tic-tac-toe-display div div {
+    vertical-align: middle;
+}
+
+div .gameMode {
+    float: left;
+}
+
+div.gameMode div {
+    display: inline-block;
+    padding: 0px 5px 0px 5px;
+}
+
+div.player1 {
+    float: right;
+    padding-left: 3px;
+}
+
+div.player1 div {
+    display: inline-block;
+    padding: 0px 5px 0px 5px;
+}
+
+div.player2 {
+    float: right;
+    padding-left: 3px;
+}
+
+div.player2 div {
+    display: inline-block;
+    padding: 0px 5px 0px 5px;
+}
+
+div.tic-tac-toe-controls {
+}