0

Hola tengo este código con controles de radzen (https://blazor.radzen.com/button):

<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
    <RadzenButton Click=@(args => OnClick("Primary button")) Text="Primary" ButtonStyle="ButtonStyle.Primary" />
    <RadzenButton Click=@(args => OnClick("Secondary button")) Text="Secondary" ButtonStyle="ButtonStyle.Secondary" />
    <RadzenButton Click=@(args => OnClick("Info button")) Text="Info" ButtonStyle="ButtonStyle.Info" />
    <RadzenButton Click=@(args => OnClick("Success button ")) Text="Success" ButtonStyle="ButtonStyle.Success" />
    <RadzenButton Click=@(args => OnClick("Warning button ")) Text="Warning" ButtonStyle="ButtonStyle.Warning" />
    <RadzenButton Click=@(args => OnClick("Danger button")) Text="Danger" ButtonStyle="ButtonStyle.Danger" />
</RadzenStack>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.H3" class="rz-mt-4">Filled Shades</RadzenText>
<RadzenStack Gap="1rem">
    <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
        <RadzenButton Shade="Shade.Lighter" Click=@(args => OnClick("Primary button")) Text="Primary" ButtonStyle="ButtonStyle.Primary" />
        <RadzenButton Shade="Shade.Lighter" Click=@(args => OnClick("Secondary button")) Text="Secondary" ButtonStyle="ButtonStyle.Secondary" />
        <RadzenButton Shade="Shade.Lighter" Click=@(args => OnClick("Info button")) Text="Info" ButtonStyle="ButtonStyle.Info" />
        <RadzenButton Shade="Shade.Lighter" Click=@(args => OnClick("Success button ")) Text="Success" ButtonStyle="ButtonStyle.Success" />
        <RadzenButton Shade="Shade.Lighter" Click=@(args => OnClick("Warning button ")) Text="Warning" ButtonStyle="ButtonStyle.Warning" />
        <RadzenButton Shade="Shade.Lighter" Click=@(args => OnClick("Danger button")) Text="Danger" ButtonStyle="ButtonStyle.Danger" />
    </RadzenStack>
    <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
        <RadzenButton Shade="Shade.Light" Click=@(args => OnClick("Primary button")) Text="Primary" ButtonStyle="ButtonStyle.Primary" />
        <RadzenButton Shade="Shade.Light" Click=@(args => OnClick("Secondary button")) Text="Secondary" ButtonStyle="ButtonStyle.Secondary" />
        <RadzenButton Shade="Shade.Light" Click=@(args => OnClick("Info button")) Text="Info" ButtonStyle="ButtonStyle.Info" />
        <RadzenButton Shade="Shade.Light" Click=@(args => OnClick("Success button ")) Text="Success" ButtonStyle="ButtonStyle.Success" />
        <RadzenButton Shade="Shade.Light" Click=@(args => OnClick("Warning button ")) Text="Warning" ButtonStyle="ButtonStyle.Warning" />
        <RadzenButton Shade="Shade.Light" Click=@(args => OnClick("Danger button")) Text="Danger" ButtonStyle="ButtonStyle.Danger" />
    </RadzenStack>
    <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
        <RadzenButton Shade="Shade.Dark" Click=@(args => OnClick("Primary button")) Text="Primary" ButtonStyle="ButtonStyle.Primary" />
        <RadzenButton Shade="Shade.Dark" Click=@(args => OnClick("Secondary button")) Text="Secondary" ButtonStyle="ButtonStyle.Secondary" />
        <RadzenButton Shade="Shade.Dark" Click=@(args => OnClick("Info button")) Text="Info" ButtonStyle="ButtonStyle.Info" />
        <RadzenButton Shade="Shade.Dark" Click=@(args => OnClick("Success button ")) Text="Success" ButtonStyle="ButtonStyle.Success" />
        <RadzenButton Shade="Shade.Dark" Click=@(args => OnClick("Warning button ")) Text="Warning" ButtonStyle="ButtonStyle.Warning" />
        <RadzenButton Shade="Shade.Dark" Click=@(args => OnClick("Danger button")) Text="Danger" ButtonStyle="ButtonStyle.Danger" />
    </RadzenStack>
    <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
        <RadzenButton Shade="Shade.Darker" Click=@(args => OnClick("Primary button")) Text="Primary" ButtonStyle="ButtonStyle.Primary" />
        <RadzenButton Shade="Shade.Darker" Click=@(args => OnClick("Secondary button")) Text="Secondary" ButtonStyle="ButtonStyle.Secondary" />
        <RadzenButton Shade="Shade.Darker" Click=@(args => OnClick("Info button")) Text="Info" ButtonStyle="ButtonStyle.Info" />
        <RadzenButton Shade="Shade.Darker" Click=@(args => OnClick("Success button ")) Text="Success" ButtonStyle="ButtonStyle.Success" />
        <RadzenButton Shade="Shade.Darker" Click=@(args => OnClick("Warning button ")) Text="Warning" ButtonStyle="ButtonStyle.Warning" />
        <RadzenButton Shade="Shade.Darker" Click=@(args => OnClick("Danger button")) Text="Danger" ButtonStyle="ButtonStyle.Danger" />
    </RadzenStack>
</RadzenStack>
        <RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.H3" class="rz-mt-4">Filled Light and Dark</RadzenText>
        <RadzenText TextStyle="TextStyle.Body2" class="rz-mb-4">Light and Dark button styles don't have Shades</RadzenText>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
    <RadzenButton Shade="Shade.Lighter" Click=@(args => OnClick("Light button")) Text="Light" ButtonStyle="ButtonStyle.Light" />
    <RadzenButton Shade="Shade.Lighter" Click=@(args => OnClick("Dark button")) Text="Dark" ButtonStyle="ButtonStyle.Dark" />
</RadzenStack>

Sin embargo necesito que esto se cree dinámicamente de forma que pueda agregar o eliminar componentes en runtime , lo he intentado de esta manera pero me da un error:

@page "/"
@inject IJSRuntime js



<RadzenStack>
    @if (loading)
    {
            <p>Espere...</p>
    }
    else
    {
        @ContenidoVista
    }
</RadzenStack>


@code{
    // Propiedad pública para acceder al contenido de la vista desde el archivo .razor
    public RenderFragment ContenidoVista { get; set; }
    int sequence = -1;
    bool loading = false;
    protected override async Task OnInitializedAsync()
    {
        loading = true;
        await base.OnInitializedAsync();

        RenderFragment render1 = new RenderFragment(builder => {

            builder.OpenComponent<RadzenButton>(sequence++);
            builder.AddAttribute(sequence++,"Click", EventCallback.Factory.Create(this, (Microsoft.AspNetCore.Components.Web.MouseEventArgs e) => OnClick("Secondary button")));
            builder.AddAttribute(sequence++, "Text", "Primary");
            builder.AddAttribute(sequence++, "ButtonStyle", ButtonStyle.Primary);
            builder.CloseComponent();
        });
        RenderFragment render2 = new RenderFragment(builder =>
        {

            builder.OpenComponent<RadzenButton>(sequence++);
            builder.AddAttribute(sequence++, "Click", EventCallback.Factory.Create(this, (Microsoft.AspNetCore.Components.Web.MouseEventArgs e) => OnClick("Secondary button")));
            builder.AddAttribute(sequence++, "Text", "Secondary");
            builder.AddAttribute(sequence++, "ButtonStyle", ButtonStyle.Secondary);
            builder.CloseComponent();
        });
        // Crear el contenido de la vista en una variable local
        ContenidoVista = new RenderFragment(builder =>
        {
            builder.OpenComponent<RadzenStack>(sequence++);
            builder.AddAttribute(sequence++, "Orientation", Orientation.Horizontal);
            builder.AddAttribute(sequence++, "AlignItems", AlignItems.Center);
            builder.AddAttribute(sequence++, "Gap", "1rem");
            builder.AddAttribute(sequence++, "Wrap", FlexWrap.Wrap);
            builder.AddContent(sequence++, render1);
            builder.AddContent(sequence++, render2);
            builder.CloseComponent();
        });
        loading = false;
    }


    void OnClick(string text) {
        //js.InvokeVoidAsync("alert",text);
    }
}

El error que me da es este:

blazor.server.js:1 [2023-07-11T18:05:22.493Z] Error: There was an error applying batch 3. log @ blazor.server.js:1 blazor.server.js:1 Uncaught (in promise) Error: No element is currently associated with component 18 at se.updateComponent (blazor.server.js:1:20431) at blazor.server.js:1:118176 at Hn.processBatch (blazor.server.js:1:118548) at Ft. (blazor.server.js:1:133351) at Ft._invokeClientMethod (blazor.server.js:1:75066) at Ft._processIncomingData (blazor.server.js:1:72690) at Ft.connection.onreceive (blazor.server.js:1:67003) at i.onmessage (blazor.server.js:1:51316) blazor.server.js:1 [2023-07-11T18:05:22.514Z] Error: System.AggregateException: One or more errors occurred. (Error: No element is currently associated with component 18) ---> System.InvalidOperationException: Error: No element is currently associated with component 18 at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32[] updatedComponents) --- End of inner exception stack trace ---

