Categoría: Blazor

Blazor, Desarrollo

Añadir EF a un proyecto de 6.0

Publicado el por franoterocom

Instalar nuggets:

Install-Package Microsoft.EntityFrameworkCore
Install-Package Microsoft.EntityFrameworkCore.Design
Install-Package Microsoft.EntityFrameworkCore.SqlServer

ACTUALIZA Data Entity Tools

dotnet tool update --global dotnet-ef

Crear DataContext desde consola de proyecto:

dotnet ef dbcontext scaffold "Server=.\SQL2019;Initial Catalog=NombreDB;Integrated Security=True;Connection Timeout=30;TrustServerCertificate=true;" Microsoft.EntityFrameworkCore.SqlServer --data-annotations --context NombreContexto--context-dir EF --output-dir EF --force

Compila, y ya está listo para añadir al contenedor de dependencias:

builder.Services.AddDbContextFactory<ApplicationDbContext>(options =>
    options.UseSqlServer(connectionString));
Anuncio publicitario
0
Blazor, Desarrollo

Enlace bidireccional de parámetro a componente

Publicado el por franoterocom

Hay dos formas básicas:

  • Usando bind-nombre del parámetro
  • Usando la combinación de unir el parámetro y subscribirse al evento de cambio.
<p>@ID</p>
<p>@ID2</p>
<form>
    <SelectIdearia @bind-Valor=ID ></SelectIdearia>
    <SelectIdearia Valor=ID2 ValorChanged=OnChange></SelectIdearia>
    <button>OK</button>
</form>

Normalmente la opción con bind es más cómoda, pero si se necesita actualizar algo en cuanto el valor cambia puede sernos útil la segunda.

public Guid ID { get; set; }
public Guid ID2 { get; set; }
public void OnChange(Guid args)=>ID2 = args;

La elección del nombre del evento no es libre, debe nombrarse como ParametroChanged para que funcione correctametne la sintaxis con @bind

La sintaxis en el emisor del evento para declaración e invocación es así:

[Parameter]
public EventCallback<Guid> KeyChanged { get; set; }

KeyChanged.InvokeAsync(value);
0
Blazor, Desarrollo

Componente con plantilla

Publicado el por franoterocom

Ejemplo sencillo de como crear componentes con plantilla, esto es, componentes que aceptan como parámetro su contenido

@using System.Diagnostics.CodeAnalysis
@if (ModalHeader != null)
{
    <div class="modal-header">
        @ModalHeader
    </div>
}
<div class="modal-body">
    @ModalBody
</div>
@if (ModalFooter != null)
{
    <div class="modal-footer">
        @ModalFooter
    </div>
}
@code {
    [Parameter, AllowNull]
    public RenderFragment? ModalHeader { get; set; }
    [Parameter]
    public RenderFragment ModalBody { get; set; } = null!;
    [Parameter, AllowNull]
    public RenderFragment? ModalFooter { get; set; }

  }

La forma de usar este componente sería algo así:

<Modal>
    <ModalHeader>
        <h4>Hola</h4>
    </ModalHeader>
    <ModalBody>
        <form>
            <input />
        </form>
    </ModalBody>
</Modal>

Muy interesante el uso avanzado, puede ponerse como componente genérico y que cada fragmento acepte un parámetro. El ejemplo de la página oficial de Microsoft es muy explicativo:

https://docs.microsoft.com/en-us/aspnet/core/blazor/components/templated-components?view=aspnetcore-6.0

0