Introducción a Ignite UI for Blazor aplicación web

    En este tema se proporcionan instrucciones paso a paso para crear aplicaciones de aplicaciones web Blazor con Ignite UI for Blazor mediante Visual Studio.

    Create a New Blazor Web App Project

    En los pasos siguientes se describe cómo crear un nuevo proyecto de aplicación web Blazor. Si desea agregar Ignite UI for Blazor a una aplicación existente, vaya a la sección Instalar Ignite UI for Blazor paquete.

    Inicie Visual Studio 2022 y haga clic en Crear un nuevo proyecto en la página de inicio, seleccione la plantilla de aplicación web Blazor y haga clic en Siguiente.

    new-blazor-project-web-app

    Proporcione un nombre y una ubicación del proyecto y haga clic en Siguiente

    new-blazor-project-configuring-web-app

    En el siguiente paso, ten en cuenta la configuración opcional de la ubicación de Interactividad, ya que por defecto es por página, dentro del proyecto Cliente. Por ejemplo, @rendermode InteractiveAuto. La otra opción, Global, traslada el modo de renderizado de Interactividad configurado a App.razor, en una ubicación, dentro del proyecto Blazor compartido. Por ejemplo, <Routes @rendermode="InteractiveAuto"/>

    Especifique opciones de proyecto adicionales y haga clic en Crear

    new-blazor-project-web-app-info

    Install Ignite UI for Blazor

    Ignite UI for Blazor se entrega a través de paquetes NuGet. Para utilizar los componentes Ignite UI for Blazor en sus aplicaciones Blazor, primero debe instalar los paquetes NuGet adecuados.

    En Visual Studio, abra el administrador de paquetes NuGet seleccionando Herramientas → Administrador de paquetes NuGet → Administrar paquetes NuGet para la solución. Seleccione todos los proyectos de destino para la instalación del paquete y, a continuación, busque e instale el paquete NuGet IgniteUI.Blazor.

    Para obtener más información sobre cómo instalar Ignite UI for Blazor mediante NuGet, lea el tema Instalación Ignite UI for Blazor.

    Register Ignite UI for Blazor

    1 - Abra el archivo Program.cs del servidor y registre el servicio Ignite UI for Blazor llamando al generador. Services.AddIgniteUIBlazor función:

    var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

builder.Services.AddIgniteUIBlazor();

var app = builder.Build();

    Abra la Program.cs del cliente y agregue el mismo servicio.

    var builder = WebAssemblyHostBuilder.CreateDefault(args);

builder.Services.AddIgniteUIBlazor();

await builder.Build().RunAsync();

    2 - Agregue el espacio de nombres IgniteUI.Blazor.Controls en los archivos_Imports.razor en los proyectos de cliente y servidor:

    @using IgniteUI.Blazor.Controls

    3 - Agregue la hoja de estilos en el elemento <head> del archivo Components/App.razor en el proyecto de servidor:

    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />

    <link rel="stylesheet" href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" />

    Para aplicaciones .NET 9 o posteriores, se recomienda usar la propiedad de colección Assets.

    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />

    <link rel="stylesheet" href="@Assets["_content/IgniteUI.Blazor/themes/light/bootstrap.css"]" />

    4 - Agregue una referencia de script al archivo Components/App.razor:

    <script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
<script src="_framework/blazor.web.js"></script>

    Add Ignite UI for Blazor Component

    Agregue un componente Ignite UI for Blazor a la página de Razor (tenga en cuenta que Ignite UI for Blazor componentes requieren modos de representación interactivos como InteractiveServer, InteractiveWebAssembly o InteractiveAuto. Para la interactividad "Por página/componente", asegúrese de que el modo de representación interactiva se especifica en las páginas que utilizan componentes Ignite UI):

    <IgbCard style="width:350px">
    <IgbCardMedia>
        <img src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=350&q=80" />
    </IgbCardMedia>
    <IgbCardHeader>
        <h4>Jane Doe</h4>
        <h6>Professional Photographer</h6>
    </IgbCardHeader>
    <IgbCardContent>Hi! I'm Jane, photographer and filmmaker.
        Photography is a way of feeling, of touching,
        of loving. What you have caught on film is captured forever...
        it remembers little things, long after you have
        forgotten everything.</IgbCardContent>
    <IgbCardActions>
        <IgbButton>More Info</IgbButton>
    </IgbCardActions>
</IgbCard>

    Construya y ejecute la aplicación Blazor.

    Carta de Inicio-Blazor