Blazor Web 应用程序中的NavigationManager.NavigateTo()？

Question

我无法让 NavigationManager.NavigateTo("/servers") 在我的项目中工作。 /servers 端点对于@page“/servers”有效。 我已经尝试了一切，但无法让它发挥作用。 我收到抛出“Microsoft.AspNetCore.Components.NavigationException”类型的异常。

我尝试了我知道存在的其他端点，但不断收到 NavigationException。 NavigationManager.NavigateTo("/servers");单击提交并保存我的数据后，应该将我带到可路由服务器组件。

@注入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>
        &nbsp;
        <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}");

        }
    }
}

我要的组件：

@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();


}

Answer 1

不确定您在做什么，但这是一个基于您的代码的简化演示，其工作原理如广告所示。

项目设置 => Net9.0 - Blazor Web 应用程序模板 - 服务器 - 全局交互。

服务器

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; }
}

家庭/服务器

@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" }
    };
}

服务器编辑表单

@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");
    }
}

项目仓库在这里 - https://github.com/ShaunCurtis/SO79284001