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.

Este tutorial le mostrará cómo:

  • 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.

Necesitará Visual Studio para completar este tutorial. Visite la página de descargas de Visual Studio para obtener una versión gratuita.

Crear un proyecto

En primer lugar, creará un proyecto de ASP.NET Core. El tipo de proyecto incluye todos los archivos de plantilla que necesitará para crear un sitio web totalmente funcional.

  1. Abra Visual Studio 2017.

  2. En la barra de menús superior, seleccione Archivo > Nuevo > Proyecto.

  3. En el panel de la izquierda del cuadro de diálogo Nuevo proyecto, expanda Visual C# , expanda el nodo Web y seleccione .NET Core. En el panel central, seleccione Aplicación web ASP.NET Core. A continuación, asigne el nombre MyCoreApp al archivo y seleccione Aceptar.

    Plantilla de proyecto Aplicación web de ASP.NET Core en el cuadro de diálogo Nuevo proyecto en el IDE de Visual Studio.

Agregar una carga de trabajo (opcional)

Si no ve la plantilla de proyecto Aplicación web ASP.NET Core, puede obtenerla mediante la adición de la carga de trabajo Desarrollo de ASP.NET y web. Puede agregar esta carga de trabajo de una de las dos formas siguientes, según las actualizaciones de Visual Studio 2017 que estén instaladas en el equipo.

Opción 1: Uso del cuadro de diálogo Nuevo proyecto

  1. Seleccione el vínculo Abrir el Instalador de Visual Studio en el panel de la izquierda del cuadro de diálogo Nuevo proyecto. Según la configuración de pantalla, es posible que tenga que desplazarse para verlo.

    Seleccione el vínculo Abrir el Instalador de Visual Studio en el cuadro de diálogo Nuevo proyecto.

  2. Una vez que se inicie Instalador de Visual Studio, seleccione la carga de trabajo Desarrollo de ASP.NET y web y, después, seleccione Modificar. Es posible que Visual Studio se tenga que cerrar, mientras se instala la carga de trabajo seleccionada.

    Carga de trabajo Desarrollo multiplataforma de .NET Core en el Instalador de Visual Studio.

Opción 2: Uso de la barra del menú Herramientas

  1. Cancele el cuadro de diálogo Nuevo proyecto. Después, en la barra de menús superior, seleccione Herramientas > Obtener herramientas y características.

  2. Una vez que se inicie Instalador de Visual Studio, seleccione la carga de trabajo Desarrollo de ASP.NET y web y, después Modificar. Es posible que Visual Studio se tenga que cerrar, mientras se instala la carga de trabajo seleccionada.

