I cannot get NavigationManager.NavigateTo(“/servers”) to work in my project. The /servers endpoint is valid with a @page “/servers”. I’ve tried everything and cannot get it to work. I get an Exception of type ‘Microsoft.AspNetCore.Components.NavigationException’ was thrown.
I’ve tried other endpoints I know exist but keep getting NavigationException. NavigationManager.NavigateTo(“/servers”); should take me to the routable servers component after clicking submit and saving my data.
@inject NavigationManager NavigationManager;
NavigationManager.NavigateTo(“/servers”);
@page "/server/{id:int}"
@inject NavigationManager NavigationManager;
<h3>Edit Server</h3>
<br />
<br />
@if (server != null)
{
<EditForm Model=server FormName="formServer" OnValidSubmit="Submit">
<DataAnnotationsValidator></DataAnnotationsValidator>
<ValidationSummary></ValidationSummary>
<InputNumber @bind-Value="server.ServerId" 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></InputText>
</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></InputText>
</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></InputCheckbox>
</div>
</div>
<br />
<button class="btn btn-primary" typeof="submit">Update</button>
<a href="/servers" class="btn btn-primary">Close</a>
</EditForm>
}
@code {
[Parameter]
public int id { get; set; }
[SupplyParameterFromForm]
private Server? server { get; set; }
protected override void OnParametersSet()
{
server ??= ServersRepository.GetServerById(this.id);
}
private void Submit()
{
if (server != null)
ServersRepository.UpdateServer(server.ServerId, server);
try
{
NavigationManager.NavigateTo("/servers");
}
catch (Exception ex)
{
Console.WriteLine($"Error Message: {ex.Message}");
Console.WriteLine($"Inner Error Message: {ex.InnerException}");
}
}
}
Component I’m going to:
@page "/servers"
<h3>Servers</h3>
<br />
<br />
<div class="container-fluid text-center">
<div class="row w-60">
@foreach (var city in cities)
{
<div class="col">
<div class="card">
<img src="@($"/images/{city}.png")" class="card-img-top" alt="...">
<div class="card-body">
<a href="/server/edit" class="btn btn-primary">@city</a>
</div>
</div>
</div>
}
</div>
</div>
<ul>
@foreach (var server in servers)
{
<li>
@server.Name in @server.City is
<span style="color:@((server.IsOnline ? "Green" : "Red"))">
@(server.IsOnline ? "Online" : "Offline")
<a href="/server/@server.ServerId" class="btn btn-link">Edit</a>
</span>
</li>
}
</ul>
@code {
private List<Server> servers = ServersRepository.GetServersByCity("Toronto");
private List<string> cities = CitiesRepository.GetCities();
}
New contributor
bkkirk is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
5
Got it figured out.
App.razor added following line:
<Routes @rendermode="InteractiveServer" />
Program.cs added the following 2 lines:
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode();
New contributor
bkkirk is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Not sure what you are doing but here’s a simplified demo based on your code that works as advertised.
Project setup => Net9.0 – Blazor Web App Template – Server – Global Interactivity.
Server
public class Server
{
public int ServerId { get; set; }
public string City { get; set; } = "[Not Set]";
public string Name { get; set; } = "[Not Set]";
public bool IsOnline { get; set; }
}
Home/Server
@page "/"
@page "/Servers"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<ul>
@foreach (var server in servers)
{
<li>
@server.Name in @server.City is
<span style="color:@((server.IsOnline ? "Green" : "Red"))">
@(server.IsOnline ? "Online" : "Offline")
<a href="/server/@server.ServerId" class="btn btn-link">Edit</a>
</span>
</li>
}
</ul>
@code {
List<Server> servers = new() {
new() { ServerId = 1, City="London", IsOnline = true, Name="Server-1" },
new() { ServerId = 2, City="Paris", IsOnline = true, Name="Server-2" }
};
}
ServerEditForm
@page "/server/{id:int}"
@inject NavigationManager NavigationManager;
<h3>Edit Server</h3>
@if (server != null)
{
<EditForm Model=server FormName="formServer" OnValidSubmit="Submit">
<span>Hello</span>
<div class="text-end m-2">
<button class="btn btn-primary" typeof="submit">Update</button>
<a href="/servers" class="btn btn-primary">Close</a>
</div>
</EditForm>
}
@code {
[Parameter] public int id { get; set; }
private Server? server { get; set; }
protected override async Task OnInitializedAsync()
{
// Fake get a record
server = new() { ServerId = 1, City = "London", IsOnline = true, Name = "Server-1" };
await Task.Delay(100);
}
private async void Submit()
{
// Fake save a record
await Task.Delay(100);
NavigationManager.NavigateTo("/servers");
}
}
The project Repo is here – https://github.com/ShaunCurtis/SO79284001
8