Blazor InputText: условное отображение атрибута - PullRequest
Новая
       77

Blazor InputText: условное отображение атрибута

0 голосов
/ 20 сентября 2019

Blazor vRC1

Я ищу простую технику для условного рендеринга атрибута в пределах <InputText> (или любого из входных компонентов по этому вопросу).Раньше это было просто в MVC Razor, где вы просто пишете условную логику в операторе @(...).Теперь запись @(...) имеет другое значение в синтаксисе Razor.

Например, я хотел бы условно вывести атрибут autofocus HTML для InputText. 

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

Ответы [ 3 ]

3 голосов
/ 20 сентября 2019

Это потенциально может быть достигнуто с помощью тега @attributes. Подробнее здесь

По сути, вы можете добавить тег @attributes к вашему InputText.Это может привязать к параметру или к небольшому удобному методу. 

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

@code{
    Dictionary<string,object> HandyFunction()
    {
        var handy = new Dictionary<string, object>();
        if(MyModel.isAutoFocus) dict.Add("autofocus",true);
        return handy;
    }
}
2 голосов
/ 20 сентября 2019

Вы можете попробовать код ниже: 

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

См. https://github.com/aspnet/AspNetCore/issues/10122

0 голосов
/ 20 сентября 2019

Как оказалось, 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" />
...