0

So in the razor.cs there is a method that imports an xml and displays it in the child components. How it is rendered is shown in the .razor, but for some reason only the Models-property in the child components in the for loop get updated (count 33) and the main VitalizationSetting component's Models only has count 29. Even though when I debug they both show count 33.

.razor.cs (parent):

private List<ModelDto> Models { get; set; }

public VitalizationSetting VitalizationSetting { get; set; } = null;

public List<VitalizationSetting> VitalizationTabRefs { get; set; } = [];
private VitalizationSetting VitalizationTabRef
{
    set { VitalizationTabRefs.Add(value); }
}

private async Task ImportVitalizationSettings()
{
    if (string.IsNullOrWhiteSpace(InputXml)) return;

    try
    {
        var IFCVitalizationSettings = IFC.Vitalization.VitalizationSettings.FromXml(InputXml);

        (VitalizationSetting, VitalizationTabRefs) = await Converter.ConvertToNativeVitalizationSettings(IFCVitalizationSettings, Models);

        VitalizationTabCount = VitalizationTabRefs.Count;

        // Sync available Document Intelligence models through all VitalizationSetting-objects
        Models.Add(VitalizationSetting.SelectedModel);
        foreach (var tab in VitalizationTabRefs)
        {
            Models.Add(tab.SelectedModel);
        }

        VitalizationSetting.Models = Models; // Here Count is 33
        foreach (var tab in VitalizationTabRefs)
        {
            tab.Models = Models; // Here Count is also 33
        }

        InputXml = "";
    }
    catch (Exception e)
    {
        Console.WriteLine($"Error during import: {e.Message}");
    }
}

.razor (parent):

<VitalizationSetting Models="Models" @ref="VitalizationSetting" VitalizationSettingData="@VitalizationSetting" /> // in this component it displays only 29 items

@if (VitalizationTabCount > 0)
{
    @for (int i = 0; i < VitalizationTabCount; i++)
    {
        // each of these components show 33 items
        <VitalizationSetting IsTab="true" Models="Models" @ref="VitalizationTabRef" OnDelete="RemoveVitalizationTab"
            VitalizationSettingData="@VitalizationTabRefs[i]" />
    }
}

Can anybody see what I'm doing different or incorrect between these 2 components?

Also in the child components the OnParametersSetAsync() is triggered for each component shown in the .razor:

protected override async Task OnParametersSetAsync()
{
    try
    {
        if (VitalizationSettingData == null || VitalizationSettingData.SelectedModel == null) return;

        TabName = VitalizationSettingData.TabName;
        TabIndex = VitalizationSettingData.TabIndex;

        Models = VitalizationSettingData.Models; // Here it's also always count 33, but in the UI it's not :/

        SelectedModel = VitalizationSettingData.SelectedModel;
        SelectedDocumentType = VitalizationSettingData.SelectedDocumentType ?? null;

        UseComposedModel = VitalizationSettingData.UseComposedModel;
        ClassificationMinConfidence = VitalizationSettingData.ClassificationMinConfidence;

        CalibrateColumns();
    }
    catch (Exception e)
    {

        throw;
    }
}
4
  • This looks pretty crazy - VitalizationSetting Models="Models" @ref="VitalizationSetting" VitalizationSettingData="@VitalizationSetting" />'. VitalizationSetting` is a component, with a @ref that also has VitalizationSettingData parameter pointing to itself? Can you produce a minimal reproducible example to demonstrate the problem? At the moment this is just code snippets that you think are where the problem lies, but may well not be! Trying to piece them together is very difficult. Commented May 27 at 10:30
  • I added the VitalizationSettingData because @ref wouldn't update anything (parent to child) >:l. You reckon @ref should update the child if changes are made in the parent? Commented May 27 at 10:35
  • I may have done object-binding completely wrong to begin with now that I looked it up, I'll dive into that.. Commented May 27 at 10:43
  • Creating a circular reference won't solve the problem. The issue is with your logic. I ask for a minimal reproducible example because that makes it so much easier to troubleshoot, and creating one often enlightens you the problem owner. Commented May 27 at 10:49

1 Answer 1

0

EDIT: I still had some issues with passing data between parent and child, i ended up not using VitalizationSettingRef and VitalizationTabRef and have only 1 object (idr why I made it so complicated, probably because I saw this post and thought I needed a local and a ref object

  1. I have a [Parameter] for Models but Models already exists in VitalizationSettingData I'm setting it double for no reason.

  2. Add @key attribute (did not know this existed btw) so even though only 1 property has been changed in a component, it still re-renders the component so changes will be pushed through.

Parent.razor

<VitalizationSetting
    @ref="VitalizationSetting"
    @key="VitalizationSetting"
    VitalizationSettingData="VitalizationSetting" />

@foreach (var tab in VitalizationTabs)
{
    <VitalizationSetting
        @ref="VitalizationTabs[VitalizationTabs.IndexOf(tab)]"
        @key="tab"
        VitalizationSettingData="tab"
        OnDelete="@(() => RemoveVitalizationTab(tab.TabIndex))"
        IsTab="true" />
}

With this in the parent.razor.cs:

public VitalizationSetting VitalizationSetting { get; set; } = new();
public List<VitalizationSetting> VitalizationTabs { get; set; } = [];

// No Models, VitalizationTabRefs, VitalizationSettingRef, etc. anymore

I use the @ref for passing from Child to Parent and I used VitalizationSettingData where it has a [Parameter] property where the data can be passed through from Paremt to Chil.

Child component:

[Parameter]
public VitalizationSetting VitalizationSettingData { get; set; }

protected override async Task OnParametersSetAsync()
{
    try
    {
        if (VitalizationSettingData == null) return;

        TabName = VitalizationSettingData.TabName;
        TabIndex = VitalizationSettingData.TabIndex;

        Models = VitalizationSettingData.Models;
        SelectedModel = VitalizationSettingData.SelectedModel;
        SelectedDocumentType = VitalizationSettingData.SelectedDocumentType ?? null;

        UseComposedModel = VitalizationSettingData.UseComposedModel;
        ClassificationMinConfidence = VitalizationSettingData.ClassificationMinConfidence;
    }
    catch (Exception e)
    {
        Console.WriteLine($"[OnParametersSetAsync] Error updating component: {e.Message}");
    }
}
Sign up to request clarification or add additional context in comments.

2 Comments

@ref="VitalizationTabRef" is complete nonsense (it's inside a for-loop). Just remove that.
It's what I saw here so I copied it: stackoverflow.com/questions/60064510/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.