Anterior

Siguientes

Creación de una biblioteca de clases de Razor

Completado

En este ejercicio, creará un cuadro de diálogo modal en una biblioteca de clases de Razor que puede reutilizar en la aplicación de plantilla de Blazor predeterminada.

Creación del proyecto de la biblioteca de clases de Razor

En este módulo se usa el SDK de .NET 6.0. Asegúrese de que tiene instalado .NET 6.0 mediante la ejecución del siguiente comando en la terminal que prefiera:

dotnet --list-sdks

Verá un resultado similar al siguiente:

3.1.100 [C:\program files\dotnet\sdk]
5.0.100 [C:\program files\dotnet\sdk]
6.0.100 [C:\program files\dotnet\sdk]

Asegúrese de que aparezca una versión que comience en 6. Si no aparece ninguna o no se encuentra el comando, instale el SDK más reciente de .NET 6.0.

En primer lugar, vamos a crear el proyecto de la biblioteca de clases de Razor para un componente de cuadro de diálogo modal. Puede usar Visual Studio para crear un proyecto o puede crearlo en una carpeta nueva con la herramienta de línea de comandos de .NET de la siguiente manera:

dotnet new razorclasslib -o FirstClassLibrary -f net8.0

Creación del componente de cuadro de diálogo modal

A continuación, crearemos el componente modal en nuestro proyecto con un archivo CSS adecuado para trabajar con él y proporcionar un formato inicial.

1. Cambie el nombre del archivo Component1.razor a Modal.razor y el del archivo Component1.razor.css a Modal.razor.css. El archivo Modal.razor contiene el componente que crearemos y, en el futuro, puede agregar archivos de texto en blanco al proyecto y aplicarles formato con contenido para Razor o CSS según corresponda.

2. Agregue el siguiente contenido de Razor al archivo Modal.razor:

   @if (Show) {
   
    <div class="dialog-container">
     <div class="dialog">
      <div class="dialog-title">
       <h2>@Title</h2>
      </div>
   
      <div class="dialog-body">
       @ChildContent
      </div>
   
      <div class="dialog-buttons">
       <button class="btn btn-secondary mr-auto" @onclick="OnCancel">@CancelText</button>
       <button class="btn btn-success ml-auto" @onclick="OnConfirm">@ConfirmText</button>
      </div>
   
     </div>
    </div>
   
   }
   
   @code {
   
    [Parameter]
    public string Title { get; set; }
   
    [Parameter]
    public string CancelText { get; set; } = "Cancel";
   
    [Parameter]
    public string ConfirmText { get; set; } = "Ok";
   
    [Parameter]
    public RenderFragment ChildContent { get; set; }
   
    [Parameter]
    public bool Show { get; set; }
   
   
    [Parameter] public EventCallback OnCancel { get; set; }
    [Parameter] public EventCallback OnConfirm { get; set; }
   
   }
   

   Este componente tiene varias características útiles que queremos compartir entre nuestros proyectos:

   • Un título.
   • Botones Cancelar y Confirmar, con etiquetas que puede configurar y hacer clic en los eventos que puede administrar.
   • Puede establecer el contenido interno del componente a través del parámetro ChildContent.
   • Puede controlar el estado de presentación del cuadro de diálogo con el parámetro Show.

3. Para proporcionar formato predeterminado para el componente, agregue el siguiente archivo CSS al archivo Modal.razor.css:

   .dialog-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2000;
    display: flex;
    animation: dialog-container-entry 0.2s;
   }
   
   @keyframes dialog-container-entry {
    0% {
      opacity: 0;
    }
   
    100% {
      opacity: 1;
    }
   }
   
   .dialog {
    background-color: white;
    box-shadow: 0 0 12px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    z-index: 2000;
    align-self: center;
    margin: auto;
    width: 700px;
    max-height: calc(100% - 3rem);
    animation: dialog-entry 0.4s;
    animation-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
   }
   
   @keyframes dialog-entry {
    0% {
      transform: translateY(30px) scale(0.95);
    }
   
    100% {
      transform: translateX(0px) scale(1.0);
    }
   }
   
   .dialog-title {
    background-color: #444;
    color: #fff2cc;
    padding: 1.3rem 0.5rem;
   }
   
    .dialog-title h2 {
      color: white;
      font-size: 1.4rem;
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.3rem;
    }
   
   .dialog-body {
    flex-grow: 1;
    padding: 0.5rem 3rem 1rem 0.5rem;
   }
   
   .dialog-buttons {
    height: 4rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    background-color: #eee;
    padding: 0 1rem;
   }
   

Este marcado proporciona un color predeterminado a una barra de título y una barra de botones en la parte inferior, lo que hace que sea más interesante que un conjunto sencillo de elementos HTML de color gris.

Referencia y uso del componente modal

Con el componente modal que reside en el proyecto FirstClassLibrary, vamos a agregar una nueva aplicación de servidor Blazor y a empezar a usar el componente modal.

1. Cree un proyecto de Blazor Server llamado MyBlazorApp en una carpeta junto al proyecto FirstClassLibrary mediante la característica Agregar nuevo proyecto de Visual Studio o ejecutando el siguiente comando:

   dotnet new blazor -o MyBlazorApp -f net8.0
   

2. En el proyecto MyBlazorApp, agregue una referencia al proyecto FirstClassLibrary mediante la característica Agregar referencia de Visual Studio o la ejecución del siguiente comando desde la carpeta MyBlazorServer:

   dotnet add reference ../FirstClassLibrary
   

Con esta referencia de proyecto en su lugar, la aplicación MyBlazorApp puede interactuar con los componentes del proyecto FirstClassLibrary.

1. Facilite la referencia al componente modal añadiendo una entrada al final del archivo _Imports.razor en la carpeta Componentes de la aplicación MyBlazorApp. De este modo, puede hacer referencia al componente modal sin tener que especificar el espacio de nombres completo para el componente.

   @using FirstClassLibrary
   

2. Agregue un componente modal a la página de apertura de esta aplicación, el archivo Components/Pages/Home.razor

   <Modal Title="My first Modal dialog" Show="true">
    <p>
      This is my first modal dialog
    </p>
   </Modal>
   

   a. Dé al componente un título, "Mi primer cuadro de diálogo modal".
   b. Agregue un párrafo corto que se mostrará dentro del cuadro de diálogo. Este contenido describe el propósito del certificado.
   c. Establezca el cuadro de diálogo para que sea visible mediante el parámetro Show.

Comprobar el trabajo

Inicie la aplicación MyBlazorApp con dotnet run y vaya a ella en el explorador. El cuadro de diálogo Mi primer cuadro de diálogo modal debe mostrarse delante del resto del contenido en la pantalla.

Continuar