4
  • No se entiende lo que quieres. Te recomiendo explicar que es lo que buscas y cual es el resultado esperado
    – Yussef
    Commented el 11 jul. 2023 a las 20:35
  • Lo que quiero es pintar los controles de Radzen pero desde code behind. Desde el código no desde el html Commented el 13 jul. 2023 a las 18:28
  • Eso se entiende de tu pregunta. Yo te pregunto por el motivo que quieres hacer eso y cual es el resultado que esperas. Porque al menos se me ocurren 3 formas distintas de hacerlo, pero cada una depende del contexto de tu problema. Por otro lado el código que has puesto no muestra ningún beneficio, porque no hay nada "dinámico" en él, por lo que perfectamente puedes poner eso en la parte HTML y ahorrarte dolores de cabeza, pero supongo que hay algo más y por eso pregunto.
    – Yussef
    Commented el 13 jul. 2023 a las 19:58
  • Porque estoy pensando en que el usuario pueda agregar columnas o eliminar de la tabla sql desde la interfaz de usuario evidentemente, por tanto necestito crear las paginas del html desde el código y no de forma estática Commented el 13 jul. 2023 a las 20:24

1 respuesta 1

0

Creo que tienes una confusión sobre el paradigma en Blazor.

Tu tienes Datos por un lado y Componentes por el otro, donde este último es una forma visual de representar el Dato

