CODEWITHSUNDEEP
formsblazor
Bryce Steuer
Bryce Steuer

Reputation: 516

How to show/hide an element in real time (Blazor)?

I have an image I would like to display only after a user has filled in all text fields.

I have tried using disabled attribute, but that does not seem to work. Any other insights?

Here is my current code:

<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";
            }
        }
    }

Upvotes: 36

Views: 69925

Answers (4)

Nechemia Hoffmann
Nechemia Hoffmann

Reputation: 2508

Instead of binding your flag to the disabled attribute (an image's disabled attribute just grays it out), I would bind it to a css class that has display: none;

.hidden {
    display: none;
}

<img class="@(!ShouldShowImage? "hidden" : string.Empty)">

Upvotes: 8

Greg Gum
Greg Gum

Reputation: 37909

The hidden html attribute also works to hide an element.

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

To bind to Model:

 <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;
      }      
 }

Edit: You can also use a CSS class to hide/show an element:

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

Upvotes: 66

Peter Morris
Peter Morris

Reputation: 23234

Change OkayDisabled to a bool, and then around your image do this

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

You might also want to add @bind:event="oninput" wherever you use an @bind.

Upvotes: 43

HannesPreishuber
HannesPreishuber

Reputation: 342

didn't used it within editform but should work

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

Upvotes: 3

Related Questions