Agregar una plantilla de proyecto

  1. En el cuadro de diálogo Nueva aplicación web ASP.NET Core, seleccione la plantilla de proyecto Aplicación web.

  2. Compruebe que ASP.NET Core 2.1 aparece en el menú desplegable superior. Después, seleccione Aceptar.

    Cuadro de diálogo Nueva aplicación web ASP.NET Core.

    Nota

    Si no ve ASP.NET Core 2.1 en el menú desplegable superior, asegúrese de que se ejecuta la versión más reciente de Visual Studio. Para más información sobre cómo actualizar la instalación, vea Actualización de Visual Studio a la versión más reciente. página.

  1. En la ventana de inicio, seleccione Crear un proyecto.

    Captura de pantalla en la que se muestra la ventana de inicio Visual Studio. La opción Crear un proyecto está resaltada.

  2. 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.

    Captura de pantalla en la que se muestra la plantilla de proyecto Aplicación web de ASP.NET Core resaltada en el cuadro de diálogo Nuevo proyecto.

    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? , en la parte inferior de la lista de plantillas, seleccione el vínculo Instalar más herramientas y características.

    Captura de pantalla en la que se muestra el vínculo Instalar más herramientas y características que forma parte del mensaje "¿No encuentra lo que busca?".

    A continuación, en Instalador de Visual Studio, seleccione Desarrollo de ASP.NET y web.

    Captura de pantalla en la que se muestra la carga de trabajo Desarrollo multiplataforma de .NET Core en el Instalador de Visual Studio.

    Seleccione Modificar en el Instalador de Visual Studio. Es posible que se le pida que guarde su trabajo. Seguidamente, seleccione Continuar para instalar la carga de trabajo.

  3. En la ventana Configurar el nuevo proyecto, escriba MyCoreApp en el campo Nombre del proyecto. Después, seleccione Siguiente.

    Captura de pantalla en la que se muestra la ventana Configurar el nuevo proyecto con MyCoreApp escrito en el campo Nombre del proyecto.

  4. 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:

    • No. 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 Active Directory, Azure AD o Microsoft 365 para la autenticación.
    • Windows. Conveniente para las aplicaciones de intranet.

    Deje desactivada la casilla Habilitar Docker y seleccione Ninguno en Tipo de autenticación. A continuación, seleccione Crear.

    Captura de pantalla en la que se muestra la configuración predeterminada en la ventana Información adicional. El valor de Framework es .NET Core 3.1.

    Visual Studio abrirá el nuevo proyecto.

  1. En la ventana de inicio, seleccione Crear un proyecto.

    Captura de pantalla en la que se muestra la ventana de inicio Visual Studio. La opción Crear un proyecto está resaltada.

  2. 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.

    Captura de pantalla en la que se muestra la plantilla de proyecto Aplicación web de ASP.NET Core seleccionada y resaltada en la página Crear un nuevo proyecto.

    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? , en la parte inferior de la lista de plantillas, seleccione el vínculo Instalar más herramientas y características.

    Captura de pantalla en la que se muestra el vínculo Instalar más herramientas y características que forma parte del mensaje "¿No encuentra lo que busca?".

    Después, en el Instalador de Visual Studio, seleccione la carga de trabajo Desarrollo de ASP.NET y web.

    Captura de pantalla en la que se muestra la carga de trabajo Desarrollo de ASP.NET y web seleccionada en el Instalador de Visual Studio.

    Seleccione Modificar en el Instalador de Visual Studio. Es posible que se le pida que guarde su trabajo. Seguidamente, seleccione Continuar para instalar la carga de trabajo.

  3. En la ventana Configurar el nuevo proyecto, escriba MyCoreApp en el campo Nombre del proyecto. Después, seleccione Siguiente.

    Captura de pantalla en la que se muestra la ventana Configurar el nuevo proyecto con MyCoreApp escrito en el campo Nombre del proyecto.

  4. En la ventana Información adicional, compruebe que .NET 6.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:

    • No. 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 Active Directory, Azure AD o Microsoft 365 para la autenticación.
    • Windows. Conveniente para las aplicaciones de intranet.

    Deje desactivada la casilla Habilitar Docker y seleccione Ninguno en Tipo de autenticación. A continuación, seleccione Crear.

    Captura de pantalla en la que se muestra la configuración predeterminada en la ventana Información adicional. El valor de Framework es .NET 6.0.

    Visual Studio abrirá 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

  1. La plantilla de proyecto crea una solución con un solo proyecto de ASP.NET Core que se denomina MyCoreApp. Seleccione la pestaña Explorador de soluciones para ver el contenido.

    Captura de pantalla en la que se muestra el proyecto MyCoreApp seleccionado en el Explorador de soluciones en Visual Studio.

  2. Expanda la carpeta Páginas y expanda About.cshtml.

    Captura de pantalla en la que se muestra el archivo About.cshtml seleccionado en el Explorador de soluciones en Visual Studio.

  3. Vea el archivo About.cshtml en el editor de código.

    Captura de pantalla en la que se muestra el archivo About.cshtml en el editor de código de Visual Studio.

  4. Seleccione el archivo About.cshtml.cs.

    Captura de pantalla en la que se muestra el archivo About.cshtml.cs seleccionado en el Explorador de soluciones en Visual Studio.

  5. Vea el archivo About.cshtml.cs en el editor de código.

    Captura de pantalla en la que se muestra el contenido del archivo About.cshtml.cs en el editor de código de Visual Studio.

  6. El proyecto contiene una carpeta wwwroot que es la raíz del sitio web. Expanda la carpeta para ver su contenido.

    Captura de pantalla en la que se muestra la carpeta wwwroot seleccionada en el Explorador de soluciones de Visual Studio.

    Puede colocar contenido estático del sitio —como CSS, imágenes y bibliotecas de JavaScript— directamente en las rutas de acceso que quiera.

  7. 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 nodo appsettings.json para ver el archivo appsettings.Development.json.

    Captura de pantalla en la que se muestra el nodo appsettings.json seleccionado y expandido en el Explorador de soluciones de Visual Studio.

