Tutorial: Introducci贸n a C# y ASP.NET Core en Visual Studio
En este tutorial para el desarrollo de C# con ASP.NET Core, crear谩 una aplicaci贸n web de ASP.NET Core de C# en Visual Studio.
En este tutorial se muestra c贸mo realizar las siguientes acciones:
- Creaci贸n de un proyecto de Visual Studio
- Crear una aplicaci贸n web de ASP.NET Core de C#
- Realizar cambios en la aplicaci贸n web
- Explorar las caracter铆sticas del IDE
- Ejecutar la aplicaci贸n web
Prerrequisitos
Necesitar谩 Visual Studio para completar este tutorial. Visite la p谩gina de descargas de Visual Studio para obtener una versi贸n gratuita.
Para m谩s informaci贸n sobre c贸mo actualizar a la versi贸n m谩s reciente de Visual Studio, vea Actualizaciones de Visual Studio.
Para personalizar la experiencia de Visual Studio, vea Personalizaci贸n del IDE y el editor de Visual Studio.
Crear un proyecto
En primer lugar, debe crear un proyecto de ASP.NET Core. El tipo de proyecto incluye todos los archivos de plantilla que necesita para crear un sitio web totalmente funcional.
En la ventana de inicio, seleccione Crear un proyecto.
En la ventana Crear un nuevo proyecto, seleccione C# en la lista Lenguaje. A continuaci贸n, seleccione Windows en la lista Plataforma y Web en la lista Tipos de proyecto.
Despu茅s de aplicar los filtros de lenguaje, plataforma y tipo de proyecto, seleccione la plantilla Aplicaci贸n web de ASP.NET Core y, luego, Siguiente.
Nota:
Si no ve la plantilla Aplicaci贸n web ASP.NET Core, puede instalarla desde la ventana Crear un nuevo proyecto.
En el mensaje 驴No encuentra lo que busca? de la parte inferior de la lista de plantillas, seleccione el v铆nculo Instalar m谩s herramientas y caracter铆sticas.
En Instalador de Visual Studio, seleccione Desarrollo de ASP.NET y web.
Seleccione Modificar en el Instalador de Visual Studio. Es posible que se le pida que guarde su trabajo. Seleccione Continuar para instalar la carga de trabajo.
Vuelva al paso 2 de este procedimiento " Crear un proyecto".
En la ventana Configurar el nuevo proyecto, escriba MyCoreApp en el campo Nombre del proyecto. A continuaci贸n, seleccione Siguiente.
En la ventana Informaci贸n adicional, compruebe que .NET Core 3.1 aparece en el campo Plataforma de destino.
Desde esta ventana, puede habilitar la compatibilidad con Docker y agregar compatibilidad con la autenticaci贸n. El men煤 desplegable de Tipo de autenticaci贸n tiene las cuatro opciones siguientes:
- Ninguna: sin autenticaci贸n.
- Cuentas individuales: estas autenticaciones se almacenan en una base de datos local o basada en Azure.
- Plataforma de identidad de Microsoft: esta opci贸n usa Microsoft Entra ID o Microsoft 365 para la autenticaci贸n.
- Windows: adecuado para las aplicaciones de intranet.
Deje desactivada la casilla Habilitar Docker y seleccione Ninguno en Tipo de autenticaci贸n.
Seleccione Crear.
Visual Studio se abre en el nuevo proyecto.
En la ventana de inicio, seleccione Crear un proyecto.
En la ventana Crear un nuevo proyecto, seleccione C# en la lista Lenguaje. A continuaci贸n, seleccione Windows en la lista Plataforma y Web en la lista Tipos de proyecto.
Despu茅s de aplicar los filtros de lenguaje, plataforma y tipo de proyecto, seleccione la plantilla Aplicaci贸n web de ASP.NET Core y, luego, Siguiente.
Nota:
Si no ve la plantilla Aplicaci贸n web ASP.NET Core, puede instalarla desde la ventana Crear un nuevo proyecto.
En el mensaje 驴No encuentra lo que busca? de la parte inferior de la lista de plantillas, seleccione el v铆nculo Instalar m谩s herramientas y caracter铆sticas.
En Instalador de Visual Studio, seleccione la carga de trabajo Desarrollo de ASP.NET y web.
Seleccione Modificar en el Instalador de Visual Studio. Es posible que se le pida que guarde su trabajo. Seleccione Continuar para instalar la carga de trabajo.
Vuelva al paso 2 de este procedimiento " Crear un proyecto".
En la ventana Configurar el nuevo proyecto, escriba MyCoreApp en el campo Nombre del proyecto. Despu茅s, seleccione Siguiente.
En la ventana Informaci贸n adicional, compruebe que .NET 8.0 aparece en el campo Plataforma de destino.
Desde esta ventana, puede habilitar la compatibilidad con Docker y agregar compatibilidad con la autenticaci贸n. El men煤 desplegable de Tipo de autenticaci贸n tiene las cuatro opciones siguientes:
- Ninguna: sin autenticaci贸n.
- Cuentas individuales: estas autenticaciones se almacenan en una base de datos local o basada en Azure.
- Plataforma de identidad de Microsoft: esta opci贸n usa Microsoft Entra ID o Microsoft 365 para la autenticaci贸n.
- Windows: adecuado para las aplicaciones de intranet.
Deje desactivada la casilla Habilitar Docker y seleccione Ninguno en Tipo de autenticaci贸n.
Seleccione Crear.
Visual Studio se abre en el nuevo proyecto.
Acerca de la soluci贸n
Esta soluci贸n sigue el modelo de dise帽o Razor Page. La diferencia con el modelo de dise帽o Modelo-Vista-Controlador (MVC) es que est谩 optimizado para incluir el modelo y el c贸digo de control dentro de la misma Razor Page.
Recorrido por la soluci贸n
La plantilla de proyecto crea una soluci贸n con un solo proyecto de ASP.NET Core denominado MyCoreApp. Seleccione la pesta帽a Explorador de soluciones para ver el contenido.
Expanda la carpeta P谩ginas.
Seleccione el archivo Index.cshtml y exam铆nelo en el editor de c贸digo.
Cada archivo .cshtml tiene un archivo de c贸digo asociado. Para abrir el archivo de c贸digo en el editor, expanda el nodo Index.cshtml en Explorador de soluciones y seleccione el archivo Index.cshtml.cs.
Vea el archivo Index.cshtml.cs en el editor de c贸digo.
El proyecto contiene una carpeta wwwroot, que es la ra铆z del sitio web. Expanda la carpeta para ver su contenido.
Puede colocar contenido est谩tico del sitio como CSS, im谩genes y bibliotecas de JavaScript directamente en las rutas de acceso que quiera.
El proyecto tambi茅n contiene archivos de configuraci贸n que administran la aplicaci贸n web en tiempo de ejecuci贸n. La configuraci贸n predeterminada de la aplicaci贸n se almacena en appsettings.json. Sin embargo, puede invalidar esta configuraci贸n mediante el uso de appsettings.Development.json.
Expanda el archivo appsettings.json para ver el archivo appsettings.Development.json.
Ejecutar, depurar y realizar cambios
En la barra de herramientas, seleccione el bot贸n IIS Express para compilar y ejecutar la aplicaci贸n en modo de depuraci贸n. Como alternativa, presione F5, o bien vaya a Depurar>Iniciar depuraci贸n desde la barra de men煤s.
Nota:
Si recibe un mensaje de error que indica No se puede conectar al servidor web "IIS Express" , cierre Visual Studio y, despu茅s, vuelva a iniciar el programa como administrador. Para realizar esta tarea, haga clic con el bot贸n derecho en el icono de Visual Studio desde el men煤 Inicio y seleccione la opci贸n Ejecutar como administrador en el men煤 contextual.
Tambi茅n es posible que obtenga un mensaje que le pregunta si desea aceptar un certificado SSL de IIS Express. Para ver el c贸digo en un explorador web, seleccione S铆 y despu茅s S铆 en caso de recibir un mensaje de advertencia de seguridad.
Visual Studio inicia una ventana del explorador. Deber铆a ver las p谩ginas Inicio y Privacidad en la barra de men煤s.
Seleccione Privacidad en la barra de men煤s. En la p谩gina Privacidad del explorador se representa el texto que se establece en el archivo Privacy.cshtml.
Vuelva a Visual Studio y presione May煤s+F5 para detener la depuraci贸n. Con esta acci贸n se cierra el proyecto en la ventana del explorador.
En Visual Studio, abra Privacy.cshtml para editarlo. A continuaci贸n, elimine la frase Use this page to detail your site's privacy policy (Use esta p谩gina para detallar la directiva de privacidad del sitio) y reempl谩cela por This page is under construction as of @ViewData["TimeStamp"] (Esta p谩gina est谩 en construcci贸n desde ["marca de tiempo"]).
Ahora, vamos a realizar un cambio en el c贸digo. Seleccione Privacy.cshtml.cs. Luego, limpie las directivas
using
que se encuentran al inicio del archivo con el m茅todo abreviado siguiente:Mantenga el mouse o seleccione una directiva
using
atenuada. Aparece una bombilla Acciones r谩pidas debajo del s铆mbolo de intercalaci贸n o en el margen izquierdo. Seleccione la bombilla y despu茅s Eliminar instrucciones Using innecesarias.Ahora, seleccione Vista previa de los cambios para ver lo que cambia.
Seleccione Aplicar. Visual Studio elimina las directivas
using
innecesarias del archivo.Luego, en el m茅todo
OnGet()
, cambie el cuerpo por el c贸digo siguiente:public void OnGet() { string dateTime = DateTime.Now.ToShortDateString(); ViewData["TimeStamp"] = dateTime; }
Observe que aparece un subrayado ondulado bajo DateTime. El subrayado ondulado aparece porque este tipo est谩 fuera del 谩mbito.
Abra la barra de herramientas Lista de errores para ver los mismos errores en la lista. Si no ve la barra de herramientas Lista de errores, vaya a Ver>Lista de errores en la barra de men煤s superior.
Ahora se corregir谩 este error. En el editor de c贸digo, coloque el cursor en la l铆nea que contiene el error y, despu茅s, seleccione la bombilla Acciones r谩pidas ubicada en el margen izquierdo. Luego, en el men煤 desplegable, seleccione using System; para agregar esta directiva al inicio del archivo y solucionar los errores.
Presione F5 para abrir el proyecto en el explorador web.
En la parte superior del sitio web, seleccione Privacidad para ver los cambios.
Cierre el explorador web y presione May煤s+F5 para detener la depuraci贸n.
Cambio de la p谩gina principal
En el Explorador de soluciones, expanda la carpeta P谩ginas y, despu茅s, seleccione Index.cshtml.
El archivo Index.cshtml se corresponde con la p谩gina Inicio de la aplicaci贸n web, que se ejecuta en un explorador web.
En el editor de c贸digo, ver谩 c贸digo HTML para el texto que se muestra en la p谩gina Inicio.
Reemplace el texto Welcome (Bienvenido) por Hola mundo.
Seleccione IIS Express o presione Ctrl+F5 para ejecutar la aplicaci贸n y abrirla en un explorador web.
En el explorador web, ver谩 los nuevos cambios en la p谩gina Inicio.
Cierre el explorador web, presione May煤s+F5 para detener la depuraci贸n y guarde el proyecto. Ya puede cerrar Visual Studio.
Recorrido por la soluci贸n
La plantilla de proyecto crea una soluci贸n con un solo proyecto de ASP.NET Core denominado MyCoreApp. Seleccione la pesta帽a Explorador de soluciones para ver el contenido.
Expanda la carpeta P谩ginas.
Seleccione el archivo Index.cshtml y exam铆nelo en el editor de c贸digo.
Cada archivo .cshtml tiene un archivo de c贸digo asociado. Para abrir el archivo de c贸digo en el editor, expanda el nodo Index.cshtml en Explorador de soluciones y seleccione el archivo Index.cshtml.cs.
Vea el archivo Index.cshtml.cs en el editor de c贸digo.
El proyecto contiene una carpeta wwwroot, que es la ra铆z del sitio web. Expanda la carpeta para ver su contenido.
Puede colocar contenido est谩tico del sitio como CSS, im谩genes y bibliotecas de JavaScript directamente en las rutas de acceso que quiera.
El proyecto tambi茅n contiene archivos de configuraci贸n que administran la aplicaci贸n web en tiempo de ejecuci贸n. La configuraci贸n predeterminada de la aplicaci贸n se almacena en appsettings.json. Sin embargo, puede invalidar esta configuraci贸n mediante el uso de appsettings.Development.json. Expanda el archivo appsettings.json para ver el archivo appsettings.Development.json.
Ejecutar, depurar y realizar cambios
En la barra de herramientas, seleccione el bot贸n IIS Express para compilar y ejecutar la aplicaci贸n en modo de depuraci贸n. Como alternativa, presione F5, o bien vaya a Depurar>Iniciar depuraci贸n desde la barra de men煤s.
Nota:
Si recibe un mensaje de error que indica No se puede conectar al servidor web "IIS Express" , cierre Visual Studio y, despu茅s, vuelva a iniciar el programa como administrador. Para realizar esta tarea, haga clic con el bot贸n derecho en el icono de Visual Studio desde el men煤 Inicio y seleccione la opci贸n Ejecutar como administrador en el men煤 contextual.
Tambi茅n es posible que obtenga un mensaje que le pregunta si desea aceptar un certificado SSL de IIS Express. Para ver el c贸digo en un explorador web, seleccione S铆 y despu茅s S铆 en caso de recibir un mensaje de advertencia de seguridad.
Visual Studio inicia una ventana del explorador. Deber铆a ver las p谩ginas Inicio y Privacidad en la barra de men煤s.
Seleccione Privacidad en la barra de men煤s. En la p谩gina Privacidad del explorador se representa el texto que se establece en el archivo Privacy.cshtml.
Vuelva a Visual Studio y presione May煤s+F5 para detener la depuraci贸n. Con esta acci贸n se cierra el proyecto en la ventana del explorador.
En Visual Studio, abra Privacy.cshtml para editarlo. A continuaci贸n, elimine la frase Use this page to detail your site's privacy policy (Use esta p谩gina para detallar la directiva de privacidad del sitio) y reempl谩cela por This page is under construction as of @ViewData["TimeStamp"] (Esta p谩gina est谩 en construcci贸n desde ["marca de tiempo"]).
Ahora, vamos a realizar un cambio en el c贸digo. Seleccione Privacy.cshtml.cs. Luego, limpie las directivas
using
que se encuentran al inicio del archivo mediante el siguiente m茅todo abreviado:Mantenga el mouse o seleccione una directiva
using
atenuada. Aparece una bombilla Acciones r谩pidas debajo del s铆mbolo de intercalaci贸n o en el margen izquierdo. Seleccione la bombilla y, a continuaci贸n, seleccione la flecha de expansi贸n situada junto a Quitar usos innecesarios.Ahora, seleccione Vista previa de los cambios para ver lo que cambia.
Seleccione Aplicar. Visual Studio elimina las directivas
using
innecesarias del archivo.Luego, cree una cadena para la fecha actual con el formato de la referencia cultural o regi贸n mediante el m茅todo DateTime.ToString.
- El primer argumento del m茅todo especifica c贸mo se debe mostrar la fecha. En este ejemplo se usa el especificador de formato (
d
) que indica el formato de fecha corta. - El segundo argumento es el objeto CultureInfo que especifica la referencia cultural o regi贸n de la fecha. El segundo argumento determina, entre otras cosas, el idioma de las palabras de la fecha y el tipo de separadores usados.
Cambie el cuerpo del m茅todo
OnGet()
por el c贸digo siguiente:public void OnGet() { string dateTime = DateTime.Now.ToString("d", new CultureInfo("en-US")); ViewData["TimeStamp"] = dateTime; }
- El primer argumento del m茅todo especifica c贸mo se debe mostrar la fecha. En este ejemplo se usa el especificador de formato (
Observe que la siguiente directiva
using
se agrega autom谩ticamente a la parte superior del archivo:using System.Globalization;
System.Globalization
contiene la clase CultureInfo.Presione F5 para abrir el proyecto en el explorador web.
En la parte superior del sitio web, seleccione Privacidad para ver los cambios.
Cierre el explorador web y presione May煤s+F5 para detener la depuraci贸n.
Cambio de la p谩gina principal
En el Explorador de soluciones, expanda la carpeta P谩ginas y, despu茅s, seleccione Index.cshtml.
El archivo Index.cshtml se corresponde con la p谩gina Inicio de la aplicaci贸n web, que se ejecuta en un explorador web.
En el editor de c贸digo, ver谩 c贸digo HTML para el texto que se muestra en la p谩gina Inicio.
Reemplace el texto Welcome (Bienvenido) por Hola mundo.
Seleccione IIS Express o presione Ctrl+F5 para ejecutar la aplicaci贸n y abrirla en un explorador web.
En el explorador web, ver谩 los nuevos cambios en la p谩gina Inicio.
Cierre el explorador web, presione May煤s+F5 para detener la depuraci贸n y guarde el proyecto. Ya puede cerrar Visual Studio.
Pasos siguientes
Enhorabuena por completar este tutorial. Esperamos que haya disfrutado el aprendizaje sobre C#, ASP.NET Core y el IDE de Visual Studio. Para obtener m谩s informaci贸n sobre c贸mo crear una aplicaci贸n web o un sitio web con C# y ASP.NET, contin煤e con el tutorial siguiente:
Creaci贸n de una aplicaci贸n web de p谩ginas de Razor con ASP.NET Core
Si lo prefiere, puede aprender a contenedorizar la aplicaci贸n web con Docker:
Herramientas de contenedor de Visual Studio
Vea tambi茅n
Publicar una aplicaci贸n web en Azure App Service mediante Visual Studio
Comentarios
Pr贸ximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para m谩s informaci贸n, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de