logoImagina
iconCurso
Te recomendamos nuestro curso de .NET 8
Descubre el curso de .NET 8
Ir al curso
Descubre la formación a tu medida
Rellena el formulario para obtener más información sobre los cursos.
Tamaño de la empresa *
Términos y condiciones *

Tutorial ASP.NET Core, aprende desde cero

iconImage
Publicado 2024-03-01
Actualizado el 2024-03-21

Aprender ASP.NET Core desde cero

Bienvenido al tutorial de primeros pasos con ASP.NET Core. En este tutorial, te guiaré a través de los conceptos fundamentales y te ayudaré a dar tus primeros pasos en el desarrollo web con esta poderosa plataforma. Aprenderás cómo configurar tu entorno de desarrollo, crear tu primera aplicación web, gestionar rutas y controladores, interactuar con bases de datos y mucho más. Ya seas un principiante absoluto o un desarrollador experimentado que busca ampliar su conjunto de habilidades, este tutorial te proporcionará los conocimientos necesarios para comenzar a crear aplicaciones web profesionales con ASP.NET Core.

Ya tienes disponible el curso de la versión más reciente de ASP.NET Core.

¿Qué es ASP.NET Core?

ASP.NET Core es un framework de desarrollo web de código abierto y multiplataforma creado por Microsoft. Es la evolución de ASP.NET, diseñado para ofrecer un rendimiento superior, mayor modularidad y flexibilidad en el desarrollo de aplicaciones web. ASP.NET Core permite a los desarrolladores crear aplicaciones web modernas y escalables utilizando lenguajes de programación como C# o F#. Este framework proporciona una arquitectura basada en middleware que facilita la construcción de aplicaciones robustas y altamente eficientes.

Además, ASP.NET Core ofrece una gran versatilidad, ya que puede ejecutarse en Windows, macOS y Linux, lo que permite desarrollar aplicaciones web en diferentes entornos. Gracias a su amplia compatibilidad, rendimiento optimizado y capacidad de implementación en la nube, ASP.NET Core se ha convertido en una opción popular para el desarrollo web moderno.

¿Por qué utilizar ASP.NET Core?

Muchísimos desarrolladores utilizan ASP.NET Core debido a un cambio en su arquitectura respecto a ASP.NET 4.x dando como resultado un framework más sencillo y modular. Esto se debe a que ASP.NET Core se realizó desde cero, no como una actualización de ASP. NET.

Como toda plataforma de desarrollo moderna es esencial un mecanismo para que los desarrolladores puedan crear, compartir y consumir código útil. ASP.NET Core a diferencia de ASP.NET, utiliza NuGet para distribuir toda esta información.

Un paquete NuGet es una archivo comprimido(por ejemplo ZIP) con la extensión .nupkg que contiene código compilado, otros archivos relacionados con ese código y un manifiesto descriptivo con toda la información del paquete.

NuGet se encarga de definir cómo se crean, hospedan y consumen los paquetes en .NET, y ofrece herramientas para cada uno de esos roles. Gracias a esta forma de empaquetar se reduce el intercambio de información y conseguimos un rendimiento mejorado aumentando así la seguridad de nuestra aplicación.

Principales ventajas

  • Herramientas que simplifican el desarrollo web moderno.
  • Código abierto y centrado en la comunidad.
  • Una plataforma unificada para la creación de interfaz web y las APIs web.
  • Crea y ejecuta aplicaciones multiplataforma ASP.NET Core en windows, Mac y Linux.
  • Capacidad de hospedarse en IIS, Nginx,Apache, Docker o de autohospedarse en su propio proceso.
  • Integración de frameworks del lado del cliente como por ejemplo JavaScriptServices, TypeScript, Bootstrap, Angular.

Modelo Vista Controlador (MVC)

Representación del Modelo Vista Controlador (MVC)

El Modelo-Vista-Controlador separa en tres componentes una aplicación: el modelo, la vista y en controlador.

  • Modelo: se encarga de la implementación de la lógica del dominio de datos de la aplicación.
  • Vista: es el componente encargado de mostrar la interfaz de usuario de la aplicación creado a partir de los datos del modelo.
  • Controlador: controlan la interacción del usuario trabajando con el modelo y seleccionando la vista para representar la interfaz de usuario.

El usuario interactúa con la interfaz de usuario y el controlador recibe la notificación de la acción solicitada por el usuario.

