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

How to make sure @ref is set for dynamic components?

$
0
0

I have a page Dashboard that has a local variable userDashboard and also contains 2 child components. Both components have a parameter called UserDashboard. Markup is kept simple:

@if (isEditMode){<DashboardEdit UserDashboard="@userDashboard" OnEditClosed="@EditModeClosed" />}else{<DashboardView UserDashboard="@userDashboard" />}private void EditModeClosed(UserDashboard updated){    isEditMode = false;    dashboard = updated;}
  1. DashboardEdit: Allows the user to select what items (other components) will be displayed in the DashboardView component. Has a list of string where the value is the component type (GetType().Name). When the user closes this component, an event is raised passing the updated dashboard.

  2. DashboardView: Overrides OnParametersSetAsync and checks if the dashboard parameter has changed from the local one (hashcode check).

The code to update the items in OnParametersSetAsync is:

items.Clear();items.AddRange(UserDashboard.Item.Select(x => new ItemMetadata(Type.GetType(x.Item.Type), x)));

The markup is also kept simple:

@foreach (var item in items){<DynamicComponent @ref="@item.Ref" Type="@item.Type" Parameters="@item.Parameters" />}

The variable/parameter UserDashboard is correctly passed around when switching components, however when the user ends editing through the event, all items in the DashboardView component have their ref still set to null.

How can I make sure that the items'ref is always set before refreshing the DashboardView component with data?


Viewing all articles
Browse latest Browse all 4839

Trending Articles



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