Blazor InputText：有条件地呈现属性

Question

Blazor vRC1

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

例如，我想有条件地输出 autofocus HTML 属性 InputText。

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

Answer 1

您可以尝试以下代码：

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

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

Answer 2

这可以通过@attributes 标签实现。 See more here

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

<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 3

事实证明，如果属性的值为 false 或 null

，Blazor 将不会呈现该属性

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

HTML element attributes are conditionally rendered based on the .NET value. If the value is false or null, the attribute isn't rendered. If the value is true, the attribute is rendered minimized.

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

Blazor InputText：有条件地呈现属性

Blazor InputText: conditionally rendering an attribute

asp.net-core

blazor

blazor-server-side