Skip to content

Commit d5d7941

Browse files
adrianhalladrianhall
authored
(#330) Blazor WASM sample and docs updates. (#394)
* (#330) Blazor WASM Updates
1 parent 9686f0e commit d5d7941

30 files changed

+1829
-2
lines changed

‎.github/prompts/wasm-sample.prompt.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
This repository contains an open source project for accessing databases through a client-server relationship with LINQ. You can find many samples in the samples directory, but the main one is todoapp, which contains samples for Avalonia, MAUI, Uno, WinUI3, and WPF. There is also a todoapp-mvc that encapsulates a service and client using JavaScript.
2+
3+
Project Layout:
4+
5+
- `docs` contains full documentation for the library. `docs/in-depth/client/online.md` is a good resource for online client operations.
6+
- `samples` contains a set of samples.
7+
- `src` and `test` contain the source code and tests for the libraries we distribute.
8+
9+
Your job is to create a working sample for Blazor WASM. It should implement a TodoList type application (common with the other samples), encapsulated in a server (see todoapp-mvc for an example server implementation). The solution should be placed in `samples/todoapp-blazor-wasm` and should be runnable with F5-Run. Use an in-memory EF Core store for storing the data (so we aren't reliant on an external database service).

‎docs/in-depth/client/advanced/blazor-wasm.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Blazor WASM Support
2+
3+
You can use Blazor WASM with the Datasync Community Toolkit; however, there are some signficant problems:
4+
5+
1. In the general case, you cannot use SQLite for offline storage.
6+
2. You will have to suppress the `WASM0001` warning for sqlite.
7+
8+
## Do not use offline mode
9+
10+
It is possible to use offline mode by storing the SQLite database in local storage within the browser. When you start up your application, you restore the SQLite in-memory database into memory; on a regular basis, you write the SQLite database to local storage. However, this system severely affects performance within the browser and large synchronizations will cause the local storage to overflow. As a result of these problems, it is not recommended, nor is it supported.
11+
12+
## Suppress the `WASM0001` warning
13+
14+
When compiling the WASM client, you will see warning `WASM0001`. This is a harmless warning that indicates SQLite is not available. However, you may be running using "Warnings as Errors". The most appropriate solution is to suppress the `WASM0001` warning in your client `.csproj` file as follows:
15+
16+
```xml
17+
<PropertyGroup>
18+
<NoWarn>$(NoWarn);WASM0001</NoWarn>
19+
</PropertyGroup>
20+
```
21+
22+
Alternatively, you may also use the following to keep `WASM0001` as a warning even when using "Warnings as Errors":
23+
24+
```xml
25+
<PropertyGroup>
26+
<WarningsNotAsErrors>$(WarningsNotAsErrors);WASM0001</WarningsNotAsErrors>
27+
</PropertyGroup>
28+
```
29+
30+
This will suppress the harmless SQLite warning that appears when building Blazor WASM applications that reference libraries containing SQLite dependencies (even when not using SQLite directly).
31+
32+
## Sample
33+
34+
We have a Blazor WASM sample in our sample set: [samples/todoapp-blazor-wasm](https://github.com/CommunityToolkit/Datasync/tree/main/samples/todoapp-blazor-wasm). This sample comprises a server (which uses an in-memory EF Core database) combined with a Blazor Web Assembly client.

‎docs/in-depth/client/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
# Creating offline clients
22

3-
This guide shows you how to perform common scenarios using the Datasync Community Toolkit. Use the client library in any .NET 8 application, including AvaloniaUI, MAUI, Uno Platform, WinUI, and WPF applications.
3+
This guide shows you how to perform common scenarios using the Datasync Community Toolkit. Use the client library in any .NET 9 application, including AvaloniaUI, MAUI, Uno Platform, WinUI, and WPF applications.
44

55
!!! note **Blazor WASM and Blazor Hybrid**
6-
The offline capabilities are known to have issues with Blazor WASM and Blazor Hybrid (since EF Core and SQLite do not work in those environments when running in the browser). Use online-only operations in these environments.
6+
The offline capabilities are known to have issues with Blazor WASM and Blazor Hybrid (since EF Core and SQLite do not work in those environments when running in the browser). Use online-only operations in these environments. For more information, see [our guide on Blazor WASM](./advanced/blazor-wasm.md)
77

88
This guide primary deals with offline operations. For online operations, see the [Online operations guide](./online.md).
99

‎docs/in-depth/client/online.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
Not all data needs to be synchronized. You may want to do an online search of records for a search capability, for example. To support this, The Datasync Community Toolkit supports an online client in addition to offline usage.
44

5+
If you are using the Datasync Community Toolkit with Blazor WASM, see [our guide on Blazor WASM usage](./advanced/blazor-wasm.md).
6+
57
## Creating a Http Client Factory
68

79
To create an online client, you must create an `IHttpClientFactory` that creates the appropriate `HttpClient` objects that are used to communicate with the remote service. This can handle authentication, logging, and anything else that is required by the remote service. At a minimum, a `BaseAddress` must be established. To facilitate this, the Datasync Community Toolkit provides a default `HttpClientFactory` that can be used:

‎docs/index.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ Currently, the library supports:
1212
Client platforms that have been tested include:
1313

1414
* [Avalonia][avalonia]
15+
* [Blazor WASM][blazor-wasm]
1516
* [.NET MAUI][maui]
1617
* [Uno Platform][uno]
1718
* [Windows Presentation Framework (WPF)][wpf]
@@ -43,6 +44,7 @@ Find out more about developing datasync applications:
4344
[org-github]: https://learn.microsoft.com/en-us/dotnet/communitytoolkit/
4445
[dotnetfdn]: https://dotnetfoundation.org/
4546
[avalonia]: https://www.avaloniaui.net/
47+
[blazor-wasm]: https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-build-tools-and-aot
4648
[maui]: https://dotnet.microsoft.com/apps/maui
4749
[uno]: https://platform.uno/
4850
[wpf]: https://learn.microsoft.com/dotnet/desktop/wpf/overview/

‎samples/todoapp-blazor-wasm/TodoApp.BlazorWasm.Client/App.razor

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<Router AppAssembly="@typeof(App).Assembly">
2+
<Found Context="routeData">
3+
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
4+
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
5+
</Found>
6+
<NotFound>
7+
<PageTitle>Not found</PageTitle>
8+
<LayoutView Layout="@typeof(MainLayout)">
9+
<p role="alert">Sorry, there's nothing at this address.</p>
10+
</LayoutView>
11+
</NotFound>
12+
</Router>

‎samples/todoapp-blazor-wasm/TodoApp.BlazorWasm.Client/Pages/TodoList.razor

Lines changed: 259 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,259 @@
1+
@page "/"
2+
@page "/{filter}"
3+
@inject ITodoService TodoService
4+
@inject IJSRuntime JSRuntime
5+
6+
<PageTitle>TodoMVC - Blazor WASM</PageTitle>
7+
8+
<section class="todoapp">
9+
<header class="header">
10+
<h1>todos</h1>
11+
<input class="new-todo"
12+
placeholder="What needs to be done?"
13+
@bind="newTodoTitle"
14+
@onkeypress="HandleNewTodoKeyPress"
15+
autofocus />
16+
</header>
17+
18+
@if (todoItems.Any())
19+
{
20+
<section class="main">
21+
<input id="toggle-all"
22+
class="toggle-all"
23+
type="checkbox"
24+
checked="@allCompleted"
25+
@onchange="ToggleAllTodos" />
26+
<label for="toggle-all">Mark all as complete</label>
27+
28+
<ul class="todo-list">
29+
@foreach (var item in FilteredTodos)
30+
{
31+
<li class="@(item.Completed ? "completed" : "")" @key="item.Id">
32+
<div class="view">
33+
<input class="toggle"
34+
type="checkbox"
35+
checked="@item.Completed"
36+
@onchange="() => ToggleTodo(item)" />
37+
<label @ondblclick="() => StartEditing(item.Id)">@item.Title</label>
38+
<button class="destroy" @onclick="() => DeleteTodo(item.Id)"></button>
39+
</div>
40+
@if (editingTodoId == item.Id)
41+
{
42+
<input class="edit"
43+
@bind="editingTitle"
44+
@onkeypress="(e) => HandleEditKeyPress(e, item)"
45+
@onblur="() => SaveEdit(item)"
46+
@ref="editInput" />
47+
}
48+
</li>
49+
}
50+
</ul>
51+
</section>
52+
53+
<footer class="footer">
54+
<span class="todo-count">
55+
<strong>@activeTodoCount</strong> @(activeTodoCount == 1 ? "item" : "items") left
56+
</span>
57+
58+
<ul class="filters">
59+
<li><a href="/" class="@(CurrentFilter == "all" ? "selected" : "")">All</a></li>
60+
<li><a href="/active" class="@(CurrentFilter == "active" ? "selected" : "")">Active</a></li>
61+
<li><a href="/completed" class="@(CurrentFilter == "completed" ? "selected" : "")">Completed</a></li>
62+
</ul>
63+
64+
@if (completedTodoCount > 0)
65+
{
66+
<button class="clear-completed" @onclick="ClearCompleted">
67+
Clear completed
68+
</button>
69+
}
70+
</footer>
71+
}
72+
</section>
73+
74+
<footer class="info">
75+
<p>Double-click to edit a todo</p>
76+
<p>Created with <a href="https://blazor.net/">Blazor</a></p>
77+
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
78+
</footer>
79+
80+
@code {
81+
[Parameter] public string? Filter { get; set; }
82+
83+
private List<TodoItemDto> todoItems = new();
84+
private string newTodoTitle = string.Empty;
85+
private string? editingTodoId;
86+
private string editingTitle = string.Empty;
87+
private bool allCompleted;
88+
private ElementReference editInput;
89+
90+
private string CurrentFilter => Filter ?? "all";
91+
92+
private IEnumerable<TodoItemDto> FilteredTodos => CurrentFilter switch
93+
{
94+
"active" => todoItems.Where(t => !t.Completed),
95+
"completed" => todoItems.Where(t => t.Completed),
96+
_ => todoItems
97+
};
98+
99+
private int activeTodoCount => todoItems.Count(t => !t.Completed);
100+
private int completedTodoCount => todoItems.Count(t => t.Completed);
101+
102+
protected override async Task OnInitializedAsync()
103+
{
104+
await LoadTodos();
105+
}
106+
107+
private async Task LoadTodos()
108+
{
109+
try
110+
{
111+
var items = await TodoService.GetTodoItemsAsync();
112+
todoItems = items.ToList();
113+
UpdateAllCompletedState();
114+
}
115+
catch (Exception ex)
116+
{
117+
Console.WriteLine($"Error loading todos: {ex.Message}");
118+
}
119+
}
120+
121+
private async Task HandleNewTodoKeyPress(KeyboardEventArgs e)
122+
{
123+
if (e.Key == "Enter" && !string.IsNullOrWhiteSpace(newTodoTitle))
124+
{
125+
await CreateTodo();
126+
}
127+
}
128+
129+
private async Task CreateTodo()
130+
{
131+
try
132+
{
133+
var newItem = await TodoService.CreateTodoItemAsync(newTodoTitle.Trim());
134+
todoItems.Add(newItem);
135+
newTodoTitle = string.Empty;
136+
UpdateAllCompletedState();
137+
}
138+
catch (Exception ex)
139+
{
140+
Console.WriteLine($"Error creating todo: {ex.Message}");
141+
}
142+
}
143+
144+
private async Task UpdateTodo(TodoItemDto item)
145+
{
146+
try
147+
{
148+
await TodoService.UpdateTodoItemAsync(item);
149+
UpdateAllCompletedState();
150+
}
151+
catch (Exception ex)
152+
{
153+
Console.WriteLine($"Error updating todo: {ex.Message}");
154+
}
155+
}
156+
157+
private async Task ToggleTodo(TodoItemDto item)
158+
{
159+
item.Completed = !item.Completed;
160+
await UpdateTodo(item);
161+
}
162+
163+
private async Task DeleteTodo(string id)
164+
{
165+
try
166+
{
167+
await TodoService.DeleteTodoItemAsync(id);
168+
todoItems.RemoveAll(t => t.Id == id);
169+
UpdateAllCompletedState();
170+
}
171+
catch (Exception ex)
172+
{
173+
Console.WriteLine($"Error deleting todo: {ex.Message}");
174+
}
175+
}
176+
177+
private async Task ToggleAllTodos()
178+
{
179+
try
180+
{
181+
foreach (var item in todoItems)
182+
{
183+
item.Completed = allCompleted;
184+
await TodoService.UpdateTodoItemAsync(item);
185+
}
186+
}
187+
catch (Exception ex)
188+
{
189+
Console.WriteLine($"Error toggling all todos: {ex.Message}");
190+
}
191+
}
192+
193+
private async Task ClearCompleted()
194+
{
195+
try
196+
{
197+
var completedItems = todoItems.Where(t => t.Completed).ToList();
198+
foreach (var item in completedItems)
199+
{
200+
await TodoService.DeleteTodoItemAsync(item.Id);
201+
}
202+
todoItems.RemoveAll(t => t.Completed);
203+
UpdateAllCompletedState();
204+
}
205+
catch (Exception ex)
206+
{
207+
Console.WriteLine($"Error clearing completed todos: {ex.Message}");
208+
}
209+
}
210+
211+
private async Task StartEditing(string id)
212+
{
213+
editingTodoId = id;
214+
var item = todoItems.First(t => t.Id == id);
215+
editingTitle = item.Title;
216+
217+
await Task.Delay(1); // Allow DOM to update
218+
await editInput.FocusAsync();
219+
}
220+
221+
private async Task HandleEditKeyPress(KeyboardEventArgs e, TodoItemDto item)
222+
{
223+
if (e.Key == "Enter")
224+
{
225+
await SaveEdit(item);
226+
}
227+
else if (e.Key == "Escape")
228+
{
229+
CancelEdit();
230+
}
231+
}
232+
233+
private async Task SaveEdit(TodoItemDto item)
234+
{
235+
if (!string.IsNullOrWhiteSpace(editingTitle))
236+
{
237+
item.Title = editingTitle.Trim();
238+
await UpdateTodo(item);
239+
}
240+
else
241+
{
242+
await DeleteTodo(item.Id);
243+
}
244+
245+
editingTodoId = null;
246+
editingTitle = string.Empty;
247+
}
248+
249+
private void CancelEdit()
250+
{
251+
editingTodoId = null;
252+
editingTitle = string.Empty;
253+
}
254+
255+
private void UpdateAllCompletedState()
256+
{
257+
allCompleted = todoItems.Any() && todoItems.All(t => t.Completed);
258+
}
259+
}

‎samples/todoapp-blazor-wasm/TodoApp.BlazorWasm.Client/Program.cs

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
using CommunityToolkit.Datasync.Client;
6+
using Microsoft.AspNetCore.Components.Web;
7+
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
8+
using TodoApp.BlazorWasm.Client;
9+
using TodoApp.BlazorWasm.Client.Services;
10+
using TodoApp.BlazorWasm.Shared.Models;
11+
12+
WebAssemblyHostBuilder builder = WebAssemblyHostBuilder.CreateDefault(args);
13+
builder.RootComponents.Add<App>("#app");
14+
builder.RootComponents.Add<HeadOutlet>("head::after");
15+
16+
// Configure HTTP client for Datasync
17+
builder.Services.AddHttpClient("DatasyncClient", client =>
18+
{
19+
client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress);
20+
});
21+
22+
// Register Datasync services
23+
builder.Services.AddScoped<DatasyncServiceClient<TodoItemDto>>(sp =>
24+
{
25+
IHttpClientFactory httpClientFactory = sp.GetRequiredService<IHttpClientFactory>();
26+
HttpClient httpClient = httpClientFactory.CreateClient("DatasyncClient");
27+
Uri tableEndpoint = new("/tables/todoitems", UriKind.Relative);
28+
return new DatasyncServiceClient<TodoItemDto>(tableEndpoint, httpClient);
29+
});
30+
31+
builder.Services.AddScoped<ITodoService, TodoService>();
32+
33+
await builder.Build().RunAsync();

0 commit comments

Comments
 (0)