New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Events between two components #1714

Closed
JulienM28 opened this Issue Nov 22, 2018 · 11 comments

Comments

Projects
None yet
6 participants
@JulienM28
Copy link

JulienM28 commented Nov 22, 2018

I have two components:

one selectlist and one "View"

The view is populated from datas depending on which element is selected in the select list.

I seen It's possible to raise events from parents to children and inverse, but How to raise events between two components who are not parented ?

Thanks.

@enetstudio

This comment has been minimized.

Copy link

enetstudio commented Nov 22, 2018

In an SPA application, as far as I got it, there is a single Html page; in Blazor this page, named Index.Html, residing in the wwwroot folder. There is also a root Component, currently named Main, which is rendered into the Index page. The Main Component may contain the rest of your Components hierarchically: Think of a tree view. So you see all the Components are begotten or parented by the Main Component, They all belong to the same family of Blazor Components, and are all related to each other directly or indirectly.

Best resources to understand communication between Components in Blazor:

Hope this helps... if you would need specific help, please show code...

@Lupusa87

This comment has been minimized.

Copy link

Lupusa87 commented Nov 22, 2018

You can use ref to capture both component references, you will invoke event when change happens, subscribe for this event and call second component's public method to update view. Or you can save in some static class bot components instances inside onload and invoke public methods when you need using static class. You can use many ways for that goal (state, services and etc) key is here event raising and component instances to access them.
For example I have two chess board on page and they play between eachother, one is saying second that move made and sends move description. These two components have not parent or child relation.
https://lupblazordemos.z13.web.core.windows.net/ChessPage
https://github.com/Lupusa87/BlazorChess

@shawty

This comment has been minimized.

Copy link

shawty commented Nov 22, 2018

I've done this in my JWT/LOB example by using my ApplicationState singleton as a mediator.
https://github.com/shawty/blazor.jwttest

Basically I have a function in my Appstate, and I have a public event delegate.

Since most parts of my app, inject my appstate class to check for things like logged in status, anything that wants to know when a successful login is made, attaches to the LoginSuccessful event in the class.

When something logs in, it calls Login on the AppState class, and the app state then raises it's own LoginSuccessful event, which any interested listeners respond to.

@enetstudio

This comment has been minimized.

Copy link

enetstudio commented Nov 22, 2018

@Lupusa87: "These two components have not parent or child relation."

But still they are related to each other on account of both being siblings. In such a case, it is best to use a mediator object, as @shawty suggests, in the form of a parent, that enables communication between its two children.

@Lupusa87

This comment has been minimized.

Copy link

Lupusa87 commented Nov 23, 2018

You can do as you think better. I achieved my goal this way and I agree that there can be many better ways.

@JulienM28

This comment has been minimized.

Copy link

JulienM28 commented Nov 23, 2018

Thank you all for your answers.

I'll try it right now.

@JulienM28

This comment has been minimized.

Copy link

JulienM28 commented Nov 23, 2018

@Lupusa87 your website is reported as phishing by our virus protection.
You may fix this.

@shawty

This comment has been minimized.

Copy link

shawty commented Nov 23, 2018

@Lupusa87 your website is reported as phishing by our virus protection.
You may fix this.

HA ha ha ha, that's hilarious. :-) That looks like it's an alised Azure domain, which means your software thinks Azure is a Phishing site...

Best laugh I've had all morning.

@Lupusa87

This comment has been minimized.

Copy link

Lupusa87 commented Nov 23, 2018

Someone else told me seme few days ago but I don't know how can I fix it and why your antivirus is reporting problem.
Here is source https://github.com/Lupusa87/LupusaBlazorProjects
If you can provide more details please open issue in this repo.
Thank you.

@longinos10

This comment has been minimized.

Copy link

longinos10 commented Nov 24, 2018

I did something similar with event handler or event delegate

@SteveSandersonMS

This comment has been minimized.

Copy link
Member

SteveSandersonMS commented Nov 26, 2018

Thanks for all the answers!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment