From c7f922ec450fff4bec019f59c724a8915b57cfd0 Mon Sep 17 00:00:00 2001
From: enisn <info@enisnecipoglu.com>
Date: Thu, 29 Aug 2024 11:36:51 +0300
Subject: [PATCH] Add Blazor WebApp to Todo Tutorial

---
 docs/en/tutorials/todo/layered/index.md | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/docs/en/tutorials/todo/layered/index.md b/docs/en/tutorials/todo/layered/index.md
index db25c826f1..78f49df9dd 100644
--- a/docs/en/tutorials/todo/layered/index.md
+++ b/docs/en/tutorials/todo/layered/index.md
@@ -3,7 +3,7 @@
 ````json
 //[doc-params]
 {
-    "UI": ["MVC", "Blazor", "BlazorServer", "NG"],
+    "UI": ["MVC", "Blazor", "BlazorServer", "BlazorWebApp" ,"NG"],
     "DB": ["EF", "Mongo"]
 }
 ````
@@ -148,6 +148,10 @@ Ensure the `TodoApp.HttpApi.Host` project is the startup project, then run the a
 
 You can explore and test your HTTP API with this UI. Now, we can set the `TodoApp.Blazor` as the startup project and run it to open the actual Blazor application UI:
 
+{{else if UI=="BlazorWebApp" }}
+
+It is good to run the application before starting the development. Ensure the `TodoApp.Blazor` project is the startup project, then run the application (Ctrl+F5 in Visual Studio) to see the initial UI:
+
 {{else if UI=="NG"}}
 
 It is good to run the application before starting the development. The solution has two main applications:
@@ -252,7 +256,7 @@ You can apply changes to the database using the following command, in the same c
 dotnet ef database update
 ```
 
-> If you are using Visual Studio, you may want to use the `Add-Migration Added_TodoItem` and `Update-Database` commands in the *Package Manager Console (PMC)*. In this case, ensure that {{if UI=="MVC"}}`TodoApp.Web`{{else if UI=="BlazorServer"}}`TodoApp.Blazor`{{else if UI=="Blazor" || UI=="NG"}}`TodoApp.HttpApi.Host`{{end}} is the startup project and `TodoApp.EntityFrameworkCore` is the *Default Project* in PMC.
+> If you are using Visual Studio, you may want to use the `Add-Migration Added_TodoItem` and `Update-Database` commands in the *Package Manager Console (PMC)*. In this case, ensure that {{if UI=="MVC"}}`TodoApp.Web`{{else if UI=="BlazorServer" || UI=="Blazor" || UI=="BlazorWebApp"}}`TodoApp.Blazor`{{else if UI=="Blazor" || UI=="NG"}}`TodoApp.HttpApi.Host`{{end}} is the startup project and `TodoApp.EntityFrameworkCore` is the *Default Project* in PMC.
 
 {{else if DB=="Mongo"}}
 
@@ -581,11 +585,11 @@ If you open the [Swagger UI](https://swagger.io/tools/swagger-ui/) by entering t
 
 ![todo-api](../images/todo-api.png)
 
-{{else if UI=="Blazor" || UI=="BlazorServer"}}
+{{else if UI=="Blazor" || UI=="BlazorServer" || UI=="BlazorWebApp"}}
 
 ### Index.razor.cs
 
-Open the `Index.razor.cs` file in the `Pages` folder of the *TodoApp.Blazor* project and replace the content with the following code block:
+Open the `Index.razor.cs` file in the `Pages` folder of the {{if UI=="BlazorWebApp"}} *TodoApp.Blazor.Client* {{else}}*TodoApp.Blazor*{{end}} project and replace the content with the following code block:
 
 ```csharp
 using Microsoft.AspNetCore.Components;
@@ -634,7 +638,7 @@ See the *Dynamic C# Proxies & Auto API Controllers* section below to learn how w
 
 ### Index.razor
 
-Open the `Index.razor` file in the `Pages` folder of the *TodoApp.Blazor* project and replace the content with the following code block:
+Open the `Index.razor` file in the `Pages` folder of the {{if UI=="BlazorWebApp"}} *TodoApp.Blazor.Client* {{else}} *TodoApp.Blazor* {{end}} project and replace the content with the following code block:
 
 ```xml
 @page "/"
@@ -676,7 +680,7 @@ Open the `Index.razor` file in the `Pages` folder of the *TodoApp.Blazor* projec
 
 ### Index.razor.css
 
-As the final touch, open the `Index.razor.css` file in the `Pages` folder of the *TodoApp.Blazor* project and replace it with the following content:
+As the final touch, open the `Index.razor.css` file in the `Pages` folder of the {{if UI=="BlazorWebApp"}}*TodoApp.Blazor.Client*{{else}}*TodoApp.Blazor*{{end}} project and replace it with the following content:
 
 ```css
 #TodoList{