Ejercicio: Personalización del proyecto

  • 12 minutos

El equipo ha dividido el trabajo de la aplicación de administración del inventario de pizzas. Sus compañeros de equipo han creado la aplicación web ASP.NET Core para usted y ya han creado un servicio para leer y escribir pizza en una base de datos. Se le ha asignado para trabajar en la página Lista de pizzas, que mostrará una lista de pizzas y le permitirá agregar nuevas pizzas a la base de datos. Empezaremos explorando el proyecto para comprender cómo se organiza.

Nota:

En este módulo se usan la CLI (interfaz de la línea de comandos) de .NET y Visual Studio Code para el desarrollo local. Cuando complete este módulo, podrá aplicar los conceptos mediante Visual Studio (Windows) o seguir con el desarrollo mediante Visual Studio Code (Windows, Linux y macOS).

Obtención de los archivos de proyecto

Si usa GitHub Codespaces, solo tiene que abrir el repositorio en el explorador, seleccionar Código y, después, crear un codespace en la rama main.

Si no usa GitHub Codespaces, obtenga los archivos del proyecto y ábralos en Visual Studio Code con los pasos siguientes:

  1. Abra un shell de comandos y clone el proyecto desde GitHub mediante la línea de comandos:

    git clone https://github.com/MicrosoftDocs/mslearn-create-razor-pages-aspnet-core

  2. Vaya al directorio mslearn-create-razor-pages-aspnet-core y abra el proyecto en Visual Studio Code:

    cd mslearn-create-razor-pages-aspnet-core
code .

Sugerencia

Si tiene instalado un entorno de ejecución de contenedor compatible, puede usar la extensión Dev Containers para abrir el repositorio en un contenedor con las herramientas preinstaladas.

Revisión del trabajo de sus compañeros de equipo

Dediquemos un momento a familiarizarnos con el código de la carpeta ContosoPizza. El proyecto es una aplicación web ASP.NET Core creada con el comando dotnet new webapp. Los cambios realizados por los compañeros de equipo se describen a continuación.

Sugerencia

No dedique demasiado tiempo en revisar estos cambios. Sus compañeros de equipo ya han realizado el trabajo para crear la base de datos y el servicio para leer y escribir pizzas en la base de datos, pero no realizaron ningún cambio en la interfaz de usuario. Va a crear una interfaz de usuario que consuma su servicio en la unidad siguiente.

  • Se agregó una carpeta Models al proyecto.
    • La carpeta model contiene una clase Pizza que representa una pizza.
  • Se agregó una carpeta Data al proyecto.
    • La carpeta Data contiene una clase PizzaContext que representa el contexto de la base de datos. Hereda de la clase DbContext en Entity Framework Core. Entity Framework Core es un asignador relacional de objetos (ORM) que facilita el trabajo con bases de datos.
  • Se agregó una carpeta Services al proyecto.
    • La carpeta Services contiene una clase PizzaService que expone métodos para enumerar y agregar pizzas.
    • La clase PizzaService usa la clase PizzaContext para leer y escribir pizzas en la base de datos.
    • La clase se registra para la inserción de dependencias en Program.cs (línea 10).

Entity Framework Core también generó algunas cosas:

  • Se generó una carpeta Migrations.
    • La carpeta Migrations contiene código para crear el esquema de la base de datos.
  • Se generó el archivo de base de datos SQLite ContosoPizza.db.
    • Si tiene instalada la extensión SQLite (o usa GitHub Codespaces), puede ver la base de datos haciendo clic con el botón derecho en el archivo y seleccionando Abrir base de datos. El esquema de la base de datos se muestra en la pestaña SQLite Explorer del panel Explorador.

Revisión de la estructura del proyecto de Razor Pages

Todo lo demás del proyecto no cambia desde el momento en que se creó el proyecto. En la tabla siguiente se describe la estructura del proyecto generada por el comando dotnet new webapp.

Nombre Descripción
Pages/ Contiene Razor Pages y archivos auxiliares. Cada página de Razor tiene un archivo .cshtml y un archivo PageModel de clase .cshtml.cs.
wwwroot/ Contiene archivos de recursos estáticos, como HTML, JavaScript y CSS.
ContosoPizza.csproj Contiene los metadatos de configuración del proyecto, como las dependencias.
Program.cs Actúa como punto de entrada de la aplicación y configura el comportamiento de la aplicación, como el enrutamiento.

Otras observaciones destacadas:

  • Archivos de página de Razor y su archivo de clase PageModel emparejado

    Las páginas de Razor se almacenan en el directorio Pages. Como se indicó anteriormente, cada página de Razor tiene un archivo .cshtml y un archivo PageModel de clase .cshtml.cs. La clase PageModel permite la separación de la lógica y la presentación de una página de Razor, define los controladores de página para las solicitudes y encapsula las propiedades de datos y la lógica con ámbito en su página de Razor.

  • La estructura de directorios Pages y las solicitudes de enrutamiento de páginas

    Razor Pages usa la estructura del directorio Pages como convención para el enrutamiento de las solicitudes. En la tabla siguiente se muestra cómo se asignan las direcciones URL a los nombres de archivo:

    Resolución Asignaciones a la página de Razor
    www.domain.com /Pages/Index.cshtml
    www.domain.com/Index /Pages/Index.cshtml
    www.domain.com/Privacy Pages/Privacy.cshtml
    www.domain.com/Error Pages/Error.cshtml

    Las subcarpetas del directorio Pages se usan para organizar las páginas de Razor. Por ejemplo, si hubiera un directorio Pages/Products, las direcciones URL reflejarían esa estructura:

    Resolución Asignaciones a la página de Razor
    www.domain.com/Products Pages/Products/Index.cshtml
    www.domain.com/Products/Index Pages/Products/Index.cshtml
    www.domain.com/Products/Create Pages/Products/Create.cshtml

  • Diseño y otros archivos compartidos

    Hay varios archivos que se comparten entre varias páginas. Estos archivos determinan las importaciones de páginas y elementos de diseño comunes. En la siguiente tabla se describe la finalidad de cada campo.

    Archivo Descripción
    _ViewImports.cshtml Importa espacios de nombres y clases que se usan en varias páginas.
    _ViewStart.cshtml Especifica el diseño predeterminado para todas las páginas de Razor.
    Pages/Shared/_Layout.cshtml Este es el diseño especificado por el archivo _ViewStart.cshtml. Implementa elementos de diseño comunes en varias páginas.
    Pages/Shared/_ValidationScriptsPartial.cshtml Proporciona funcionalidad de validación a todas las páginas.

