CODEWITHSUNDEEP
blazorblazor-server-side
John S
John S

Reputation: 8331

Passing a reference to a component on parent to child component in Blazor serverside?

(Blazor server .Net 6)

I have a series of pages with grid components on them. I then have a button on each of those pages that auto sizes the columns to fit the page. Rather than copy/maintain that same button code between all the grid pages I would like to break it out into a component.

I understand how to pass simple data to a child component but I was wondering if it's possible to pass a reference to the grid on the parent page to the child component so that the button and code in the child component can perform the resize on the columns in the parent's grid?

The problem is not with the resizing the columns, the question is how do I pass a reference to the component on the parent page to the child page.

*** An attempt to clarify and restate the problem more clearly. ***

I have a component "A" on a Blazor page. I also have component "B" on the same page. I would like to pass a reference of component "A" to component "B" so that a button on component "B" can call a method on component "A". Is that possible?

Upvotes: 0

Views: 5216

Answers (2)

Surinder Singh
Surinder Singh

Reputation: 1450

your Parent.razor component's html should be wrapped in

<CascadingValue Value="@this" IsFixed="true">
</CascadingValue>

Child component should have

[CascadingParameter]
protected Parent Context { get; set; }

Now you can access public properties and methods from Parent component in child component, like this

Context?.SomeMethod();

or

Context?.SomeProperty;

Upvotes: 1

SMD
SMD

Reputation: 41

I'm not totally clear on what you've already tried and how you are implementing the resizing, so it's possible that this will be unhelpful, but here are some ideas to look into:

You may be able to use the @ref attribute for this case.

Within parent component:

<ChildComponent @ref="elmRef" />

...

@code {

   private ChildComponent elmRef;

...

}

Now, you can use methods that exist within the child component, such as:

  elmRef.DoSomething();

So in your specific example, each of the pages would have a component that contains all the shared button code, and you can use the reference to that component to use the button functionality. You can pass any data about the grid into the component as a parameter, such as

buttonRef.ResizeGrid(30, 40);

I don't know your exact case, as you didn't provide any code, but maybe the concept of ref can be helpful to you.

Another thing you can do is create a wrapper component around the entire thing (both grid and button),but pass the grid in from each page as a RenderFragment. So essentially you would have one component like this:

  @Grid
   
   <YourButton />

  ...

@code {
  [Parameter]
  public RenderFragment Grid { get; set; }
}

and then each parent page would contain

<YourComponent>
  <Grid>
    //your grid code here
  </Grid>
</YourComponent>

In this case, instead of having a shared button component, the 'clicking' is actually happening within the main component, and each page is just supplementing the grid as a RenderFragment.

Lastly, if none of these ideas work, you can use an EventCallback. An EventCallback is how you can pass data from a child up to a parent. Now, in this case the actual resizing code would not be happening within the shared component - the component would only be limiting repeated frontend code. So I would try this if nothing else works; I might even say it isn't worth refactoring to a shared component if you'll be doing it this way.. But in this case, when the button within the child component is clicked, it can trigger an EventCallback which will be handled on the parent. Again, seems like a waste of refactoring to me - you don't really gain much.

Feel free to provide more detail if this isn't helpful.

Upvotes: 4

Related Questions