Blazor InputText：有条件地呈现属性

Question

Blazor vRC1

我正在寻找一种关于如何有条件地呈现一个<InputText>（或任何与此相关的输入组件）中的属性的简单技术。这在 MVC Razor 中曾经很简单，您只需在@(...)语句中编写条件逻辑即可。现在，书写@(...)在 Razor 语法中具有不同的含义。

例如，我想有条件地输出 .html 的autofocusHTML 属性InputText。

<InputText 
 @bind-Value="@TextProperty"
 @(MyModel.isAutoFocus ? "autofocus" : "") <-  This is invalid razor syntax!
/>

Answer 1

这可以通过@attributes 标签实现。在这里查看更多

基本上，您可以向 InputText 添加 @attributes 标签。这可以绑定到一个参数，或者一个方便的小方法。

<InputText @bind-Value="@TextProperty" @attributes="HandyFunction()" />

@code{
    Dictionary<string,object> HandyFunction()
    {
        var dict = new Dictionary<string, object>();
        if(MyModel.isAutoFocus) dict.Add("autofocus",true);
        return dict;
    }
}

Answer 2

事实证明，Blazor将不会呈现属性如果属性的值false或null

https://docs.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#conditional-html-element-attributes

HTML 元素属性基于 .NET 值有条件地呈现。如果值为 false 或 null，则不会呈现该属性。如果该值为 true，则该属性将呈现为最小化。

<InputText @bind-Value="@TextProperty" autofocus="@MyModel.isAutoFocus" />

Answer 3

你可以试试下面的代码：

<InputText  @bind-Value="@TextProperty"  autofocus="@(MyModel.isAutoFocus)"  />

参考https://github.com/aspnet/AspNetCore/issues/10122