C# 获取Blazor组件中的当前URL

我需要知道当前页面的URL，以便检查是否必须对元素应用某种样式。下面的代码是一个示例

@使用Microsoft.AspNetCore.Blazor.Services
@注射IUriHelper UriHelper
@实现IDisposable
@网址


家


柜台


获取数据


@功能{
私有字符串url=string.Empty；
受保护的覆盖void OnInit（）
{
url=UriHelper.GetAbsoluteUri（）；
UriHelper.OnLocationChanged+=OnLocationChanged；
}
私有void OnLocationChanged（对象发送方，LocationChangedEventArgs e）
{
url=newUriAbsolute；
}
公共空间处置（）
{
UriHelper.OnLocationChanged-=OnLocationChanged；
}
}

---

我使用了Blazor存储库中NavLink组件中使用的相同方法，但它不起作用。有什么想法吗？

连接到页面或组件中的

OnLocationChanged

事件是没有用的，因为它们会根据需要加载和处理

---

您应在app.cshtml中注册此事件，因为该事件不会被处理。

您应收听IUriHelper的位置更改，该更改会触发函数执行您想要的操作，例如：

@using Microsoft.AspNetCore.Blazor.Components
@using Microsoft.Extensions.Logging
@inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper
@inject ILogger<NavItem> logger

<li class="m-menu__item @(Active ? "m-menu__item--active" : "")">
    <a href=@Url class="m-menu__link ">
        <span class="m-menu__item-here"></span>
        <i class="m-menu__link-icon @Icon"></i>
        <span class="m-menu__link-text">@Text</span>
    </a>
</li>

@functions {
    protected override void OnInit()
    {
        UriHelper.OnLocationChanged += OnLocationChanges;
    }
    [Parameter]
    private string Url { get; set; }
    [Parameter]
    private string Icon { get; set; }
    [Parameter]
    private string Text { get; set; }
    private bool Active = false;
    private void OnLocationChanges(object sender, string newLocation)
    {
        bool active = newLocation.Contains(Url);
        if(active != Active) //Only re-render the components that need it
        {
            Active = active;
            StateHasChanged();
            logger.LogInformation("Location Change To:" + newLocation);
        }
    }
}

@使用Microsoft.AspNetCore.Blazor.Components
@使用Microsoft.Extensions.Logging
@注入Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper
@ILogger记录器


@功能{
受保护的覆盖void OnInit（）
{
UriHelper.OnLocationChanged+=OnLocationChanges；
}
[参数]
私有字符串Url{get；set；}
[参数]
私有字符串图标{get；set；}
[参数]
私有字符串文本{get；set；}
private bool Active=false；
私有void OnLocationChanges（对象发送方、字符串newLocation）
{
bool active=newLocation.Contains（Url）；
if（active！=active）//仅重新渲染需要它的组件
{
主动=主动；
StateHasChanged（）；
logger.LogInformation（“位置更改为：“+newLocation”）；
}
}
}

使用

导航管理器

类中的

Uri

属性

工作原理 在

.razor

页面上使用之前，先从注射中获取：

@inject NavigationManager MyNavigationManager

如果您喜欢“代码隐藏”体验，也可以在

.cs

文件中这样做：

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

样品 助手代码：

@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 the URL
    string GetQueryParm(string parmName)
    {
        var uriBuilder = new UriBuilder(MyNavigationManager.Uri);
        var q = System.Web.HttpUtility.ParseQueryString(uriBuilder.Query);
        return q[parmName] ?? "";
    }

}

---

GetAbsoluteUri（）适用于我，到底是什么问题？从v0.8.0开始，当使用服务器端模式时，您应该使用：

@inject Microsoft.AspNetCore.Components.Services.IUriHelper UriHelper

当使用客户端模式时：

@inject Microsoft.AspNetCore.Blazor.Services.WebAssemblyUriHelper

@Henry Rodriguez，不，你错了。正确的方法是注入IUriHelper，而不是实现。如果用户试图通过Url地址强制转到另一个页面，则该方法无效。此UriHelper.OnLocationChanged事件具有新参数，这些新参数导致此示例中的.netCore 3 preview6出错。应该是：private void OnLocationChanges（对象发送者，LocationChangedEventArgs e）此答案适用于过时版本的blazor，请立即使用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.Uri)
#> 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 the URL
    string GetQueryParm(string parmName)
    {
        var uriBuilder = new UriBuilder(MyNavigationManager.Uri);
        var q = System.Web.HttpUtility.ParseQueryString(uriBuilder.Query);
        return q[parmName] ?? "";
    }

}