Ejecutar, depurar y realizar cambios

  1. Seleccione el botón IIS Express de la barra de herramientas 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.

    Captura de pantalla en la que se muestra el botón IIS Express resaltado en la barra de herramientas de Visual Studio.

    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 ello, 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 y después en caso de recibir un mensaje de advertencia de seguridad.

  2. Visual Studio inicia una ventana del explorador. Luego debería ver las páginas Inicio, Acerca de y Contacto en la barra de menús. Si no ve las páginas, seleccione el elemento de menú "hamburguesa" para verlas.

    Captura de pantalla en la que se muestra el proyecto MyCoreApp y el elemento de menú de hamburguesa resaltado en la barra de menús de la aplicación web.

  3. Seleccione Acerca de en la barra de menús.

    Captura de pantalla e la que se muestra Acerca de resaltado en la barra de menús de la aplicación web.

    Entre otras cosas, la página Acerca de en el explorador representa el texto que se establece en el archivo About.cshtml.

    Captura de pantalla en la que se muestra la página Acerca de de la aplicación web.

  4. 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.

  5. En Visual Studio, seleccione About.cshtml. Después, elimine la palabra another y reemplácela por file y directory.

    Captura de pantalla en la que se muestra el contenido del archivo About.cshtml en el editor de código de Visual Studio.

  6. Seleccione About.cshtml.cs. Luego, limpie las directivas using que se encuentran al inicio del archivo con el siguiente método abreviado:

    Mantenga el mouse o seleccione una directiva using atenuada. Aparecerá una bombilla Acciones rápidas justo debajo del símbolo de intercalación o en el margen izquierdo. Seleccione la bombilla y después Eliminar instrucciones Using innecesarias.

    Captura de pantalla en la que se muestra la opción Eliminar instrucciones Using innecesarias resaltada.  Está debajo del icono de bombilla Acciones rápidas.

    Visual Studio elimina las directivas using innecesarias del archivo.

  7. Luego, en el método OnGet(), cambie el cuerpo por el código siguiente:

    public void OnGet()
    {
        string directory = Environment.CurrentDirectory;
        Message = String.Format("Your directory is {0}.", directory);
    }
    
  8. Observe que aparecerán dos caracteres de subrayado ondulados en Environment y String. Los caracteres de subrayado ondulados aparecen porque estos tipos están fuera del ámbito.

    Captura de pantalla en la que se muestran marcas de error, en forma de subrayado ondulado, para Entorno y Cadena en el editor de código.

    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.

    Captura de pantalla en la que se muestra la barra de herramientas Lista de errores de Visual Studio con Entorno y Cadena en la lista.

  9. Ahora se corregirá este error. En el editor de código, coloque el cursor en cualquiera de las líneas que contienen 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.

    Captura de pantalla en la que se muestran las opciones de Acciones rápidas en su menú desplegable con el mouse sobre using System.

  10. Presione Ctrl+S para guardar los cambios y, a continuación, presione F5 para abrir el proyecto en el explorador web.

  11. En la parte superior del sitio web, seleccione Acerca de para ver los cambios.

    Captura de pantalla en la que se muestra la página Acerca de de la página web con los cambios.

  12. Cierre el explorador web y presione Mayús+F5 para detener la depuración.

