在使用 Blazor 做动态的跳转的时候,如果在 NavLink 的 href 添加了包含 C# 代码,那么将会提示 RZ9986 组件的属性不支持复杂的内容,如混合 C# 代码和标记等。解决方法是通过按钮加上事件代替

在使用如下面代码在循环里面写跳转逻辑

@for (int i = 1; i < PageCount + 1; i++)
{
        <li>
            <NavLink href="/blog/page/@(i)">@(i)</NavLink>
        </li>
}

此时尝试运行代码将会提示如下错误

严重性	代码	说明	项目	文件	行	禁止显示状态
错误	RZ9986	Component attributes do not support complex content (mixed C# and markup). Attribute: 'href', text: '/blog/page/i'	StaticBlog	g:\lindexi\Blog\StaticBlog\RAZORGENERATE	1	

RZ9986 Component attributes do not support complex content (mixed C# and markup). Attribute: 'href', text: 所说,这里的坑就是 NavLink 的 href 只支持静态的字符串,不支持拼接,因此如官方文档 所说,可以使用 NavigationManager 配合按钮解决此问题

在添加按钮之前,需要知道当前是第几次循环进入,此时需要用到再定义一个变量。如果了解闭包问题的小伙伴应该很好理解,如果不了解的话,就请听我吹一下水。咱需要再写一个变量去获取当前是 for 循环的第几次循环进来,用于传入按钮点击时的事件,如官方文档所说,假设咱在事件的表达式里面使用了循环迭代的变量,因此变量只有一个,因此这个变量的值会被变更,因此做不到让每次循环创建的按钮都知道自己是第几个被创建的

@for (int i = 1; i < PageCount + 1; i++)
{
        // 必须放在标签之前,如下面代码放在标签下面是不对的
        var currentPage = i;
        <li>
            @* 下面这一行代码将会显示为 HTML 内容 *@
            @*var currentPage = i;*@
            <button @onclick="@(e => GotoPage(e, currentPage))">@i</button>
            
            @*<NavLink href="/blog/page/@(i)">@(i)</NavLink>*@
        </li>
}

@code
{
	private void GotoPage(MouseEventArgs e, int currentPage)
    {
        NavigationManager.NavigateTo($"/blog/page/{currentPage}");
    }
}

上面代码有两个注意的地方,第一个地方就是需要创建 currentPage 这个变量,这个变量能固定当前循环进入的值。此外需要将 currentPage 的定义放在标签之前,如上面代码

这样玩就能做到跳转了,对比使用 a 的跳转标签的优势在于用此方法依然是单页应用,而不是重新进入一个新的页面。这句话不理解的小伙伴,请自己修改为 a 跳转对比试试就知道了


本文会经常更新,请阅读原文: https://blog.lindexi.com/post/Blazor-%E7%9A%84-NavLink-%E6%8F%90%E7%A4%BA-RZ9986-%E4%B8%8D%E6%94%AF%E6%8C%81%E5%A4%8D%E6%9D%82%E5%86%85%E5%AE%B9.html ,以避免陈旧错误知识的误导,同时有更好的阅读体验。

如果你想持续阅读我的最新博客,请点击 RSS 订阅,推荐使用RSS Stalker订阅博客,或者前往 CSDN 关注我的主页

知识共享许可协议 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接: https://blog.lindexi.com ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请 与我联系

以下是广告时间

推荐关注 Edi.Wang 的公众号