라우팅 및 탐색 (Routing and Navigation 2/2)

URI 및 탐색 상태 도우미

위치 변경

LocationChanged 이벤트는 

 

LocationChanged 이벤트의 경우 LocationChangedEventArgs는 탐색 이벤트에 대해 다음 정보를 제공합니다.

• Location: 새 위치의 URL입니다.
• IsNavigationIntercepted: true인 경우 Blazor는 브라우저에서 탐색을 가로챘습니다. false인 경우 NavigationManager.NavigateTo에서 탐색이 발생했습니다.

다음 구성 요소는

• NavigateTo를 사용하여 단추를 선택하면 앱의 Counter 구성 요소(Pages/Counter.razor)로 이동합니다.
• NavigationManager.LocationChanged를 구독하여 위치 변경 이벤트를 처리합니다.

 

예제

@page "/navigationmanager"
@using Microsoft.Extensions.Logging 
@implements IDisposable
@inject ILogger<NavigationManagerTest> Logger
@inject NavigationManager NavigationManager
<h3>NavigationManagerTest</h3>
<button class="btn btn-primary" @onclick="NavigateToCounterComponent">
    Go to Counter
</button>

@code {
  private void NavigateToCounterComponent()
    {
        NavigationManager.NavigateTo("counter");
    }

    protected override void OnInitialized()
    {
        NavigationManager.LocationChanged -= HandleLocationChanged;
        NavigationManager.LocationChanged += HandleLocationChanged;
    }

    private void HandleLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        Logger.LogInformation("URL of new location: {Location}", e.Location);
    }
	
    // dispose 를 통해 gac 에 components (this) 의 garbage 수집이 가능하도록 합니다.
    public void Dispose()
    {
        NavigationManager.LocationChanged -= HandleLocationChanged;
    }
}

쿼리 문자열

[Parameter]
[SupplyParameterFromQuery(Name = "{QUERY PARAMETER NAME}")]
public string? {COMPONENT PARAMETER NAME} { get; set; }

 

/querystrings?filter=scifi stars&page=3&star=LeVar Burton&star=Gary Oldman

 

위와 같은 url 을 보냈다고 가정했을때 예제 코드를 통해서 어떤 내용이 찍히는지 확인해 보면

• Filter 속성이 scifi stars로 확인됩니다.
• Page 속성이 3으로 확인됩니다.
• Stars 배열은 star(Name = "star")라는 쿼리 매개 변수에서 채워지고 LeVar Burton 및 Gary Oldman으로 확인됩니다.

예제 코드

@page "/querystrings"

<h1>Query Strings Example</h1>

<p>Filter: @Filter</p>

<p>Page: @Page</p>

@if (Stars is not null)
{
    <p>Assignees:</p>

    <ul>
        @foreach (var name in Stars)
        {
            <li>@name</li>
        }
    </ul>
}

@code {
    [Parameter]
    [SupplyParameterFromQuery]
    public string? Filter { get; set; }

    [Parameter]
    [SupplyParameterFromQuery]
    public int? Page { get; set; }

    [Parameter]
    [SupplyParameterFromQuery(Name = "star")]
    public string[]? Stars { get; set; }
}

 

Query 를 추가 하거나 update 해서 가져오는 방법 (원본이 변화되는건 아님)

NavigationManager.GetUriWithQueryParameter("{NAME}", {VALUE})

@page "/querystrings"
@inject NavigationManager NavigationManager

<h1>Query Strings Example</h1>

<p>Filter: @Filter</p>

<p>Page: @Page</p>

@if (Stars is not null)
{
    <p>Assignees:</p>

    <ul>
        @foreach (var name in Stars)
        {
            <li>@name</li>
        }
    </ul>
}

<button class="btn btn-primary" @onclick="UpdateQueryString">
    Update Filter=abcd
</button>

<p>@Data</p>

@code {
    [Parameter]
    [SupplyParameterFromQuery]
    public string? Filter { get; set; }

    [Parameter]
    [SupplyParameterFromQuery]
    public int? Page { get; set; }

    [Parameter]
    [SupplyParameterFromQuery(Name = "star")]
    public string[]? Stars { get; set; }

    public string Data { get; set; } = string.Empty;
    private void UpdateQueryString()
    {
       Data =  NavigationManager.GetUriWithQueryParameter("Filter", "abcd");
    }

    protected override Task OnInitializedAsync()
    {
        return base.OnInitializedAsync();
    }
}

Filter 가 abcd

 

NavigationManager.GetUriWithQueryParameters({PARAMETERS})

 

@page "/querystrings"
@inject NavigationManager NavigationManager

<h1>Query Strings Example</h1>

<p>Filter: @Filter</p>

<p>Page: @Page</p>

@if (Stars is not null)
{
    <p>Assignees:</p>

    <ul>
        @foreach (var name in Stars)
        {
            <li>@name</li>
        }
    </ul>
}

<button class="btn btn-primary" @onclick="UpdateQueryString">
    Update Filter=abcd
</button>

<button class="btn btn-primary" @onclick="UpdateQueryStrings">
    UpdateQueryStrings  Filter2=abcd2  Filter3=1234
</button>

<p>@Data</p>

@code {
    [Parameter]
    [SupplyParameterFromQuery]
    public string? Filter { get; set; }

    [Parameter]
    [SupplyParameterFromQuery]
    public int? Page { get; set; }

    [Parameter]
    [SupplyParameterFromQuery(Name = "star")]
    public string[]? Stars { get; set; }

    public string Data { get; set; } = string.Empty;
    private void UpdateQueryString()
    {
        Data =  NavigationManager.GetUriWithQueryParameter("Filter", "abcd");
    }

    private void UpdateQueryStrings()
    {
        var dic = new Dictionary<string, object?>()
        {
            {"Filter2", "abcd2"},
            {"Filter3", 1234},
            
        };

        Data =  NavigationManager.GetUriWithQueryParameters(dic);
    }

    protected override Task OnInitializedAsync()
    {
        return base.OnInitializedAsync();
    }

}

Navigating 을 이용한 콘텐츠와의 상호작용

페이지 전환이 발생하고 있음을 나타낼수 있다.

@using Microsoft.AspNetCore.Components.Routing

@using Microsoft.AspNetCore.Components.Routing
....
<Navigating>
    <p>Loading the requested page&hellip;</p>
</Navigating>

 

 

OnNavigateAsync 를 사용하여 탐색 이벤트 처리

<Router AppAssembly="@typeof(Program).Assembly" 
    OnNavigateAsync="@OnNavigateAsync">
    ...
</Router>

@code {
    private async Task OnNavigateAsync(NavigationContext args)
    {
        ...
    }
}

 

 

관련영상

https://youtu.be/A4-PPC4VxKY