Estructura de un proyecto de ASP.NET Core

En este capítulo, aprenderás cómo Visual Studio organiza la solución ASP.NET Core o la estructura del proyecto. Creamos el proyecto ASP.NET Core en el último tutorial. La estructura de un proyecto cambia según la plantilla de proyecto que elegimos al crear el proyecto. El wwwroot, las páginas, el controlador, las vistas y los modelos son las otras carpetas que Visual Studio crea para nosotros. Aprenderemos el significado de las carpetas y archivos anteriores en este tutorial.

Estructura de la solución de ASP.NET Core

Abra la solución Hello World ASP.NET Core del último tutorial. Recordemos que utilizamos Visual Studio 2022, .NET 6.0 y ASP.NET Core y la plantilla vacía.

Estructura de solución o proyecto de ASP.NET Core

La solución contiene dos carpetas Dependencias y Properties. Contiene dos archivos en el programa raíz del Program.cs y Startup.cs. Visual Studio también creó la carpeta wwwroot.

Pero, si eliges las otras plantillas como aplicación web (Crea páginas razor) o una aplicación modelo - vista - controlador, obtendrás carpetas de proyecto ligeramente diferentes.


Estructura de proyectos, cuando se elige la plantilla de aplicación web con páginas razor y la plantilla de aplicación web con modelo – vista – controlador.

Las plantillas anteriores también crean carpetas como wwwroot, pages, controller, views y models.

Carpeta Properties

La carpeta Properties contiene un archivo llamado launchSettings.json. Este archivo json contiene todas las configuraciones específicas del proyecto necesarias para iniciar la aplicación. Encontrarás el perfil de depuración, las variables de entorno que deben usarse, etc. en este archivo

Carpeta wwwroot

La carpeta wwwroot es nueva en ASP.NET Core. Los archivos estáticos como HTML, CSS, JavaScript y archivos de imagen van a esta carpeta o cualquier subcarpeta dentro de ella.

ASP.NET Core trata la carpeta wwwroot como la raíz del sitio web. La URL por ejemplo http://estradawebgroup.com/ apunta a wwwroot.

Todos los archivos están disponibles desde la carpeta wwwroot o una subcarpeta dentro de ella. Coloca solo aquellos archivos que deseas que estén disponibles. Esto se llama inclusión en la lista blanca. Los archivos colocados en otra carpeta se bloquean automáticamente.

Los archivos de código deben colocarse fuera de wwwroot. Eso incluye todos tus archivos C#, archivos Razor, archivos de configuración, etc.

Las tres carpetas que se crean automáticamente en esta carpeta son css, js y lib.

La carpeta css contendrá los archivos CSS de la aplicación.

La carpeta js es para los archivos javascript, que es parte de la aplicación.

La carpeta lib es para las bibliotecas de javascript de terceros como jquery, bootstrap, etc. Estos paquetes del lado del cliente se instalan con Libman

Carpeta Pages

Hay dos maneras para crear páginas web en ASP.NET Core. Uno es el antiguo enfoque Modelo-Vista-Controlador. El otro es usando las páginas de Razor. Esta carpeta se crea si eliges la aplicación web con la plantilla de páginas de Razor. Todas las páginas de Razor irán a esta carpeta.

Carpetas Models, Views y Controllers

Estas carpetas contienen los modelos, vistas y archivos relacionados con el controlador. Estas carpetas se crean si eliges la plantilla Model-View-Controller en la aplicación web.

Carpeta Dependencies

Esta carpeta contiene todas las Dependencias del proyecto.

Visual Studio ahora usa paquetes NuGet para todas las dependencias del lado del servidor.

Para las dependencias del lado del cliente, se utiliza Libman. Esta es una desviación de las versiones anteriores en las que se usa NuGet para las dependencias del lado del servidor y del cliente.

En la carpeta Dependencies, tenemos la carpeta NuGet, que contiene paquetes NuGet y la carpeta SDK, que contiene Microsoft.NETCore.App. Este es el Runtime de .Net Core al que apuntamos en nuestro proyecto.

