如何停止 Blazor @onclick 重新渲染页面

Question

我正在使用 Blazor Server 应用程序。

我有一个控件，当使用 @onclick 事件处理程序点击它时，我想在单击事件方法中使用 NavigationManager 导航到新页面。无论控件是什么（按钮、a、tr 等），它们都具有相同的行为。

如果我在 HTML 中设置断点，可以看到当前页面在转到新页面之前重新呈现。

重现此行为的简单方法是创建一个新的 Blazor 项目，在 counter.razor 页面更改代码为：

@page "/counter"

<h1>Counter</h1>

@if (1 == 1)
{
<p>Current count: @currentCount</p>
}

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
private void IncrementCount()
    {
        //currentCount++;
    }
}

在HTML代码行"@if (1 == 1)"上设置断点。

当按钮被点击时，它会调用点击事件并且什么都不做（代码被注释了），然后重新渲染页面，断点就会被触发。

如果我在点击事件中添加调用navigationManager导航离开页面的代码，当页面没有改变时，它会在离开页面之前重新渲染。

添加onclick:preventDefault和/或@onclick:stopPropagation并不能改变这一点。

唯一有效的方法是添加：

    private bool c_blnStopRendering = false;

    protected override bool ShouldRender()
    {
        if (c_blnStopRendering == true) { return false; }
        return base.ShouldRender();
    }

在点击事件中设置 c_blnStopRendering = true;，但这似乎过度并且需要在每个需要添加的地方手动添加。

- Scott

---

渲染应该是一项非常廉价的操作。为什么你想要停止它，它给你带来了什么问题？ - Peter Morris

嗨Peter，感谢您的回复。我想停止这种行为的主要原因是因为我有一个自定义的网格组件，它有一个垂直滚动条，如果我向下滚动并点击底部附近的项目，就在页面离开之前，它会重新渲染，并且在短暂的一瞬间你会看到网格重新绘制回到顶部项目（不是我滚动到的位置）。我想其他原因是，在我阅读过的所有内容中，我的印象是Blazor会扫描DOM，并仅在上次呈现时有更改时才重新呈现，在我的例子中，显然HTML没有更改。 - Scott

你的假设是正确的。Blazor会构建一个渲染树，将其与先前的渲染树进行比较，并仅更新差异。你能否重现这个问题？这是你实际遇到的问题。 - Peter Morris

感谢确认，Peter。这段代码是从一个更大的项目中提取出来的，我暂时没有时间制作一个能够重现问题的较小示例。在离开页面之前，滚动变化的重新渲染非常快，如果需要的话，我可以通过ShouldRender方法进行解决。感谢您的帮助。 - Scott

Answer 1

目前这是唯一的方法。在待处理列表中有一个请求https://github.com/dotnet/aspnetcore/issues/18919

- Peter Morris

Answer 2

我想知道你在这方面的进展如何。我遇到了完全相同的问题（我只想导航到没有任何重新渲染的页面）。重写ShouldRender方法返回false，会停止一切 - 也就是不会导航到URL。然而，我正在导航到相同的页面，但是查询字符串中的参数不同。当我发现NavigateTo方法中有一个可选参数（public void NavigateTo(string uri, bool forceLoad = false);）时，我似乎解决了这个问题（我想！）。我将其设置为true，现在似乎没问题了。只是对你的经验感兴趣。

- Phil Catterall

---

这并没有真正回答问题。如果您有不同的问题，可以通过点击提问来提出。如果您想在此问题获得新的答案时得到通知，您可以关注此问题。一旦您拥有足够的声望，您还可以添加悬赏以吸引更多关注。- 来自审核 - Patrick