Blazor条件if语句用于onclick

Question

如果IsActive为true，则我有一个应该有onclick属性的span。否则，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?" : "")

- levis84

Answer 1

你可以执行以下操作。

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

我认为你真正需要的是Lambda表达式。

- Gary Chan

---

这不一样，特别是如果是Blazor服务器，在问题示例中，请求不会命中服务器。在您的示例中，它们会命中服务器，这会对性能产生影响。 - koolaang

@koolaang 你能澄清一下你所说的“不同”是什么意思吗？ - Gary Chan

我发现这个答案对于处理 Click 事件和 Nullable 引用类型警告非常有用。从 .NET 6 开始，它们默认启用新项目。 - Tegge

Answer 2

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

关于按钮的提示，您可以像这样在该属性中添加C#布尔属性：

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

- Umair

---

谢谢 - 最终将其转换为按钮并使用禁用属性。 - levis84

更新了答案，添加了一个小提示，因为您正在使用一个按钮。 - Umair

从上下文来看，我认为应该是 disabled="@(!IsActive)"。 - H H

Answer 3

其他答案有点错误。将事件方法注册为lambda表达式和不必要时不注册事件之间有区别。

如果将条件移动到lambda函数中，每次单击该方法时都会运行。这会对您的应用程序产生性能影响，特别是在Blazor Server上，因为需要往返传输并且逻辑发生在服务器上。

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

如果事件不处于活动状态，则不会注册该事件，因此不会对您的服务器造成任何负载。

来自Blazor Repository Tests

- koolaang

---

根据文档（https://learn.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-5.0#blazor-server），UI事件是从浏览器发送到服务器的。 我认为这将包括所有的Blazor事件，因为浏览器通过SignalR连接与后端服务器相连接。 - Gary Chan

但是，如果没有用户界面，甚至没有流量到服务器。这就是我的全部观点。使用这种方法，您不会注册UI事件。 - koolaang

@koolaang 这个服务器-客户端反馈循环有多慢/快？我刚开始使用Blazor，还没有推出任何生产代码。 - Gilbert

Answer 4

对于那些遇到类似问题的人，我想添加一些内容：

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

- devbf

---

好的选择也是如此。 - levis84

我希望有人能回答这个问题，避免所有不必要的绑定。 - Brian Parker

问题：那么在添加组件后，我们仍然在其中使用if/else吗？这不是一样的吗？ - Umair

不，我不这么认为。例如，如果您在一个div内有5个div，并且其中一个情况下背景应该是蓝色，另一个情况下应该是绿色：那么您将在if语句中有5个div，在else语句中也有5个div。如果您将它们重构为具有一个参数@backgroundcolor的组件，则可以节省编写主页面中的5个div，但组件中也只有5个div，而不是10个。 - devbf

是的，这正是我所说的。例如，您分享组件时将会有更少的代码，这是最好的做法。如果您不必共享该代码，则新组件本质上与在页面内完成相同的事情。 - Umair