How to separate html code that is sent from one razor component to another?

Question

I'm calling a part of a table from a razor component to a component that can be viewed. But the the problem is that there is an audio element i want to separate so it can be called at a different place.

Right now the audio element is included in the call in the loop. Is there any way the audio element can be separated in the CallComponent.razor, such that it can be called at a different loaction in index.razor?

Here is some code:

Index.razor

//I want to call the separated audio element here

...
<tbody>
        @foreach (var fileGroup in GroupedAndSorted)
        {
            <CallComponent fileGroup="fileGroup" /> 
        }
</tbody>
...

CallComponent.razor

<audio src="@audioUrl" controls>
</audio>

<tr>
    <td>
        <a @onclick="@(() => PlayAudio(Mp3.Url))"
                       class="link-primary"
                       role="button">
        @fileGroup.Key
        </a>
    </td>
</tr>
...

Mister Magoo · Accepted Answer · 2022-11-23 15:51:00Z

Here is one way, there are other ways involving various ways to handle application state, but this demonstrates possibly the simplest.

Index.razor

@childMarkup

<Component1 ExtraMarkup=@( em => childMarkup = em) />

@code 
{
    RenderFragment childMarkup;
}

Component1.razor


<h1>Component1</h1>

@code 
{
    [Parameter] public EventCallback<RenderFragment> ExtraMarkup { get;set;}

    protected override void OnInitialized()
    {
        ExtraMarkup.InvokeAsync( @<div>I am extra markup</div> );
    }
}

In this example, Component1 has a parameter that takes an EventCallback<RenderFragment> - in other words, you give it a method that accepts a RenderFragment and Component1 will call your method supplying it with some markup. Here we just store the incoming RenderFragment in a local field - which is then rendered in the parent markup.

Try it: https://blazorrepl.telerik.com/cQbPGRPT48cbMaCe55

Collectives™ on Stack Overflow

How to separate html code that is sent from one razor component to another?

1 Answer 1

Index.razor

Component1.razor

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Index.razor

Component1.razor

Comments

Your Answer

Sign up or log in

Post as a guest

Related