1

I have a series of nested components like this:

LocationDetails
    NodeWithChildren
        NodeDetails
            PhotoGallery (shows images of current node)
        PhotoGalleryZoom (modal dialog)
            ImageEditor

The NodeWithDetails component renders out a list of child elements. It also renders a PhotoGallery for the current node, which displays 0 or more images.

When an image is clicked the PhotoGalleryZoom is presented. This is basically a modal window with the ImageEditor embedded. The ImageEditor has delete, rotate and crop tools. Example of PhotoGalleryZoom

While the Image editor takes care of sending edits to the server, I need to update the matching, existing, image on the page underneath. Preferably not by doing an entire page refresh. The URL of the image does not change, so I basically need to refresh the IMG element.

Any thoughts on the best (simple) way to communicate a change to a trivial item like an image in a disparate component? The image rendering is very basic ATM:

<img src="@($"{ImageBase}{imageId}")?size=4" />

In a jQuery equivalent website I built previously, I was able to simply match IMG element by a data ID on them, but looking for the "best" Blazor way to do the same. Thanks.

iCollect.it Ltd
  • 92,391
  • 25
  • 181
  • 202
  • 1
    I am not sure if it is ok to post a video url but I can recommend this video about state management. It is pretty much the information you need based on what I guess you want to achive. https://www.youtube.com/watch?v=L9p-9dGp-98&t=2178s&ab_channel=NDCConferences – jeb Aug 18 '23 at 12:21
  • This is an interesting problem, if the image URLs don't change how do you currently prevent caching though? You might want to consider having a revision number for all images, or something that can be passed as a query parameter. So when that changes, it would trigger a DOM update as well as bypass the cache. Alternatively I can only think of using JS Interop, that can also do a force refresh, like in [this answer](https://stackoverflow.com/a/66312176/1244910). – Thomas Glaser Aug 18 '23 at 13:56
  • 1
    Search "Blazor Notification Pattern" for a multitude of answers on here. Here are three - https://stackoverflow.com/a/69562295/13065781 - https://stackoverflow.com/a/76871384/13065781 - https://stackoverflow.com/a/76449070/13065781 – MrC aka Shaun Curtis Aug 18 '23 at 13:57
  • 1
    @jeb That video basically confirmed what I thought I would have to do (use a dispatcher and have components register for events). Will post some code as answer when I have it finished. Cheers – iCollect.it Ltd Aug 18 '23 at 17:21
  • 1
    @ThomasGlaser You may not have noticed that the image URL via via an API endpoint. Not a static location. I have full control over caching already (as I have to restrict images to be visible only to their owners). Cheers – iCollect.it Ltd Aug 18 '23 at 17:22

0 Answers0