Cambio de la página Acerca de

  1. En el Explorador de soluciones, expanda la carpeta Páginas y después seleccione About.cshtml.

    Captura de pantalla en la que se muestra About.cshtml seleccionado en el nodo Páginas del Explorador de soluciones.

    El archivo About.cshtml se corresponde a una página denominada Acerca de en la aplicación web, que se ejecuta en un explorador web.

    Captura de pantalla en la que se muestra la página Acerca de de la aplicación web en la ventana del explorador.

    En el editor de código, verá código HTML para el texto que aparece en la página Acerca de.

    Captura de pantalla en la que se muestra el archivo About.cshtml de la página Inicio en el editor de código de Visual Studio.

  2. Reemplace el texto Use esta área para proporcionar información adicional con Hola mundo.

    Captura de pantalla en la que se muestra el archivo About.cshtml en el editor de código de Visual Studio con el texto predeterminado cambiado a Hola mundo.

  3. En el Explorador de soluciones, expanda About.cshtml y luego seleccione About.cshtml.cs. Este archivo también se corresponde con la página Acerca de en el explorador web.

    Captura de pantalla en la que se muestra el archivo About.cshtml.cs seleccionado en el nodo About.cshtml del Explorador de soluciones.

    En el editor, verá código de C# que incluye texto para el área Descripción de la aplicación de la página Acerca de.

    Captura de pantalla en la que se muestra código de C# para el área de descripción de la aplicación en el editor de código.

  4. Reemplace el texto Página de descripción de la aplicación por ¿Cuál es mi mensaje? .

    Captura de pantalla del editor de código en la que se muestra el texto La descripción de la aplicación aquí cambiado por ¿Cuál es mi mensaje?

  5. Seleccione IIS Express o presione Ctrl+F5 para ejecutar la aplicación y abrirla en un explorador web.

    Captura de pantalla en la que se muestra el botón IIS Express resaltado en la barra de herramientas de Visual Studio

  6. En el explorador web, verá los nuevos cambios en la página Acerca de.

    Captura de pantalla en la que se muestra la página Acerca de de la aplicación web en la ventana del explorador. El texto actualizado indica ¿Cuál es mi mensaje? "¡Hola mundo!"

  7. Cierre el explorador web, presione Mayús+F5 para detener la depuración y guarde el proyecto. Ya puede cerrar Visual Studio.

Revisión del trabajo

Vea la animación siguiente para comprobar el trabajo que ha realizado en la sección anterior:

Gif animado en el que se muestran todos los pasos para cambiar el texto de la página Acerca de.

Recorrido por la solución

  1. La plantilla de proyecto crea una solución con un solo proyecto de ASP.NET Core que se denomina MyCoreApp. Seleccione la pestaña Explorador de soluciones para ver el contenido.

    Captura de pantalla en la que se muestra el proyecto MyCoreApp seleccionado en el Explorador de soluciones en Visual Studio.

  2. Expanda la carpeta Páginas.

    Captura de pantalla en la que se muestra el contenido de la carpeta Páginas en el Explorador de soluciones de Visual Studio.

  3. Seleccione el archivo Index.cshtml y examínelo en el editor de código.

    Captura de pantalla en la que se muestra el archivo Index.cshtml abierto en el editor de código de Visual Studio.

  4. 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.

    Captura de pantalla en la que se muestra el archivo Index.cshtml seleccionado en el Explorador de soluciones en Visual Studio.

  5. Vea el archivo Index.cshtml.cs en el editor de código.

    Captura de pantalla en la que se muestra el archivo Index.cshtml.cs abierto en el editor de código de Visual Studio.

  6. El proyecto contiene una carpeta wwwroot que es la raíz del sitio web. Expanda la carpeta para ver su contenido.

    Captura de pantalla en la que se muestra la carpeta wwwroot seleccionada en el Explorador de soluciones de Visual Studio.

    Puede colocar contenido estático del sitio —como CSS, imágenes y bibliotecas de JavaScript— directamente en las rutas de acceso que quiera.

  7. 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.

    Captura de pantalla en la que se muestra el nodo appsettings.json seleccionado y expandido en el Explorador de soluciones de Visual Studio.

