Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

render a blazor component with disabled property set after business logic applied

$
0
0

I have a problem regarding the rendering of a component with a certain property after applying some business logic. The webpage should follow this logic:

  1. customer enters page
  2. OnInitializedAsync() is called
  3. loading circle appears signaling business logic is applied
  4. business logic applies and properties are set
  5. Visibility property is set and function is left
  6. components are rendered with certain properties and shown to customer

To be more specific, it is a certain ComboBox that should have a disabled property after the logic has applied. After calling OnInitializedAsync() the property is set which I confirmed using debugger. However the ComboBox appears with an enabled status as if the property setting is ignored for some reason.

I tried Task.Delay() and StateHasChanged at the end of OnInitializedAsync(). I also tried using OnAfterRenderAsync() and setting the proeprty there with calling StateHasChanged but no difference.

The only way I can make it work is removing the @if(isVisible) check at the top of my razor Page. In that case the disabled property is applied, however the customer gets to see the components before they are "ready" and even has time to interact with them since there is a huge delay. This looks stupid and feels unprofessional. Could you explain to me how the general or best approach would be to this problem?

Here is a rough pseudocode:

@if(isVisible){<ComboBox @ref=MyComboBox ...></ComboBox>}@code{    private ComboBox MyComboBox {get;set;}    private bool isVisible = false;    protected override OnInitializedAsync()    {"Do Some Stuff"        this.MyComboBox.Enabled = false;        this.isVisible = true;        StateHasChanged();    }}

Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>