El controlador accede al modelo, actualizando la información. La vista obtiene los datos del modelo para generar de nuevo la interfaz donde el usuario verá la información actualizada.

El modelo MVC ayuda a administrar la complejidad de la aplicación, pudiendo desarrollar en cad momento un único aspecto de la implementación sin afectar a los otros componentes del proyecto.

Debido a que el acoplamiento de las diferentes lógicas son muy vagas favorece el desarrollo en paralelo de los programadores, por ejemplo, un programador puede estar desarrollando tranquilamente los controladores mientras otro programador desarrolla el modelo.Más adelante en el curso profundizaremos mucho más sobre el Modelo-Vista-Controlador.

Razor

Razor es un lenguaje que utiliza ASP.NET Core desde ASP.NET, que combina el marcado de Razor, C#, HTML y se utiliza para insertar código basado en servidor en páginas web.

El código basado en el servidor permite realizar contenido web dinámico sobre la marcha, mientras la página web se escribe en el navegador. Cuando la página es llamada, el servidor ejecuta el código basado en servidor en la página y después la página es devuelta al navegador. Al ejecutar el servidor, el código puede realizar tareas complejas, como por ejemplo, acceder a la base de datos.

Razor admite C# y usa el símbolo @ para realizar la transición de HTML a C#. Cuando hacemos una transición, Razor evalúa las expresiones escritas en C# y las representa en la salida HTML.

Cuando se usa una palabra clave de Razor después de @ realiza una transición a un marcado específico de Razor, en caso contrario realizará una transición a C# simple.A lo largo del curso utilizaremos el lenguaje Razor y podremos ver que los archivos que tienen sintaxis Razor suelen tener la extensión de archivo .cshtml.

Middleware

Estructura Middleware

Es un software intermedio, encargado de controlar las solicitudes y las respuestas de una aplicación mediante una encadenación entre sí, se podría decir que es parecido a una tubería. Estos middleware se representan con fragmentos de código y se pueden expresar como un método anónimo.

Estos métodos intermedios, permiten el paso en la canalización de solicitudes, y son responsables de invocar el siguiente componente de la canalización o cortarla en caso de ser necesario.Se podría decir que actúan como filtros.

Aquí podemos observar un ejemplo de canalización de un middleware, el cliente realiza una solicitud y el middleware controla la canalización con la información de la petición y permite el flujo de datos entre dos entes servidor.

Descubre la formación a tu medida
Rellena el formulario para obtener más información sobre los cursos.
Tamaño de la empresa *
Términos y condiciones *

Instalación

Cómo instalar Visual Studio

Comenzaremos instalando el IDE Visual Studio en su última versión. Utilizaremos Visual Studio Community 2017 ya que es la versión gratuita.

Descarga de Visual Studio desde la página web oficial

Una vez descargado es posible que al abrirlo el sistema operativo nos indique si queremos validar la instalación y confías en el proveedor de ese software, indicaremos que sí. Aparecerá esta ventana y le daremos a continuar.

Instalador de Visual Studio

Se habrá instalado correctamente el instalador de Visual Studio en caso de que aparezca esta ventana. Le indicaremos instalar a Visual Studio Community 2017.

Diferentes opciones de instalación dentro de Visual Studio

Cargas de trabajo en Visual Studio

En el siguiente paso veremos las cargas de trabajo, es un instalador modular dividido por grupos de características necesarias para el lenguaje de programación o la plataforma que se prefiera. En nuestro caso utilizaremos las siguientes:

Selección de Cragas de Trabajo en Visual Studio
Selección de Cragas de Trabajo en la pestaña Web y Nube de Visual Studio
Selección de Cragas de Trabajo en la pestaña Otros conjuntos de herramientas de Visual Studio

En el bloque de dispositivos móviles y juegos no seleccionaremos ninguna carga de trabajo.

Indicaremos “Instalar durante la descarga”.

Opción Instalar durante la descarga

En el instalador aparecerán las barras de progreso para ver cómo va nuestra instalación.

Barras de progreso del instalador de Visual Studio Community 2017

Podemos ver que en el instalador hay un apartado de instalados y ahí se encuentra nuestro IDE. Le damos a “iniciar” para iniciar la aplicación en caso de que anteriormente no le hayamos indicado el inicio automático.

Ventana de instalados de Visual Studio

Instalación del SDK de .NET Core 2.1

A continuación hay que instalar el SDK de .NET Core 2.1. Se deberá escoger el instalador en función de tu sistema operativo.

