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

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))"
                       
                       role="button">
        @fileGroup.Key
        </a>
    </td>
</tr>
...

CodePudding user response：

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

CodePudding user response：

It is not really clear what you want to achieve. Have you looked into @ref That way you can reference you Razor child component elsewhere.