Model for referencing a component from another component - declaratively

[htmlsplash]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

I would like component B to be able to access component A declaratively.

Ex 1: Consider this markup (using the ref attribute):

ComponentA @ref="compA" 
ComponentB ComponentA="compA"  // where "ComponentA" is a Parameter on Component B

code {
  ComponentA compA;
}

Rule:
As I understand, this will not work because accessing components from life cycle methods except "OnAfterRender" is not possible.

1. Q:
   How do I achieve something similar what's shown in the example in Blazor? Accessing controls by ID in webforms is a common pattern.

2. Q:
   Why is the rule (that I stated) not followed consistently about component references.

Ex 2: Consider this markup:

<input @ref="inputField" />

code
{
protected override void OnInitialized()
{
	base.OnInitialized();
      var refToInputField = inputField; // The reference exists, but this will not work for components; Why is there this inconsistency? Is this because I am referencing an HTML element instead of Blazor component?
}
}

3. Current documentation is either off or not explicit about this:
   Goto:
   https://learn.microsoft.com/en-us/dotnet/architecture/blazor-for-web-forms-developers/components
   Look under heading: Capture component references
   This example is incomplete (in terms of context) and misleading. The OnSomething() is method from where?

Describe the solution you'd like

Questions are stated in the problem.

Additional context

No response

[gragra33]

@htmlsplash I can think of a number of ways of doing this but it depends on the context, what do you want to share or do exactly?

[htmlsplash]

If you look at example 1 again:
I would like to pass a reference of ComponentA to ComponentB (via declared parameter "ComponentA" in ComponentB) so that Component B internally can use the reference (to ComponentA) to initialize and render itself correctly.

A more clearer example:

SiteMapComponent
Menu SiteMap="SiteMapComponent"

NOTE:
I am omitting greater than/less than from the example because the text gets filtered out.

[gragra33]

@htmlsplash So you have shared metadata and you have control over the code of both components?

2 methods come to mind:

1. Inject a model/service into both that contains/manages the metadata
2. have a property on both components that share a metadata model class

There are other ways, however, these are common methods.

[htmlsplash]

Thank you for your feedback.

I would not call this metadata, more like abstractions and delegation of concerns between components.

Unfortunately both proposed solutions are not really good solutions to the problem but just workarounds that require a lot of work to migrate over legacy webforms code to Blazor.

Issue with solution 1:
Have to create extra api/change existing design to accommodate the scenario. My DI will explode with services if I just take that approach. All I want is single scenario where one UI component references another. This seems so intuitive in component based design framework (which I thought Blazor is).

Issue with solution 2:

• Blazor encourages you to pass data via Parameter properties. I want to stick with this instead of sprinkling my code all over the life cycle methods to set properties. I want this to be done declaratively.

[gragra33]

I would not call this metadata, more like abstractions and delegation of concerns between components.
Issue with solution 1:
Have to create extra api/change existing design to accommodate the scenario. My DI will explode with services if I just take that approach. All I want is single scenario where one UI component references another.

Injecting a service class would be the common method. All common code is contained in the service class, then the components handle their unique bits.

This seems so intuitive in component based design framework (which I thought Blazor is).

Blazor is component-based, but not in the manner that you are asking for. You will see many warnings from the IDE and compiler, but it is possible, to a degree.

Issue with solution 2:
Blazor encourages you to pass data via Parameter properties. I want to stick with this instead of sprinkling my code all over the life cycle methods to set properties. I want this to be done declaratively.

If you want to use parameters, then look at Cascading Parameters.

A great resouce to delve further into this, is the Blazor University.

[htmlsplash]

"Injecting a service class would be the common method. All common code is contained in the service class, then the components handle their unique bits." - I know that, ... But I feel that for this use case (and others) where one component references another component (like Menu referencing a sitemap data source) in just one place/location is overkill to create a service.

You have conveniently skipped over the part that work/effort required to start moving all this code and re-designing the entire UI model.

In summary:
The proposed solution for anyone coming from UI framework like Webforms and being able to have one component reference another is show stopper to even think about conversion.

Q:
Is there a technical reason why I cannot reference one component from another?
Please also address the 2nd question why HTML elements have valid references outside onAfterRender method? Why is there such inconsistency and it does create confusion.

[gragra33]

Q: Is there a technical reason why I cannot reference one component from another?

It depends on what exactly you are trying to achieve. And yes, I have looked at your generic sample.

Can you give a more concrete real-world example?

[htmlsplash]

Let me clarify:

I would like to have a menu component reference the SiteMapDataSource component via "SiteMapDataSource" parameter defined in the menu so that when the Menu.OnParametersSet() life cycle method executes, it has valid reference to SiteMapDataSource component (instead of null reference).

[gragra33]

The SiteMapDataSource you have defined as a data source, so then, that is a child-parent relationship. The MenuComponent is dependent on the SiteMapDataSource.

For this scenario, then it would be something like:

<MenuComponent>
    <SiteMapDataSource>
    </SiteMapDataSource>
</MenuComponent>

The MenuComponent would then have CascadingValue to pass itself down to the SiteMapDataSource.

<CascadingValue Value="this">
    @this.ChildContent
</CascadingValue>

[htmlsplash]

Looks more elegant and what I am after but:

Clarification: It is the Menu that references the SiteMapDataSource, not the other way around. The SiteMapDataSource doesn't know anything about the Menu, but the Menu knows about the SiteMapDataSource, because it is the consumer of the SiteMap.

Would I just flip everything around in your example?
SiteMapDataSource
MenuComponent
MenuComponent
SiteMapDataSource

[gragra33]

It's up to you, but the convention is to set the data source to the object that requires it.

Here is an example:

<DataList Title="Categories" 
          TItem="SearchCategory"
          AlternateRowCount=2
          VirtualItemSize=50
          VirtualOverscanCount=5
          EnableVirtualization=true
          @bind-SelectedItem=SearchContainer1.SelectedItem>
    <CategoryDataProvider
        SearchText=@SearchContainer1.SearchText
        LeafOnly=@SearchContainer1.LeafOnly>
    </CategoryDataProvider>
    <DataListTemplates TItem="SearchCategory">
        <ItemTemplate Context="SearchCategory">
            <div class="c-item__id">@SearchCategory.Id</div>
            <div class="c-item__name">@SearchCategory.Name</div>
        </ItemTemplate>
        <VirtualPlaceholder>
            <div class="c-row-loader">
                loading...
            </div>
        </VirtualPlaceholder>
    </DataListTemplates>
</DataList>

I am passing external parameters to the CategoryDataProvider outside of the DataList and the DataList is talking to the CategoryDataProvider to dynamically load the data.

[htmlsplash]

Is there a complete example on git? If yes, link please.

[gragra33]

The sample above is a cut-down version from a commercial project. If you look at the link provided above, all that you require is there.

[htmlsplash]

I only see Blazor University link, is that the link you are referring to?