En caso de que tu Windows sea de 32 bits se deberá escoger x86 y si es de 64 se escogerá x64.

Diferentes instaladores de SDK

Si descargamos el archivo y lo abrimos aparecerá esta pantalla. Para continuar la instalación le pinchamos en “install”.

Instalador de Microsfot .NET Core SDK 2.1.402

Es posible que el sistema operativo te advierta de la instalación del software y deberás confirmar la instalación. Y cerraremos la ventana acabada la instalación.

Instalación de Microsfot .NET Core SDK 2.1.402 terminada

Para verificar que se ha instalado correctamente el SDK debemos abrir la terminal de comandos(cmd) de nuestro respectivo sistema operativo.Escribimos este comando dotnet --info y debería mostrarnos la información del SDK.

Verificación de la instalación del SDK desde el terminal

Nuestra primera aplicación ASP .NET 7

Selección de la plantilla

Para empezar abrimos nuestra aplicación de Visual Studio. Aparecerá una ventana como la imagen a continuación.

Ventana inicial de Visual Studio

Para crear un proyecto abrimos “Archivo” en la esquina superior izquierda.A continuación aparecerá un desplegable, le indicamos “Nuevo” y “Proyecto”.

Pestaña de Archivo de Visual Studio en la barra superior

Nos mostrará la siguiente ventana y en el desplegable de Visual C# buscamos “Aplicación web ASP.NET Core”.Lo llamamos MiWeb e indicamos la ruta donde queremos guardar nuestro proyecto.

Desplegable de la opción Archivo de Visual Studio

Esta ventana aparecerá una vez aceptemos el nuevo proyecto, aquí indicaremos que plantilla queremos que nos genere por defecto la aplicación.

Opciones de Nuevo Proyecto de Visual Studio

Como podemos apreciar hay dos desplegables arriba, deben ser .NET Core y ASP.NET Core 2.1, después seleccionamos la plantilla “Aplicación web”.

Plantilla Aplicación Web en Visual Studio

Una vez creado el proyecto podemos apreciar diferentes ventanas, la principal será donde podremos ver y modificar el código.

Ventana principal del proyecto en Visual Studio

Estructura del proyecto

En la ventana llamada “Explorador de soluciones” que ocupa el espacio superior izquierdo podemos ver la arquitectura de nuestra aplicación.

Ventana Explorador de soluciones

El apartado “Pages” podemos ver un desglose de las páginas que nos ha generado la plantilla.

Estructura de páginas generada con la plantilla

Seleccionamos “Index.cshtml” y deberá tener este aspecto.

Fichero Index.cshtml

Modificación de Index.cshtml

Antes del primer <div> escribimos:

<h1>¡Hola mundo!</h1>

Compilación

A continuación compilamos nuestro proyecto para que nos detecte si hay un error o se encuentra todo correcto.

Si todo ha ido correctamente aparecerá en la ventana inferior llamada “Salida” lo siguiente.

Ventana Salida con el resultado de la compilación

Para iniciar la aplicación en la barra de herramientas superior podemos ver un botón llamado IIS Express, lo presionamos para que inicie la emulación del servidor para ver nuestra página web.

Botón IIS Express

Es posible que nos salga un aviso de seguridad para confiar en el certificado de desarrollo, debemos aceptar la instalación.

Aviso de seguridad para confiar en el certificado de desarrollo

Veremos el resultado, como ha cambiado el título de la página

Curso de .NET

En conclusión, este tutorial de primeros pasos con ASP.NET Core te ha proporcionado una sólida base para comenzar a desarrollar aplicaciones web con esta poderosa plataforma. Has aprendido los conceptos fundamentales, configurado tu entorno de desarrollo y explorado diversas características clave de ASP.NET Core.

Sin embargo, este tutorial es solo el comienzo de tu viaje en el mundo del desarrollo web con ASP.NET Core. Te invitamos a seguir explorando y profundizando en este fascinante tema. Si deseas llevar tus habilidades al siguiente nivel, te animamos a consultar nuestra página del curso de .NET, donde encontrarás recursos adicionales, lecciones avanzadas y proyectos prácticos que te ayudarán a convertirte en un experto en .NET. ¡Continúa tu aprendizaje y aprovecha todo el potencial de ASP.NET Core en tus futuros proyectos web!

Descubre la formación a tu medida
Rellena el formulario para obtener más información sobre los cursos.
Tamaño de la empresa *
Términos y condiciones *
iconClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClient