在Blazor組件中獲取當前的網址

Question

在Blazor組件中獲取當前的網址

asp.net-core blazor c#

題

我需要知道當前頁面的網址，以檢查是否必須將某些樣式應用於元素。下面的代碼是一個示例。

@using Microsoft.AspNetCore.Blazor.Services
@inject IUriHelper UriHelper
@implements IDisposable

<h1>@url</h1>
<nav>
    <div class="nav-wrapper">
        <a href="#" class="brand-logo">Blazor</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li>
                <NavLink href="/" Match=NavLinkMatch.All>
                    Home
                </NavLink>
            </li>
            <li>
                <NavLink href="/counter">
                    Counter
                </NavLink>
            </li>
            <li>
                <NavLink href="/fetchdata">
                    Fetch data
                </NavLink>
            </li>
        </ul>
    </div>
</nav>

@functions {

    private string url = string.Empty;

    protected override void OnInit()
    {
        url = UriHelper.GetAbsoluteUri();
        UriHelper.OnLocationChanged += OnLocationChanged;
    }

    private void OnLocationChanged(object sender, LocationChangedEventArgs e)
    {
        url = newUriAbsolute;
    }

    public void Dispose()
    {
        UriHelper.OnLocationChanged -= OnLocationChanged;
    }
}

我使用了Blazor信息庫中NavLink組件中使用的相同方法，但是沒有用。有任何想法嗎？。

Carlos L.

在 Stack Overflow 上查看更多

dani herrera · Accepted Answer · 11/25/2019 7:46:56 AM

使用NavigationManager類中的Uri屬性。

怎麼運行的

從注入中獲取它，然後才能在.razor頁面上使用它：

@inject NavigationManager MyNavigationManager

或者，如果您更喜歡“代碼隱藏”體驗，請在.cs這樣：

using Microsoft.AspNetCore.Components;
...
[Inject] 
public NavigationManager MyNavigationManager {get; set;}

樣品

@page "/navigate"
@inject NavigationManager MyNavigationManager

<h1>Current url</h1>

<p>@(MyNavigationManager.Uri)</p>

有關導航的更多信息（NavigateTo，BaseUri，ToAbsoluteUri，ToBaseRelativePath等），位於： URI和導航狀態助手

NavigationManager速查表

MyNavigationManager.Uri
#> https://localhost:5001/counter/3?q=hi

MyNavigationManager.BaseUri`
#> https://localhost:5001/

MyNavigationManager.NavigateTo("http://new location")
#> Navigates to new location

MyNavigationManager.LocationChanged
#> An event that fires when the navigation location has changed.

MyNavigationManager.ToAbsoluteUri("pepe")
#> https://localhost:5001/pepe

MyNavigationManager.ToBaseRelativePath( MyNavigationManager.BaseUri)
#> counter/3?q=hi

Helper: AddQueryParm( "q2", "bye" )
#> https://localhost:5001/counter/3?q=hi&q2=bye

Helper: GetQueryParm( "q" )
#> hi

輔助程式碼：

@code {

[Parameter]
public string Id { get; set; }

// blazor: add parm to url
string AddQueryParm(string parmName, string parmValue)
{
    var uriBuilder = new UriBuilder(MyNavigationManager.Uri);
    var q = System.Web.HttpUtility.ParseQueryString(uriBuilder.Query);
    q[parmName] = parmValue;
    uriBuilder.Query = q.ToString();
    var newUrl = uriBuilder.ToString();
    return newUrl;
}

// blazor: get query parm from url
string GetQueryParm(string parmName)
{
    var uriBuilder = new UriBuilder(MyNavigationManager.Uri);
    var q = System.Web.HttpUtility.ParseQueryString(uriBuilder.Query);
    return q[parmName] ?? "";
}

}

在Blazor組件中獲取當前的網址

題

Fastest Entity Framework Extensions

熱門答案

怎麼運行的

樣品

NavigationManager速查表

Performance

Expression Evaluator