El archivo libman.json se crea cuando instalamos los paquetes de terceros usando libman

Los archivos en tu sistema de archivos ahora son parte de tu proyecto

El archivo del proyecto (.csproj) sufrió muchos cambios en Visual Studio 2022. Ahora se ha vuelto mucho más simple.

Existe una correlación directa entre los archivos en la carpeta de la solución y lo que se muestra en el Explorador de soluciones en Visual Studio. Los archivos que agrega a la carpeta de la solución se convierten automáticamente en parte del Proyecto.

Para demostrar esto, agregaremos un archivo a la estructura de archivos en el Explorador de archivos y lo veremos aparecer en el Explorador de soluciones en tiempo real.

Abre el bloc de notas y pegue el siguiente código

namespace HelloWorld
{    
    public class test
    {
    }
}

Ahora, guarda esto en la carpeta del proyecto HelloWorld.

Visual Studio selecciona automáticamente este archivo y lo agrega al proyecto.

Nuevo sistema de proyectos

Los paquetes de NuGet instalados ahora se enumeran en el archivo .csproj.

Los archivos .csproj se pueden abrir y editar directamente desde Visual Studio.

Ahora puedes hacer clic derecho en el proyecto y editar el archivo .csproj. No es necesario descargar el proyecto antes de hacer esto.

El nuevo archivo csproj contiene muy pocos elementos en comparación con las versiones anteriores de ASP.NET.

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

</Project>

TargetFramework

El TargetFramework es net6.0 que puede modificar desde aquí

También puedes cambiar TargetFramework desde la Propiedad del proyecto (Seleccione Proyecto -> después clic con el botón derecho y seleccione Propiedades). Todo lo que cambies en Project Property se actualiza en el archivo .csproj

Package Manager

NuGet es el administrador de paquetes para las versiones anteriores de Visual Studio. Pero desde .Net Core 2.2 en adelante, tenemos dos administradores de paquetes.

• NuGet para paquetes del lado del servidor
• Libman para paquetes del lado del cliente

NuGet para el lado del servidor

Hay tres formas de agregar paquetes NuGet al proyecto

• Modificando el archivo .csproj
• Uso del Administrador de paquetes NuGet
• A través de la consola del administrador de paquetes

Modificando el archivo .csproj

Selecciona el proyecto y haz clic derecho y clic en Editar HelloWorld.csproj

Agrega el siguiente código y guarda el archivo

    <ItemGroup>
        <PackageReference Include="Microsoft.ApplicationInsights" Version="2.4.0" />
    </ItemGroup>

NuGet Package Manager descarga e instala la dependencia en cuanto guardas el archivo .csproj. La señal amarilla de precaución aparece junto al ensamblaje y desaparece cuando se completa la instalación.

Usando NuGet Package Manager

Seleccione el proyecto y haz clic con el botón derecho y clic en Administrar paquetes NuGet para instalar, actualizar o eliminar paquetes NuGet.

Package Manager Console

Herramientas -.NuGet Package Manager -> Consola de Package Manager abre las ventanas de la consola de Package Manager.

Libman para paquetes del lado del cliente

Libman es la nueva herramienta de administración de paquetes del lado del cliente que se usa en Visual Studio para proyectos ASP.NET Core. El VS ahora tiene soporte integrado para ello.

Puedes abrirlo haciendo clic derecho en la Solución y seleccionando la opción Agregar -> Biblioteca del lado del cliente

Agregar biblioteca del lado del cliente

En Agregar biblioteca del lado del cliente, ingresa el nombre de la biblioteca y haz clic en Instalar para instalarla. De forma predeterminada, los archivos instalados se copian en la carpeta wwwroot/lib

Uso de Libman para agregar una biblioteca del lado del cliente

Resumen

En este tutorial, aprendiste sobre la estructura del proyecto de ASP.NET Core. El equipo de Visual Studio ha realizado muchas mejoras con respecto al sistema anterior.