Ejecutar, depurar y realizar cambios

  1. Seleccione el botón IIS Express de la barra de herramientas 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.

    Captura de pantalla en la que se muestra el botón IIS Express resaltado en la barra de herramientas de Visual Studio.

    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 ello, 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 y después en caso de recibir un mensaje de advertencia de seguridad.

  2. Visual Studio inicia una ventana del explorador. Debería ver las páginas Inicio y Privacidad en la barra de menús.

  3. Seleccione Privacidad en la barra de menús. La página Privacidad del explorador representa el texto que se establece en el archivo Privacy.cshtml.

    Captura de pantalla en la que se muestra la página de privacidad de MyCoreApp con un texto que indica que se use la página para detallar la directiva de privacidad del sitio.

  4. 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.

  5. 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"]).

    Captura de pantalla en la que se muestra el archivo Privacy.cshtml abierto en el editor de código de Visual Studio con el texto actualizado.

  6. 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. Aparecerá una bombilla Acciones rápidas justo debajo del símbolo de intercalación o en el margen izquierdo. Seleccione la bombilla y después Eliminar instrucciones Using innecesarias.

    Captura de pantalla en la que se muestra el archivo Privacy.cshtml en el editor de código de Visual Studio con la información sobre herramientas Acciones rápidas expuesta para una directiva using atenuada.

    Ahora, seleccione Vista previa de los cambios para ver lo que cambiará.

    Captura de pantalla en la que se muestra el cuadro de diálogo Vista previa de los cambios. En el cuadro de diálogo se muestra la directiva que se va a quitar y una vista previa del cambio de código después de la eliminación.

    Seleccione Aplicar. Visual Studio elimina las directivas using innecesarias del archivo.

  7. 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;
    }
    
  8. Observe que aparece un subrayado ondulado bajo DateTime. El subrayado ondulado aparece porque este tipo está fuera del ámbito.

    Captura de pantalla en la que se muestra una marca de error, en forma de subrayado ondulado, para DateTime en el editor de código de Visual Studio.

    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.

    Captura de pantalla en la que se muestra la barra de herramientas Lista de errores en Visual Studio con DateTime en la lista.

  9. 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.

    Captura de pantalla en la que se muestran las opciones de Acciones rápidas en su menú desplegable con el mouse sobre using System.

  10. Presione F5 para abrir el proyecto en el explorador web.

  11. En la parte superior del sitio web, seleccione Privacidad para ver los cambios.

    Captura de pantalla en la que se muestra la página Privacidad actualizada con los cambios realizados.

  12. Cierre el explorador web y presione Mayús+F5 para detener la depuración.

Cambio de la página principal

  1. En el Explorador de soluciones, expanda la carpeta Páginas y, después, seleccione Index.cshtml.

    Captura de pantalla en la que se muestra Index.cshtml seleccionado en el nodo Páginas del Explorador de soluciones.

    El archivo Index.cshtml se corresponde con la página Inicio de la aplicación web, que se ejecuta en un explorador web.

     Captura de pantalla en la que se muestra la página principal de la aplicación web en la ventana del explorador.

    En el editor de código, verá código HTML para el texto que se muestra en la página Inicio.

    Captura de pantalla en la que se muestra el archivo Index.cshtml de la página Inicio en el editor de código de Visual Studio.

  2. Reemplace el texto Welcome (Bienvenido) por Hola mundo.

    Captura de pantalla en la que se muestra el archivo Index.cshtml en el editor de código de Visual Studio con el texto Welcome (Bienvenido) cambiado a Hola mundo.

  3. Seleccione IIS Express o presione Ctrl+F5 para ejecutar la aplicación y abrirla en un explorador web.

    Captura de pantalla en la que se muestra el botón IIS Express resaltado en la barra de herramientas de Visual Studio.

  4. En el explorador web, verá los nuevos cambios en la página Inicio.

    Captura de pantalla en la que se muestra la página principal de la aplicación web en la ventana del explorador. El texto actualizado indica Hola mundo.

  5. 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

  1. La plantilla de proyecto crea una solución con un solo proyecto de ASP.NET Core que se denomina MyCoreApp. Seleccione la pestaña Explorador de soluciones para ver el contenido.

    Captura de pantalla en la que se muestra el proyecto MyCoreApp seleccionado y su contenido en el Explorador de soluciones en Visual Studio.

  2. Expanda la carpeta Páginas.

    Captura de pantalla en la que se muestra el contenido de la carpeta Páginas en el Explorador de soluciones.

  3. Seleccione el archivo Index.cshtml y examínelo en el editor de código.

    Captura de pantalla en la que se muestra el archivo Index.cshtml abierto en el editor de código de Visual Studio.

  4. 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.

    Captura de pantalla en la que se muestra el archivo Index.cshtml seleccionado en el Explorador de soluciones en Visual Studio.

  5. Vea el archivo Index.cshtml.cs en el editor de código.

    Captura de pantalla en la que se muestra el archivo Index.cshtml.cs abierto en el editor de código de Visual Studio.

  6. El proyecto contiene una carpeta wwwroot que es la raíz del sitio web. Expanda la carpeta para ver su contenido.

    Captura de pantalla en la que se muestra la carpeta wwwroot seleccionada en el Explorador de soluciones en Visual Studio.

    Puede colocar contenido estático del sitio —como CSS, imágenes y bibliotecas de JavaScript— directamente en las rutas de acceso que quiera.

  7. 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.

    Captura de pantalla en la que se muestra appsettings.json seleccionado y expandido, que expone appsettings.Development.json, en el Explorador de soluciones en Visual Studio.

