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 ---