Removed things

- Use razor pages as the WASM host - Removed client side routing - Renamed the App component to Todo - Added delete todo
davidfowl · Nov 27, 2022 · 90338b9 · 90338b9
1 parent f4b05b0
commit 90338b9
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 38 deletions.
diff --git a/Todo.Web/Client/MainLayout.razor b/Todo.Web/Client/MainLayout.razor
diff --git a/Todo.Web/Client/Program.cs b/Todo.Web/Client/Program.cs
@@ -1,10 +1,7 @@
-using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 using Todo.Web.Client;
 
 var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
 
 builder.Services.AddHttpClient<TodoClient>(client =>
 {

diff --git a/Todo.Web/Client/App.razor → Todo.Web/Client/Todo.razor b/Todo.Web/Client/App.razor → Todo.Web/Client/Todo.razor
@@ -1,7 +1,5 @@
 @inject TodoClient Client
 
-<h1>Todos</h1>
-
 @if (todos is null)
 {
     if (statusCode is null)
@@ -27,28 +25,22 @@ else
 {
     <input type="button" value="Logout" onclick="@(() => Logout())" />
 
-    <section class="todoapp">
-      <header class="header">
-        <h1>todos</h1>
-        <form onsubmit="@(() => AddTodo())">
-          <input class="new-todo" placeholder="What needs to be done?" @bind="todoItem" />
-        </form>
-      </header>
-      <section class="main" style="display: block">
-        <ul class="todo-list">
+    <form onsubmit="@(() => AddTodo())">
+        <input class="new-todo" placeholder="What needs to be done?" @bind="todoItem" />
+    </form>
+    <ul class="todo-list">
         @foreach (var todo in todos)
         {
-            <li class=@(todo.IsComplete ? "completed" : "") @key="@todo.Id">
+            var id = todo.Id;
+            <li class=@(todo.IsComplete ? "completed" : "") @key="id">
                 <div class="view">
-                  <input class="toggle" type="checkbox" checked="@todo.IsComplete" />
-                  <label>@todo.Title</label>
-                  <button class="destroy"></button>
+                    <input class="toggle" type="checkbox" @bind="@todo.IsComplete" />
+                    <label>@todo.Title</label>
+                    <button class="destroy" onclick="@(() => DeleteTodo(id))"></button>
                 </div>
-              </li>
+            </li>
         }
-        </ul>
-      </section>
-    </section>
+    </ul>
 }
 
 @code {
@@ -60,7 +52,7 @@ else
 
     string? todoItem;
 
-    private async Task AddTodo()
+    async Task AddTodo()
     {
         if (todoItem is { Length: > 0 })
         {
@@ -73,7 +65,17 @@ else
         }
     }
 
-    private async Task Logout()
+    async Task DeleteTodo(int id)
+    {
+        if (await Client.DeleteTodoAsync(id))
+        {
+            await OnInitializedAsync();
+
+            StateHasChanged();
+        }
+    }
+
+    async Task Logout()
     {
         if (await Client.LogoutAsync())
         {
@@ -82,7 +84,7 @@ else
         }
     }
 
-    private async Task Login()
+    async Task Login()
     {
         if (await Client.LoginAsync(username, password))
         {

diff --git a/Todo.Web/Client/TodoClient.cs b/Todo.Web/Client/TodoClient.cs
@@ -17,6 +17,12 @@ public async Task<bool> AddTodoAsync(string title)
         return response.IsSuccessStatusCode;
     }
 
+    public async Task<bool> DeleteTodoAsync(int id)
+    {
+        var response = await _client.DeleteAsync($"todos/{id}");
+        return response.IsSuccessStatusCode;
+    }
+
     public async Task<(HttpStatusCode, TodoItem[]?)> GetTodosAsync()
     {
         var response = await _client.GetAsync("todos");

diff --git a/Todo.Web/Client/_Imports.razor b/Todo.Web/Client/_Imports.razor
@@ -5,4 +5,3 @@
 @using Microsoft.AspNetCore.Components.Web
 @using Microsoft.AspNetCore.Components.WebAssembly.Http
 @using Microsoft.JSInterop
-@using Todo.Web.Client
diff --git a/Todo.Web/Client/wwwroot/index.html → Todo.Web/Server/Pages/_Host.cshtml b/Todo.Web/Client/wwwroot/index.html → Todo.Web/Server/Pages/_Host.cshtml
@@ -1,3 +1,10 @@
+@page
+@model Todo.Web.Server.Pages.IndexModel
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+
+@{
+}
+
 <!DOCTYPE html>
 <html lang="en">
 
@@ -6,13 +13,21 @@
     <title>Todo.Web</title>
     <base href="/" />
     <link href="css/app.css" rel="stylesheet" />
-    
+
     <!-- If you add any scoped CSS files, uncomment the following to load them
     <link href="Todo.Web.Client.styles.css" rel="stylesheet" /> -->
 </head>
 
 <body>
-    <div id="app">Loading...</div>
+    <section class="todoapp">
+      <header class="header">
+      <h1>todos</h1>
+      </header>
+
+      <section class="main" style="display: block">
+         <component type="typeof(Todo.Web.Client.Todo)" render-mode="WebAssembly" />
+      </section>
+    </section>
 
     <div id="blazor-error-ui">
         An unhandled error has occurred.

diff --git a/Todo.Web/Server/Pages/_Host.cshtml.cs b/Todo.Web/Server/Pages/_Host.cshtml.cs
@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace Todo.Web.Server.Pages
+{
+    public class IndexModel : PageModel
+    {
+        public void OnGet()
+        {
+        }
+    }
+}
diff --git a/Todo.Web/Server/Program.cs b/Todo.Web/Server/Program.cs
@@ -9,6 +9,9 @@
 });
 builder.Services.AddAuthorizationBuilder();
 
+// Add razor pages so we can render the Blazor WASM todo component
+builder.Services.AddRazorPages();
+
 // Add the forwarder to make sending requests to the backend easier
 builder.Services.AddHttpForwarder();
 
@@ -42,7 +45,7 @@
 app.UseAuthentication();
 app.UseAuthorization();
 
-app.MapFallbackToFile("index.html");
+app.MapFallbackToPage("/_Host");
 
 // Configure the APIs
 app.MapAuth();

diff --git a/Todo.Web/Server/Todo.Web.Server.csproj b/Todo.Web/Server/Todo.Web.Server.csproj
@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
     <TargetFramework>net7.0</TargetFramework>

diff --git a/TodoApi.sln b/TodoApi.sln
@@ -13,11 +13,11 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution
 		README.md = README.md
 	EndProjectSection
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Todo.Web.Server", "Todo.Web\Server\Todo.Web.Server.csproj", "{9459B25A-3A37-43C4-A7DE-6113C1E2CDD7}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Todo.Web.Server", "Todo.Web\Server\Todo.Web.Server.csproj", "{9459B25A-3A37-43C4-A7DE-6113C1E2CDD7}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Todo.Web.Client", "Todo.Web\Client\Todo.Web.Client.csproj", "{699CCBA9-9DE8-48C3-9D2F-226E349C9253}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Todo.Web.Client", "Todo.Web\Client\Todo.Web.Client.csproj", "{699CCBA9-9DE8-48C3-9D2F-226E349C9253}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Todo.Web.Shared", "Todo.Web\Shared\Todo.Web.Shared.csproj", "{272942F6-94E8-4D6B-8AD8-C4CCA305836D}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Todo.Web.Shared", "Todo.Web\Shared\Todo.Web.Shared.csproj", "{272942F6-94E8-4D6B-8AD8-C4CCA305836D}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution