kevin/BlazorDeepDive
1
0
Fork 0
Code

Compare commits

base: kevin:bb72836773b947295a4e57877bc9274fe850ee48
Branches Tags
kevin:master
...
compare: kevin:23300842c922c29c6d3be569640c1ec8d508a9f5
Branches Tags
kevin:master

13 Commits
bb72836773 ... 23300842c9

Author SHA1 Message Date
Kevin Matsubara
23300842c9 Add comment regarding render mode on Routes component in App.razor file. 2025-03-25 12:27:52 +01:00
Kevin Matsubara
64c2be5028 Replace EditForm for turn on/off button with server interactivity. 2025-03-25 12:15:17 +01:00
Kevin Matsubara
432a8e8f84 Use Enhanced form to make turn on/off button more interactive. 
Without refreshing the page.
 2025-03-25 11:35:28 +01:00
Kevin Matsubara
3c85a8feda Add turn on/off button for a server component. 
But notice that the page gets refreshed.
 2025-03-25 11:31:39 +01:00
Kevin Matsubara
a0e034e740 Add functionality to delete servers. 2025-03-24 18:32:53 +01:00
Kevin Matsubara
48638eeae2 Change links for add and edit to look like primary buttons. 2025-03-24 18:32:34 +01:00
Kevin Matsubara
4d77319f48 Add a routable component to add a new server. 2025-03-24 18:16:00 +01:00
Kevin Matsubara
8139388ff9 Add comment explaining exception on NavigationManager. 2025-03-24 18:15:44 +01:00
Kevin Matsubara
6090fea796 Automatically navigate back to servers page after submitting form for editing server. 
With dependancy injection of the NavigationManager.
 2025-03-24 17:49:30 +01:00
Kevin Matsubara
353df277e5 Update EditForm for server edit with data annotations. 2025-03-24 17:33:39 +01:00
Kevin Matsubara
580ababb2a Update EditForm for server to include sumbit handler and id. 2025-03-24 17:23:11 +01:00
Kevin Matsubara
ee8c939710 Create EditForm on Edit Server page. 2025-03-24 16:13:25 +01:00
Kevin Matsubara
3b14454205 Add root parameter to the URL for editing a server. 2025-03-24 15:56:29 +01:00
7 changed files with 181 additions and 12 deletions
Show Stats Expand all files Collapse all files

3
ServerManagement/Components/App.razor
View File

@ -13,7 +13,8 @@
</head> </head>
<body> <body>
<Routes /> @* Note that @rendermode="InteractiveServer" can be used here on Routes to make it global. But this is not recommended by Microsoft. See: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0 *@
<Routes/>
<script src="_framework/blazor.web.js"></script> <script src="_framework/blazor.web.js"></script>
</body> </body>

23
ServerManagement/Components/Controls/ServerComponent.razor
View File

@ -1,10 +1,23 @@
@namespace ServerManagement.Components.Controls @namespace ServerManagement.Components.Controls
<p @if (server != null)
style="@($"color:{(server.IsOnline ? "green" : "red")}")"> {
@server.Name is in: @server.City @(server.IsOnline ? "online" : "offline") <div
</p> style="@($"color:{(server.IsOnline ? "green" : "red")}")">
@server.Name is in: @server.City @(server.IsOnline ? "online" : "offline")
&nbsp;
<button type="submit" class="btn btn-primary" @onclick="ChangeStatus">Turn On/Off</button>
</div>
}
@code { @code {
private Server server = new Server { Name = "Server 1", City = "Einhoven" }; private Server? server { get; set; } = new Server { Name = "Server 1", City = "Einhoven" };
private void ChangeStatus()
{
if (server != null)
{
this.server.IsOnline = !this.server.IsOnline;
}
}
} }

57
ServerManagement/Components/Pages/AddServer.razor Normal file
View File

@ -0,0 +1,57 @@
@page "/servers/add"
@using System.ComponentModel.DataAnnotations
@inject NavigationManager NavigationManager
<h3>Add server</h3>
<br/>
<br/>
<EditForm Model="server" FormName="formServer" OnValidSubmit="SubmitServer">
<DataAnnotationsValidator></DataAnnotationsValidator>
<ValidationSummary></ValidationSummary>
<div class="row mb-3">
<div class="col-2">
<label class="col-form-label">Name</label>
</div>
<div class="col-6">
<InputText @bind-Value="server.Name" class="form-control"></InputText>
</div>
<div class="col">
<ValidationMessage For="() => server.Name"></ValidationMessage>
</div>
</div>
<div class="row mb-3">
<div class="col-2">
<label class="col-form-label">City</label>
</div>
<div class="col-6">
<InputText @bind-Value="server.City" class="form-control"></InputText>
</div>
<div class="col">
<ValidationMessage For="() => server.City"></ValidationMessage>
</div>
</div>
<br/>
<button class="btn btn-primary" type="submit">Add</button>
&nbsp;
<a href="/servers" class="btn btn-primary">Close</a>
</EditForm>
@code {
[SupplyParameterFromForm(FormName = "formServer")]
private Server server { get; set; } = new Server() { IsOnline = false };
private void SubmitServer()
{
if (server != null)
{
ServersRepository.AddServer(server);
}
// An exception is raised when debugging from VS Code, but not when using dotnet watch.
NavigationManager.NavigateTo("/servers");
}
}

75
ServerManagement/Components/Pages/EditServer.razor
View File

@ -1,7 +1,76 @@
@page "/servers/edit" @page "/servers/{id:int}"
@* Route constraints: https://learn.microsoft.com/en-us/aspnet/core/fundamentals/routing?view=aspnetcore-9.0#route-constraints *@
<p>Edit server</p> @inject NavigationManager NavigationManager
<h3>Edit server</h3>
<br/>
<br/>
@if (server != null)
{
<EditForm Model="server" FormName="formServer" OnValidSubmit="SubmitServer">
<DataAnnotationsValidator></DataAnnotationsValidator>
<ValidationSummary></ValidationSummary>
<InputNumber @bind-Value="server.Id" hidden></InputNumber>
<div class="row mb-3">
<div class="col-2">
<label class="col-form-label">Name</label>
</div>
<div class="col-6">
<InputText @bind-Value="server.Name" class="form-control"></InputText>
</div>
<div class="col">
<ValidationMessage For="() => server.Name"></ValidationMessage>
</div>
</div>
<div class="row mb-3">
<div class="col-2">
<label class="col-form-label">City</label>
</div>
<div class="col-6">
<InputText @bind-Value="server.City" class="form-control"></InputText>
</div>
<div class="col">
<ValidationMessage For="() => server.City"></ValidationMessage>
</div>
</div>
<div class="row mb-3">
<div class="col-2">
<label class="col-form-label">Online</label>
</div>
<div class="col-6">
<InputCheckbox @bind-Value="server.IsOnline" class="form-check-input"></InputCheckbox>
</div>
</div>
<br/>
<button class="btn btn-primary" type="submit">Update</button>
&nbsp;
<a href="/servers" class="btn btn-primary">Close</a>
</EditForm>
}
@code { @code {
[Parameter] // This is a root parameter.
public int Id { get; set; }
[SupplyParameterFromForm(FormName = "formServer")]
private Server? server { get; set; }
protected override void OnParametersSet()
{
server ??= ServersRepository.GetServerById(this.Id);
}
private void SubmitServer()
{
if (server != null)
{
ServersRepository.UpdateServer(server.Id, server);
}
// An exception is raised when debugging from VS Code, but not when using dotnet watch.
NavigationManager.NavigateTo("/servers");
}
} }

24
ServerManagement/Components/Pages/Servers.razor
View File

@ -1,6 +1,8 @@
@page "/servers" @page "/servers"
@using ServerManagement.Components.Controls @using ServerManagement.Components.Controls
@inject NavigationManager NavigationManager
<h3>Servers</h3> <h3>Servers</h3>
<br/> <br/>
<br/> <br/>
@ -22,6 +24,10 @@
</div> </div>
</div> </div>
<br/>
<ServerComponent @rendermode="InteractiveServer"></ServerComponent>
<br/>
<a href="@($"/servers/add")" class="btn btn-primary">Add</a>
<br/> <br/>
<ul> <ul>
@foreach(var server in servers) @foreach(var server in servers)
@ -32,7 +38,14 @@
@(server.IsOnline ? "online" : "offline") @(server.IsOnline ? "online" : "offline")
</span>; </span>;
&nbsp; &nbsp;
<a href="/servers/edit" class="btn btn-link">Edit</a> <a href="@($"/servers/{server.Id}")" class="btn btn-primary">Edit</a>
&nbsp;
<EditForm
Model="server"
FormName="@($"formDeleteServer{server.Id}")"
OnValidSubmit="@(() => { DeleteServer(server.Id); })">
<button type="submit" class="btn btn-danger">Delete</button>
</EditForm>
</li> </li>
} }
</ul> </ul>
@ -40,4 +53,13 @@
@code { @code {
private List<string> cities = ServersRepository.GetCities(); private List<string> cities = ServersRepository.GetCities();
private List<Server> servers = ServersRepository.GetServersByCity("Eindhoven"); private List<Server> servers = ServersRepository.GetServersByCity("Eindhoven");
private void DeleteServer(int serverId)
{
if (serverId > 0)
{
ServersRepository.DeleteServer(serverId);
NavigationManager.Refresh();
}
}
} }

7
ServerManagement/Models/Server.cs
View File

@ -1,3 +1,6 @@
using System.ComponentModel.DataAnnotations;
// Data annotations: https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations?view=net-9.0
namespace ServerManagement.Models namespace ServerManagement.Models
{ {
public class Server public class Server
@ -11,7 +14,11 @@ namespace ServerManagement.Models
public int Id { get; set; } public int Id { get; set; }
public bool IsOnline { get; set; } public bool IsOnline { get; set; }
[Required]
public string? Name { get; set; } public string? Name { get; set; }
[Required]
public string? City { get; set; } public string? City { get; set; }
} }
} }

4
ServerManagement/Program.cs
View File

@ -4,7 +4,7 @@ var builder = WebApplication.CreateBuilder(args);
// Add services to the container. // Add services to the container.
builder.Services.AddRazorComponents() builder.Services.AddRazorComponents()
.AddInteractiveServerComponents(); .AddInteractiveServerComponents(); // Provides server interactivity.
var app = builder.Build(); var app = builder.Build();
@ -22,6 +22,6 @@ app.UseStaticFiles();
app.UseAntiforgery(); app.UseAntiforgery();
app.MapRazorComponents<App>() app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode(); .AddInteractiveServerRenderMode(); // Provides server interactivity.
app.Run(); app.Run();