用于 onclick 的 Blazor 条件 if 语句答案

【问题标题】：Blazor conditional if statement for onclick用于 onclick 的 Blazor 条件 if 语句
【发布时间】：2020-12-23 13:59:47
【问题描述】：

如果 IsActive 布尔值为真，我有一个跨度应该有一个 onclick 属性。否则 span 应该没有 onclick 属性。

例如

@if (IsActive == true)
{
    <span @onclick="@(e => Go.DoSomething("please"))">
        @s.DisplayText
    </span>
}
else
{
    <span>
        @s.DisplayText
     </span>
}

有没有办法避免使用三元运算符的重复代码？例如

@(IsActive == true ? "add onclick method somehow?" : "")

【问题讨论】：

标签： asp.net-core razor blazor blazor-server-side

【解决方案1】：

添加条件IsActive == true 的更好方法是在Go.DoSomething 方法中。但理想情况下，如果按钮可点击，我会使用它，因为我们可以向按钮添加 disabled 属性，在您的情况下，您可以在 onclick 方法中添加条件。

只是按钮的提示，您可以在该属性中添加您的 c# 布尔属性，如下所示：

<button disabled="@IsActive">Save</button>

【讨论】：

谢谢 - 最终转换为按钮并使用 disabled 属性
更新了答案以在您使用按钮时添加一个小提示
从上下文我认为应该是disabled="@(!IsActive)"。

【解决方案2】：

您可以执行以下操作。

<span @onclick="@(e => { if (IsActive) Go.DoSomething("please");})">
    @s
</span>

Lambda Expression 是我认为您真正想要的。

【讨论】：

这不一样，特别是如果它是 Blazor 服务器，在问题示例中，请求不会命中服务器。在您的示例中，它们会影响性能。
@koolaang 你能解释一下'不一样'是什么意思吗？

【解决方案3】：

只是想为有类似问题的人添加一些东西：

如果您的 HTML 代码比单个 span 多，并且由于 if-else 语句而需要两次，我将创建自己的 Blazor 组件（例如 MyComponent.razor）并使用组件参数。这样你就不会在 if-else-statement 中有太多重复的代码了。

【讨论】：

也是不错的选择
我希望有人能回答这个问题并避免所有不必要的绑定。
问题：那么在添加一个组件之后，我们仍然在其中使用 if/else 吗？那不是一样的吗？
不一定相同，例如，您可以创建一个名为 color 的组件参数，并在 if 语句中使用 color=blue 和在 else 语句中使用 color=green 调用它。您还需要 if-else-statement，这是真的。此解决方案不像三元运算符，但它可能会为您节省一些关于组件大小的代码。
主页面的代码确实会少一些，但还是一样的“if”新组件没有在项目的其他任何地方共享。

【解决方案4】：

其他答案有点错误。将事件方法注册为 lambda 与非必要时不注册事件是有区别的。

如果您将条件移至 lambda 函数，任何时候有人点击您的方法都会运行。它会对您的应用程序的性能产生影响，特别是如果它是 Blazor 服务器，因为往返必须发生并且逻辑发生在您的服务器上。

@ondclick=@(Active?() => Go.DoSomething:null)

如果事件不活动，则不会注册该事件，因此您的服务器上没有负载。

来自Blazor Repository Tests

【讨论】：

根据文档（docs.microsoft.com/en-us/aspnet/core/blazor/…），UI 事件是从浏览器发送到服务器的。鉴于浏览器通过 SignalR 连接连接到后端服务器，我认为这将是所有 Blazor 事件。
但如果连 UI 都没有，那么服务器就没有流量。这就是我的全部观点。使用这种方法，您无需注册 UI 事件。
@koolaang 这个服务器-客户端反馈循环有多慢/快。我刚开始使用 Blazor，还没有推送任何生产代码。