如何实时显示/隐藏元素(Blazor)



我有一个图像,我想只在用户填写完所有文本字段后显示。

我尝试过使用disabled属性,但似乎不起作用。还有其他见解吗?

这是我当前的代码:

<EditForm EditContext="@EditContext" style="max-width:800px;" onkeydown="javascript: DisableEnterKey();">
<FluentValidator />
<img src="images/approval-16-grey.ico" alt="Image" disabled="@OkayDisabled">

<p class="statp">How many families and/or individuals are living on your land?</p><br />
<label class="statlabel" for="amountOfFamilies">Amount of families:</label><br />
<InputNumber id="fams" for="indivNum" class="input" @bind-Value="@familyData.IndividualAmount" onwheel="this.blur()" placeholder="Families..." autofocus />
<ValidationMessage For="() => familyData.IndividualAmount" />
<br /><hr class="statHR" />
<label class="statlabel" for="amountOfIndividuals">Amount of single individuals: </label><br />
<InputNumber id="individuals" for="famNum" class="input" @bind-Value="@familyData.FamilyAmount" onwheel="this.blur()" placeholder="Individuals..."/>
<ValidationMessage For="() => familyData.FamilyAmount" />
<br /><hr class="statHR" />
<label class="statlabel" for="names"> Please enter all of the names here:</label><br />
<InputTextArea id="names" class="textArea" rows="4" cols="18" @bind-Value="@PersonName" placeholder="Names of all individuals..." />
<ValidationMessage For="() => familyData.PersonName" />

</EditForm>
</div>
</ul>

@code 
{
private EditContext? EditContext;
public FamilyData Model = new FamilyData();
protected string OkayDisabled { get; set; } = "disabled";
protected override void OnInitialized()
{
EditContext = new EditContext(Model);
EditContext.OnFieldChanged += EditContext_OnFieldChanged;
base.OnInitialized();
}
protected override void OnAfterRender(bool firstRender)
{
base.OnAfterRender(firstRender);
SetOkDisabledStatus();
}
private void EditContext_OnFieldChanged(object? sender, FieldChangedEventArgs e)
{
SetOkDisabledStatus();
}
private void SetOkDisabledStatus()
{
if(EditContext.Validate())
{
OkayDisabled = null;
}
else
{
OkayDisabled = "disabled";
}
}
}

hiddenhtml属性也可以隐藏元素。

<p hidden>This paragraph should be hidden.</p>

绑定到模型:

<p hidden="@HideLabel">I am Hidden When HideLabel == true</p>
<p hidden="@(!HideLabel)">I am Hidden when Hidelabel == false</p>

<button @onclick="@Toggle">Show/Hide</button>
@code {
private bool HideLabel { get; set; } = false;
private void Toggle()
{
HideLabel =   !HideLabel;
}      
} 

编辑:您也可以使用CSS类来隐藏/显示元素:

<div class="font-italic @(HideLabel ? "d-none" : "d-show")">
I am Hidden When HideLabel == true
</div>

OkayDisabled更改为bool,然后围绕您的图像执行此

@if (!OkayDisabled)
{
<img src=".....whatever" etc />
}

您可能还想在使用@bind的任何位置添加@bind:event="oninput"

与其将标志绑定到禁用的属性(图像的禁用属性只会使其变灰(,不如将其绑定到具有display: none;的css类

.hidden {
display: none;
}
<img class="@(ShouldShowImage? "hidden" : string.Empty)">

没有在editform中使用它,但应该可以使用

@if(OkayDisabled) 
{
<img src="images/approval-16-grey.ico" >

相关内容

  • 没有找到相关文章

最新更新