Ejecutar, depurar y realizar cambios

  1. Seleccione el botón IIS Express de la barra de herramientas 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.

    Captura de pantalla en la que se muestra el botón IIS Express resaltado en la barra de herramientas de Visual Studio.

    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 ello, 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 y después en caso de recibir un mensaje de advertencia de seguridad.

  2. Visual Studio inicia una ventana del explorador. Debería ver las páginas Inicio y Privacidad en la barra de menús.

  3. Seleccione Privacidad en la barra de menús. La página Privacidad del explorador representa el texto que se establece en el archivo Privacy.cshtml.

    Captura de pantalla en la que se muestra la página de privacidad de MyCoreApp con un texto que indica que se use la página para detallar la directiva de privacidad del sitio.

  4. 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.

  5. 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"]).

    Captura de pantalla en la que se muestra el archivo Privacy.cshtml abierto en el editor de código de Visual Studio con el texto actualizado.

  6. 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. Aparecerá una bombilla Acciones rápidas justo debajo del símbolo de intercalación o en el margen izquierdo. Seleccione la bombilla y después Eliminar instrucciones Using innecesarias.

    Captura de pantalla en la que se muestra el archivo Privacy.cshtml en el editor de código de Visual Studio con la información sobre herramientas Acciones rápidas abierta y la vista previa de los cambios resaltada.

    Ahora, seleccione Vista previa de los cambios para ver lo que cambiará.

    Captura de pantalla en la que se muestra el cuadro de diálogo Vista previa de los cambios. En el cuadro de diálogo se muestra la directiva que se va a quitar y una vista previa del cambio de código después de la eliminación.

    Seleccione Aplicar. Visual Studio elimina las directivas using innecesarias del archivo.

  7. 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;
}
  1. Observe que aparece un subrayado ondulado bajo CultureInfo. El subrayado ondulado aparece porque este tipo está fuera del ámbito.

    Captura de pantalla en la que se muestra una marca de error, en forma de subrayado ondulado, para CultureInfo en el editor de código de Visual Studio.

    Abra la barra de herramientas Lista de errores para ver el mismo error 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.

    Captura de pantalla en la que se muestra la barra de herramientas Lista de errores en Visual Studio con CultureInfo en la lista y una directiva using que falta.

  2. 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.Globalization; para agregar esta directiva al inicio del archivo y solucionar los errores.

    Captura de pantalla en la que se muestran las opciones de Acciones rápidas en su menú desplegable con el mouse sobre la directiva System.Globalization.

  3. Presione F5 para abrir el proyecto en el explorador web.

  4. En la parte superior del sitio web, seleccione Privacidad para ver los cambios.

    Captura de pantalla en la que se muestra la página Privacidad de MyCoreApp con los cambios realizados para agregar la fecha.

  5. Cierre el explorador web y presione Mayús+F5 para detener la depuración.

Cambio de la página principal

  1. En el Explorador de soluciones, expanda la carpeta Páginas y, después, seleccione Index.cshtml.

    Captura de pantalla en la que se muestra Index.cshtml seleccionado en el nodo Páginas del Explorador de soluciones.

    El archivo Index.cshtml se corresponde con la página Inicio de la aplicación web, que se ejecuta en un explorador web.

    Captura de pantalla en la que se muestra la página principal de la aplicación web en la ventana del explorador.

    En el editor de código, verá código HTML para el texto que se muestra en la página Inicio.

    Captura de pantalla que muestra el archivo Index.cshtml en la página principal del editor de código de Visual Studio.

  2. Reemplace el texto Welcome (Bienvenido) por Hola mundo.

    Captura de pantalla en la que se muestra el archivo Index.cshtml en el editor de código de Visual Studio con el texto de bienvenida cambiado a "Hola mundo".

  3. Seleccione IIS Express o presione Ctrl+F5 para ejecutar la aplicación y abrirla en un explorador web.

    Captura de pantalla en la que se muestra el botón IIS Express resaltado en la barra de herramientas de Visual Studio.

  4. En el explorador web, verá los nuevos cambios en la página Inicio.

    Captura de pantalla en la que se muestra la página principal de la aplicación web en la ventana del explorador. El texto actualizado indica "Hola mundo".

  5. 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:

Si lo prefiere, puede aprender a contenedorizar la aplicación web con Docker:

Vea también

Publicar una aplicación web en Azure App Service mediante Visual Studio