Blazor – Cómo crear componentes dinámicamente

Nuestro equipo de especialistas despúes de varios días de investigación y de juntar de datos, han obtenido la respuesta, deseamos que resulte de gran utilidad en tu proyecto.

Solución:

A juzgar por los comentarios sobre la respuesta aceptada y sobre la versión original de esta respuesta, creo que puede haber un poco de confusión sobre la adición dinámica de componentes. Hay (al menos) un par de formas de lograr esto (y una serie de preguntas existentes sobre esto, por ejemplo aquí). Todo depende exactamente de lo que quieras decir con ‘dinámicamente’:

1) Usar declaraciones condicionales en su código Razor

Si lo que intenta lograr es simplemente mostrar u ocultar componentes en función de algún estado en sus datos o modelo, entonces la forma “normal” de representar un componente dinámicamente es usar algún tipo de código condicional en su vista de Razor.

Representación condicional simple

@if (_showCounter)

  


@code 
  bool _showCounter = true;
  int _count;

Conjuntos de datos repetitivos simples

Para conjuntos de datos repetidos, como listas de elementos, puede aprovechar el enlace de datos de Blazor.

Tome el ejemplo de una página/componente que muestra un pedido de ventas y luego tiene un componente secundario para cada línea de pedido de ventas. Es posible que tenga un código que se vea así en su página de afeitar:

  @foreach (var salesOrderLine in _salesOrder.salesOrderlines)
  
    [email protected] />
  ;

Si tenía un botón que agregaba otra línea de orden de venta, simplemente podía agregar el nuevo registro a la _salesOrder model/view model en ese evento de clic de botones. Los clics en los botones normalmente desencadenan una nueva representación, por lo que la página debería mostrar automáticamente un extra SalesOrderLine componente (y si no es así, puede usar this.StateHasChanged(); para decirle que las cosas son diferentes y causar una nueva representación)

Conjuntos de datos repetidos que contienen diferentes tipos de datos (posiblemente polimórficos)

Si su lista contiene diferentes tipos, puede usar una declaración de cambio para decidir qué tipo de componente representar, por ejemplo (de esta pregunta de GitHub):

    @foreach (fruit in fruits)
    
        switch(fruit)
        
            case PearComponent p:
                
                
Or render pears like this, if you want the li in it
                break;
            case AppleComponent a:
                
                break;
            case BananaComponent b:
                
                break;
            case RaspberryComponent r:
                
                break;
        
    

2. Renderizado dinámico usando RenderFragment

Hay algunos casos que no se pueden manejar bien con el enfoque Razor anterior. En esos casos RenderFragment ofrece otra forma de representar dinámicamente partes de una página.

Listas polimórficas

Cuando tenga una lista verdaderamente polimórfica (por ejemplo, una lista de objetos que implementan la misma interfaz o heredan de la misma clase), este tipo de enfoque se puede usar desde esta publicación de GitHub:

@page "/"

@foreach (CounterParent counter in components)

    RenderFragment renderFragment = (builder) =>  builder.OpenComponent(0, counter.GetType()); builder.CloseComponent(); ;
    

        
Before the component
        @renderFragment
        
Afterthe component
    


@code

    List components = new List()  new CounterParent(), new CounterChild() ;

El equipo de Blazor está considerando mejorar la forma en que se manejan las listas polimórficas en Blazor:

mkArtakMSFT comentó el 1 de octubre de 2019 Gracias por contactarnos, @Joebeazelman. Usar el enfoque de cambio que tiene será nuestra recomendación. Consideraremos hacer algo mejor en esta área en el futuro.

Conclusión

los key El punto aquí (para aquellos con experiencia en MVC) es que no hay necesidad de intentar inyectar manualmente el nuevo HTML en el DOM, o cargar dinámicamente una vista parcial, en la forma en que lo haría en MVC, Blazor lo hará por usted.

A pesar de la similitud en la sintaxis entre las páginas de afeitar para MVC y las de Blazor, el modelo de Blazor está conceptualmente mucho más cerca de algo como React que de MVC, es muy importante entender que hay algo similar a un shadow-DOM en segundo plano. .

Esta página tiene algunos buenos consejos sobre el enlace de datos en Blazor.

Para la versión 0.2 esta es la respuesta de Steve Sanderson:

Implementaremos mejores API para construir RenderFragments en el futuro, pero por ahora puedes

@CreateDynamicComponent();
@functions 
    RenderFragment CreateDynamicComponent() => builder =>
    
        builder.OpenComponent(0, typeof(SurveyPrompt));
        builder.AddAttribute(1, "Title", "Some title");
        builder.CloseComponent();
    ;

Esas son API de muy bajo nivel (ni siquiera están documentadas), por lo que esperamos que no muchas personas necesiten hacer esto ahora. Las API de nivel superior para esto vendrán más adelante.

Encontrado aquí

---

---

Utiliza Nuestro Buscador