Blazor InputText：有條件地呈現屬性

Blazor vRC1

我正在尋找一種關於如何有條件地在一個<InputText>（或任何輸入組件）內渲染屬性的簡單技術。這在 MVC Razor 中曾經很簡單，您只需在@(...)語句中編寫條件邏輯。現在，書寫@(...)在 Razor 語法中具有不同的含義。

例如，我想有條件地autofocus輸出InputText.

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

事實證明，如果屬性的值為或，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" />

這可以通過@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;
   }
}

引用自：https://stackoverflow.com/questions/58020174