0
votes

Pages Blazor: comment utiliser BuildRenderTree pour ajouter du contenu dynamique

Contexte : Nous gérons des dizaines de sites pour des clients; tous utilisent une base de code identique (ASP.NET WebForms) mais des conceptions complètement différentes. La structure de page est générée par programme à partir des métadonnées SQL Server, à l'aide de contrôles tels que Panel , qui sont ajoutés à la collection Controls la page ASP.NET et deviennent des DIVs dans le HTML rendu.

Objectif: nous souhaitons éventuellement migrer vers ASP.NET CORE. Cependant, il ne semble pas y avoir d'équivalent à la collection de contrôles de la page. La chose la plus proche que je puisse trouver est le RenderTreeBuilder pour ajouter un composant Blazor.

Question: Est-il possible d'utiliser BuildRenderTree pour ajouter un composant qui contient notre HTML maison (par exemple, pour tout contenir entre <body> et </body> ?

J'ai lu des articles tels que:

https://chrissainty.com/building-components-via-rendertreebuilder/

https://docs.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.1#manual-rendertreebuilder-logic

... et j'ai expérimenté l'ajout d'éléments HTML, mais c'est extrêmement fastidieux, et j'aimerais générer par programme le HTML pour à peu près toute la page, et l'ajouter en un seul RenderFragment (est-ce le bon terme?).

Est-ce possible? Y a-t-il une alternative?

Éditer:

La réponse de @ Henk, utilisant la structure MarkupString , et la mienne, utilisant RenderTreeBuilder.AddMarkupContent semblent similaires en termes d'effort et de plomberie requis.

Y a-t-il des avantages et des inconvénients des deux approches que je devrais envisager?

asp.net-core asp.net blazor-server-side dynamic-html

0 commentaires

3 Réponses :

1
votes

Si vous voulez juste du HTML (brut, mort), vous n'avez pas besoin d'un rendu:

<h1>My Page</h1>
@MyHtmlComposer()

@code{
    private MarkupString MyHtmlComposer()
    {
        string html = "<p>Hello</p>";
        return new MarkupString(html);
    }
}

0 commentaires

0
votes

Je n'avais pas rencontré la structure MarkupString , donc la réponse de @ Henk est vraiment utile. Je suis maintenant tombé sur la méthode RenderTreeBuilder.AddMarkupContent , je vais donc proposer ceci comme réponse alternative:

Mon balisage:

public class PageBuilder : ComponentBase
{
    protected override void BuildRenderTree(RenderTreeBuilder b)
    {
        base.BuildRenderTree(b);
        b.OpenElement(0, "div");
        b.AddMarkupContent(1, TheContent());
        b.CloseElement();
    }
    public string TheContent()
    {
        return "<div>This is the generated content</div>";
    }

PageBuilder est une classe qui hérite de ComponentBase:

@page "/"
<PageBuilder></PageBuilder>

Je modifierai un peu ma question initiale, car j'aimerais savoir s'il y a quelque chose à choisir entre cette approche et celle de @ Henk.

0 commentaires

0
votes

Vous pouvez également afficher une chaîne au format HTML comme ceci:

@page "/test";
<h1>My Page</h1>

@((MarkupString)content)


@code{
    //Get content from Database
    string content = "<p>Hello</p>";
}

Voir la section "HTML brut" ici

0 commentaires