Csharp Blazor 中的主从导航

为此，您不需要使用布局.

有很多方法可以解决这个问题.解决方案中的复杂程度取决于所需的功能.

这是一个使用天气预报的普通页面版本，演示了一种方法.如果你想要一个香草色的外观，可以创建一个空白布局.

首先，我要向天气预报服务致敬:

public class WeatherForecastService
{
    public IEnumerable<WeatherForecast>? Forecasts { get; private set; }

    public WeatherForecast? Forecast { get; private set; }

    public async Task<bool> GetForecastsAsync()
    {
        if (this.Forecasts is null)
            this.Forecasts = await _getForecastAsync();

        return true;
    }

    public async Task GetForecastAsync(int id)
    {
        // mimic an async fetch
        await Task.Delay(100);
        this.Forecast = Forecasts?.FirstOrDefault(item => item.Id == id);
    }


    private static readonly string[] Summaries = new[]
    {
        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
    };

    private async Task<IEnumerable<WeatherForecast>> _getForecastAsync()
    {
        // mimic an async fetch
        await Task.Delay(100);
        return Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            Id = index,
            Date = DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
            TemperatureC = Random.Shared.Next(-20, 55),
            Summary = Summaries[Random.Shared.Next(Summaries.Length)]
        });
    }
}

查看器组件:

@inject WeatherForecastService ForecastService

@if (ForecastService.Forecast == null)
{
    <p><em>No Record Selected</em></p>
}
else
{
    <div class="container-fluid">
        <div class="row">
            <div class="col-6">Date</div>
            <div class="col-6">@ForecastService.Forecast.Date</div>
        </div>

        <div class="row">
            <div class="col-6">Temperature &deg; C</div>
            <div class="col-6">@ForecastService.Forecast.TemperatureC</div>
        </div>

        <div class="row">
            <div class="col-6">Temperature &deg; F</div>
            <div class="col-6">@ForecastService.Forecast.TemperatureF</div>
        </div>

        <div class="row">
            <div class="col-6">Summary</div>
            <div class="col-6">@ForecastService.Forecast.Summary</div>
        </div>

    </div>
}

@code {
    [Parameter] public int? Id { get; set; }

    private int? currentId;

    protected async override Task OnParametersSetAsync()
    {
        if (this.currentId != Id)
        {
            await ForecastService.GetForecastAsync(this.Id ?? 0);
            this.currentId = this.Id;
        }
    }
}

和List组件:

@inject WeatherForecastService ForecastService

@if (ForecastService.Forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <tbody>
            @foreach (var forecast in this.ForecastService.Forecasts)
            {
                <tr>
                    <td><a href="/fetchdata/@forecast.Id"> @forecast.Date.ToShortDateString()</a></td>
                </tr>
            }
        </tbody>
    </table>
}

@code {

    protected override async Task OnInitializedAsync()
        => await ForecastService.GetForecastsAsync();
}

然后是新的FetchData强:

@page "/fetchdata/{Id:int}"
@page "/fetchdata"

<div class="container-fluid">
    <div class="row">
        <div class="col-4">
            <WeatherList />
            </div>
        <div class="col-8">
            <WeatherViewer Id=this.Id />
        </div>
    </div>

</div>

@code {
    [Parameter] public int? Id { get; set; }
}

注:

• 所有数据和数据管理都驻留在服务中.
• 不需要重新加载页面:只需更改参数.因为导航到的是同一页，所以我们在查看器中使用OnParametersSetAsync来判断我们是否需要刷新所选项目.