Por ejemplo tu tienes int Temperatura=23. Puedes representar ese valor como texto en un label o colocar un termómetro, o un gauge o lo que sea.

Y cuando tienes más de un Dato, tienes una lista o array.

Y además que los botones sean de la libería radzen es indeferente, es solo otra forma de representación.

Por ejemplo, creamos la clase Persona

public class Persona{
  public string Nombre {get;set;} = string.Empty;
}

Y luego creamos un Page

@page "/"

<EditForm Model="NuevaPersona" OnSubmit="@HandleSubmit">
    <InputText @bind-Value="NuevaPersona.Nombre" />
    <button type="submit">Guardar</button>
</EditForm>

<table>
    <thead>
        <tr>
            <th>Nombre</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var p in Personas)
        {
            <tr>
                <td>@p.Nombre</td>
                <td><button @onclick="() => Elminiar(p)">Eliminar</button></td>
            </tr>
        }
    </tbody>
</table>

@code{
    public Persona NuevaPersona = new();
    public List<Persona> Personas = new();

    private void HandleSubmit()
    {
        Personas.Add(NuevaPersona);
        NuevaPersona = new();
    }
    private void Elminiar(Persona p)
    {
        Personas.Remove(p);
    }
}

Y obtenemos esto introducir la descripción de la imagen aquí

Como ves podemos agregar o eliminar filas, solo con eliminar y agregar elemento a la lista Personas.

Luego al renderizar y recorrer la lista Personas se agregan los elementos gráficos correspondientes.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.