Blazor 导航

最新推荐文章于 2024-09-19 23:24:46 发布

ow.z

最新推荐文章于 2024-09-19 23:24:46 发布

阅读量112

点赞数

分类专栏： Maui 文章标签： wpf c#

本文链接：https://blog.csdn.net/weixin_45876789/article/details/134152354

版权

Maui 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细描述了在Blazor项目中创建和使用INavigationService接口，实现页面跳转，以及在Result页面中通过InfiniteScroll和按钮触发导航。同时展示了服务注册和依赖注入的过程。

摘要由CSDN通过智能技术生成

1、添加接口

INavigationService.cs

namespace MauiApp2.Library.Services;

public interface INavigationService
{
    // /detail/1
    // /detail/?id=1
    // http://no.such.url/showNews.aspx?id=1
    void NavigationTo(string uri);

    // /showNews new NewObject{ Title = "",Countent = "" }
    void NavigationTo(string uri, object parameter);
}

public static class NavigationServiceContents
{
    public const string TodayPage = "/today";
    public const string InitializationPage = "/initialization";
    public const string ResultPage = "/result";
    public const string DetailPage = "/detail";
}

2、实现接口

NavigationService.cs

using Microsoft.AspNetCore.Components;

namespace MauiApp2.Library.Services;

public class NavigationService : INavigationService
{
    private readonly NavigationManager _navigationManager;

    public NavigationService(NavigationManager navigationManager) => _navigationManager = navigationManager;

    public void NavigationTo(string uri) => _navigationManager.NavigateTo(uri);

    public void NavigationTo(string uri, object parameter)
    {
        throw new NotImplementedException();
    }
}

3、添加页面

Detail.razor

@page "/detail/{id}"

<h3>@Id</h3>

Detail.razor.cs

using Microsoft.AspNetCore.Components;

namespace MauiApp2.Library.Pages;

public partial class Detail
{
    [Parameter]
    public string? Id { get; set; }

}

4、添加入口

Result.razor

@page "/result"
@using Sve.Blazor.InfiniteScroll.Components

@inject IPoetryStorage _poetryStorage
@inject INavigationService _navigationService

<Button OnClick='()=>_navigationService.NavigationTo("/detail/1")'>详情</Button>

<!-- 无限列表 -->
<InfiniteScroll ObserverTargetId="observerTarget" ObservableTargetReached=" _ => LoadMoreAsync()">
    @foreach (var poetry in _poetries)
    {
        <div>
            <Card>
                <BodyTemplate>
                    <span style="font-weight:bold;color:#0078d4">@poetry.Name</span>
                    <div class="shim-2xs"></div>
                    @poetry.Dynasty @poetry.Author
                    <div class="shim-2xs"></div>
                    @poetry.Snipper
                </BodyTemplate>
            </Card>
        </div>
        <div class="shim-xl"></div>
    }
    <!--加载更多-->
    <div id="observerTarget">@_status</div>
</InfiniteScroll>

5、注册依赖

Program.cs

using MauiApp2.Library.Services;
using MauiApp2.Web.Data;
using MauiApp2.Web.Services;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();
builder.Services.AddBootstrapBlazor();
builder.Services.AddScoped<IPoetryStorage, PoetryStorage>();
builder.Services.AddScoped<IPreferenceStorage, PreferenceStorage>();

builder.Services.AddScoped<INavigationService, NavigationService>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
}


app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();