在 Blazor 组件中获取当前 URL [英] Get current URL in a Blazor component

问题描述

我需要知道当前页面的 URL 以检查是否必须将某种样式应用于元素.下面的代码是一个例子.

 @using Microsoft.AspNetCore.Blazor.Services@inject IUriHelper UriHelper@implements IDisposable<h1>@url</h1><导航><div class="nav-wrapper"><a href="#";class=brand-logo">Blazor</a><ul id="nav-mobile";class =正确隐藏在中间和向下"><li><NavLink href="/";Match=NavLinkMatch.All>家</NavLink><li><NavLink href="/counter">柜台</NavLink><li><NavLink href="/fetchdata">获取数据</NavLink>

</nav>@职能 {私人字符串 url = string.Empty;受保护的覆盖 void OnInit(){url = UriHelper.GetAbsoluteUri();UriHelper.OnLocationChanged += OnLocationChanged;}私有无效 OnLocationChanged(对象发送者，LocationChangedEventArgs e){url = newUriAbsolute;}公共无效处置(){UriHelper.OnLocationChanged -= OnLocationChanged;}}

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

解决方案

使用 NavigationManager 中的 Uri 属性强>类.

工作原理

在 .razor 页面上使用之前从注入中获取它:

@inject NavigationManager MyNavigationManager

或者像这样在 .cs 文件中，如果你喜欢代码隐藏"经验:

使用 Microsoft.AspNetCore.Components;...[注入]公共导航管理器 MyNavigationManager {get;放;}

示例

@page "/navigate";@inject NavigationManager MyNavigationManager<h1>当前网址</h1><p>@(MyNavigationManager.Uri)</p>

有关导航(NavigateTo、BaseUri、ToAbsoluteUri、ToBaseRelativePath 等)的更多信息，请访问:URI 和导航状态助手

NavigationManager 备忘单

MyNavigationManager.Uri#>https://localhost:5001/counter/3?q=hiMyNavigationManager.BaseUri#>https://localhost:5001/MyNavigationManager.NavigateTo("http://new location")#>导航到新位置MyNavigationManager.LocationChanged#>当导航位置改变时触发的事件.MyNavigationManager.ToAbsoluteUri(pepe")#>https://localhost:5001/pepeMyNavigationManager.ToBaseRelativePath(MyNavigationManager.Uri)#>计数器/3?q=hiHelper: AddQueryParm( "q2", "bye")//(*1)#>https://localhost:5001/counter/3?q=hi&q2=bye助手:GetQueryParm(q")#>你好

(*1) Net6 引入了 GetUriWithQueryParameter.更多信息:操作来自 Blazor 的查询字符串

助手代码:

@code {[范围]公共字符串 ID { 获取；放;}//Blazor:将参数添加到 URL字符串 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();返回新网址；}//Blazor:从 URL 获取查询参数字符串 GetQueryParm(string parmName){var uriBuilder = new UriBuilder(MyNavigationManager.Uri);var q = System.Web.HttpUtility.ParseQueryString(uriBuilder.Query);返回 q[parmName] ??";}}

I need to know the URL of the current page in order to check if I have to apply a certain style to an element. The code below is an example.

    @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;
        }
    }

I used the same approach used in the NavLink component in the Blazor repository, but it did not work. Any ideas?.

解决方案

Use the Uri property from the NavigationManager class.

How it works

Get it from injection before using it on .razor pages:

@inject NavigationManager MyNavigationManager

Or like this in a .cs file if you prefer the "code-behind" experience:

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

Sample

@page "/navigate"
@inject NavigationManager MyNavigationManager

<h1>Current URL</h1>

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

More about navigation (NavigateTo, BaseUri, ToAbsoluteUri, ToBaseRelativePath, ... ) at: URI and navigation state helpers

NavigationManager cheatsheet

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" ) // (*1)
#> https://localhost:5001/counter/3?q=hi&q2=bye

Helper: GetQueryParm( "q" )
#> hi

(*1) Net6 introduces GetUriWithQueryParameter. More info: Manipulate the query string from Blazor

Helpers code:

@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] ?? "";
    }

}

这篇关于在 Blazor 组件中获取当前 URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！