Ejecución del proyecto por primera vez

Vamos a ejecutar el proyecto para que podamos verlo en acción.

  1. Haga clic con el botón derecho en la carpeta ContosoPizza en el Explorador y seleccione Abrir en terminal integrado. Se abre una ventana de terminal en el contexto de la carpeta del proyecto.

  2. Escriba el siguiente comando en la ventana de la terminal:

    dotnet watch

    Este comando:

    • Compila el proyecto.
    • Inicia la aplicación.
    • Busca cambios en los archivos y reinicia la aplicación cuando detecta un cambio.

  3. El IDE le pide que abra la aplicación en un explorador. Seleccione Abrir en el explorador.

    Sugerencia

    También puede abrir la aplicación buscando la dirección URL en la ventana de la terminal. Mantenga presionada la tecla Ctrl y haga clic en la dirección URL para abrirla en un explorador.

  4. Compare la página principal representada con Pages/Index.cshtml en el IDE:

    • Observe la combinación de código HTML, sintaxis de Razor y C# en el archivo.
      • La sintaxis de Razor se indica mediante caracteres @.
      • El código de C# se incluye en bloques @{ }. Tome nota de las directivas en la parte superior del archivo:
      • La directiva @page especifica que este archivo es una página de Razor.
      • La directiva @model especifica el tipo de modelo de la página (en este caso, IndexModel, que se define en Pages/Index.cshtml.cs).
    • Revise el bloque de código de C#.
      • El código establece el valor del elemento Title dentro del diccionario ViewData en "Página principal".
      • El diccionario ViewData se usa para pasar datos entre la página de Razor y la clase IndexModel.
      • En tiempo de ejecución, el valor Title se usa para establecer el elemento <title> de la página.

Deje la aplicación en ejecución en la ventana de la terminal. Lo usaremos en las próximas unidades. Deje también la pestaña del explorador con la aplicación Contoso Pizza en ejecución. Realizará cambios en la aplicación y el explorador se actualizará automáticamente para mostrar los cambios.

Personalización de la página de aterrizaje

Vamos a realizar algunos cambios en la página de aterrizaje para que sea más relevante para la aplicación de pizza.

  1. En Pages/Index.cshtml, reemplace el código del bloque de código de C# por el código siguiente:

    ViewData["Title"] = "The Home for Pizza Lovers";
TimeSpan timeInBusiness = DateTime.Now - new DateTime(2018, 8, 14);

    El código anterior:

    • Establece el valor del elemento Title dentro del diccionario ViewData en "The Home for Pizza Lovers".
    • Calcula la cantidad de tiempo transcurrido desde que se abrió la empresa.

  2. Modifique el código HTML de la siguiente manera:

    • Reemplace el elemento <h1> por el código siguiente:

      <h1 class="display-4">Welcome to Contoso Pizza</h1>

    • Reemplace el elemento <p> por el código siguiente:

      <p class="lead">The best pizza in town for @Convert.ToInt32(timeInBusiness.TotalDays) days!</p>

    El código anterior:

    • Cambia el encabezado a "Le damos la bienvenida a Contoso Pizza".
    • Muestra el número de días transcurridos desde que se abrió la empresa.
      • El carácter @ se usa para cambiar de HTML a sintaxis de Razor.
      • El método Convert.ToInt32 se usa para convertir la propiedad TotalDays de la variable timeInBusiness en un entero.
      • La clase Convert forma parte del espacio de nombres System, que el elemento importa automáticamente <ImplicitUsings> en el archivo ContosoPizza.csproj.

  3. Guarde el archivo. La pestaña del explorador con la aplicación se actualiza automáticamente para mostrar los cambios. Si usa GitHub Codespaces, el archivo se guarda automáticamente, pero tendrá que actualizar manualmente la pestaña del explorador.

Importante

Vigile la ventana de la terminal con dotnet watch cada vez que guarde el archivo. A veces, el código puede contener lo que llama a una edición superficial. Esto significa que el código que ha cambiado no se puede volver a compilar sin reiniciar la aplicación. Si se le pide que reinicie la aplicación, presione y (sí) o a (siempre). Siempre puede detener la aplicación presionando Ctrl+C dos veces en la ventana del terminal y, a continuación, reiníciela ejecutando dotnet watch de nuevo.

Ha realizado sus primeros cambios en una página de Razor. En la unidad siguiente, agregará una nueva página a la aplicación para mostrar una lista de pizzas.