Tutorial: Introducción a C# y ASP.NET Core en Visual Studio

1. Abra Visual Studio 2017.

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

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

   

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

   

2. Se iniciará el Instalador de Visual Studio. Elija la carga de trabajo Desarrollo de ASP.NET y web y después haga clic en Modificar.

   

   (Es posible que deba cerrar Visual Studio para continuar con la instalación de la carga de trabajo nueva).

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, elija Herramientas > Obtener herramientas y características.

2. Se iniciará el Instalador de Visual Studio. Elija la carga de trabajo Desarrollo de ASP.NET y web y después haga clic en Modificar.

   (Es posible que deba cerrar Visual Studio para continuar con la instalación de la carga de trabajo nueva).

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, elija Aceptar.

   

   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 obtener más información sobre cómo actualizar la instalación, vea la página Actualización de Visual Studio a la versión más reciente.

1. En la ventana de inicio, elija Crear un nuevo proyecto.

   

2. En la ventana Crear un nuevo proyecto, elija C# en la lista Idioma. 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, elija la plantilla Aplicación web 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? , elija el vínculo Instalar más herramientas y características.

   

   Luego, en el Instalador de Visual Studio, elija la carga de trabajo Desarrollo de ASP.NET y web.

   

   Después, elija el botón Modificar en el Instalador de Visual Studio. Si se le pide que guarde su trabajo, hágalo. Seguidamente, elija Continuar para instalar la carga de trabajo. Luego, vuelva al paso 2 de este procedimiento "Crear un proyecto".

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

   

4. En la ventana Información adicional, compruebe que .NET Core 3.1 aparece en el menú desplegable superior. Tenga en cuenta que puede habilitar la compatibilidad con Docker activando la casilla. También puede agregar compatibilidad con la autenticación, para lo que debe hacer clic en el botón Cambiar autenticación. Ahí, puede elegir entre las siguientes opciones:

   • Ninguna: sin autenticación.
   • Cuentas individuales: 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. Seleccione Crear.

   

   Visual Studio abrirá el nuevo proyecto.

1. En la ventana de inicio, elija Crear un nuevo proyecto.

   

2. En la ventana Crear un nuevo proyecto, elija C# en la lista Idioma. 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, elija la plantilla Aplicación web 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? , elija el vínculo Instalar más herramientas y características.

   

   Luego, en el Instalador de Visual Studio, elija la carga de trabajo Desarrollo de ASP.NET y web.

   

   Después, elija el botón Modificar en el Instalador de Visual Studio. Si se le pide que guarde su trabajo, hágalo. Seguidamente, elija Continuar para instalar la carga de trabajo. Luego, vuelva al paso 2 de este procedimiento "Crear un proyecto".

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

   

4. En la ventana Información adicional, compruebe que .NET 6.0 aparece en el campo Marco. En esta ventana, puede habilitar la compatibilidad con Docker si activa la casilla. También puede agregar compatibilidad con la autenticación si selecciona un valor en la lista desplegable Tipo de autenticación. Ahí, puede elegir entre las siguientes opciones:

   • Ninguna: sin autenticación.
   • Cuentas individuales: las 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 como tipo de autenticación. Seleccione Crear.

   

   Visual Studio abrirá el nuevo proyecto.

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. Elija la pestaña Explorador de soluciones para ver el contenido.

   

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

   

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

   

4. Elija el archivo About.cshtml.cs.

   

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

   

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

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.

   

Ejecutar, depurar y realizar cambios

1. Haga clic en el botón IIS Express del IDE para compilar y ejecutar la aplicación en modo de depuración. (O bien, presione F5 o elija Depurar > Iniciar depuración en 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, luego, ábralo mediante la opción Ejecutar como administrador que aparece si hace clic con el botón derecho o en el menú contextual. A continuación, vuelva a ejecutar la aplicación.

   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, elija Sí y luego, si recibe un mensaje de advertencia de seguridad de seguimiento, elija Sí.

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 es así, elija el elemento de menú "hamburguesa" para verlas).

   

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

   

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

   

4. Vuelva a Visual Studio y, a continuación, presione Mayús+F5 para detener el modo de depuración. También se cierra el proyecto en la ventana del explorador.

5. En Visual Studio, elija About.cshtml. Luego, elimine la palabra another y, en su lugar, agregue las palabras file and directory.

   

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

   Elija cualquiera de las directivas using atenuadas y aparecerá una bombilla Acciones rápidas justo debajo del símbolo de intercalación o en el margen izquierdo. Elija la bombilla y después elija Eliminar instrucciones Using innecesarias.

   

   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.

   

   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, elija Ver > Lista de errores en la barra de menús superior.

   

9. Solucionemos este problema. En el editor de código, coloque el cursor en cualquiera de las líneas que contienen el error y elija la bombilla Acciones rápidas ubicada en el margen izquierdo. Luego, en el menú desplegable, elija using System; para agregar esta directiva al inicio del archivo y solucionar los errores.

   

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, elija Acerca de para ver los cambios.

    

12. Cierre el explorador web, presione Mayús+F5 para detener el modo de depuración y cierre 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. Elija la pestaña Explorador de soluciones para ver el contenido.

   

2. Expanda la carpeta Páginas.

   

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

   

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 elija el archivo Index.cshtml.cs.

   

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

   

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

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.

   

Ejecutar, depurar y realizar cambios

1. Haga clic en el botón IIS Express del IDE para compilar y ejecutar la aplicación en modo de depuración. (O bien, presione F5 o elija Depurar > Iniciar depuración en 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, luego, ábralo mediante la opción Ejecutar como administrador que aparece si hace clic con el botón derecho o en el menú contextual. A continuación, vuelva a ejecutar la aplicación.

   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, elija Sí y luego, si recibe un mensaje de advertencia de seguridad de seguimiento, elija Sí.

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

3. Elija Privacidad en la barra de menús.

   La página Privacidad del explorador representa el texto que se establece en el archivo Privacy.cshtml.

   

4. Vuelva a Visual Studio y, a continuación, presione Mayús+F5 para detener el modo de depuración. También se cierra el proyecto en la ventana del explorador.

5. En Visual Studio, abra Privacy.cshtml para editarlo. Después, 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, en su lugar, agregue This page is under construction as of @ViewData["TimeStamp"] (Esta página está en construcción desde ["TimeStamp"]).

   

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 siguiente método abreviado:

   Elija cualquiera de las directivas using atenuadas y aparecerá una bombilla Acciones rápidas justo debajo del símbolo de intercalación o en el margen izquierdo. Seleccione la bombilla y mueva el puntero sobre Eliminar instrucciones Using innecesarias.

   

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

   

   Elija 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 aparecerán dos caracteres de subrayado ondulados bajo DateTime. Los caracteres de subrayado ondulados aparecen 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, elija Ver > Lista de errores en la barra de menús superior.

   

9. Solucionemos este problema. En el editor de código, coloque el cursor en cualquiera de las líneas que contienen el error y elija la bombilla Acciones rápidas ubicada en el margen izquierdo. Luego, en el menú desplegable, elija using System; para agregar esta directiva al inicio del archivo y solucionar los errores.

   

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.

    

12. Cierre el explorador web, presione Mayús+F5 para detener el modo de depuración y cierre 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. Elija la pestaña Explorador de soluciones para ver el contenido.

   

2. Expanda la carpeta Páginas.

   

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

   

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 elija el archivo Index.cshtml.cs.

   

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

   

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

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.

   

Ejecutar, depurar y realizar cambios

1. Seleccione el botón IIS Express del IDE para compilar y ejecutar la aplicación en modo de depuración. (O bien, presione F5 o elija Depurar > Iniciar depuración en 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, luego, ábralo mediante la opción Ejecutar como administrador que aparece si hace clic con el botón derecho o en el menú contextual. A continuación, vuelva a ejecutar la aplicación.

   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, elija Sí y luego, si recibe un mensaje de advertencia de seguridad de seguimiento, elija Sí.

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

3. Elija Privacidad en la barra de menús.

   La página Privacidad del explorador representa el texto que se establece en el archivo Privacy.cshtml.

   

4. Vuelva a Visual Studio y, a continuación, presione Mayús+F5 para detener el modo de depuración. También se cierra el proyecto en la ventana del explorador.

5. En Visual Studio, abra Privacy.cshtml para editarlo. Después, 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, en su lugar, agregue This page is under construction as of @ViewData["TimeStamp"] (Esta página está en construcción desde ["TimeStamp"]).

   

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:

   Elija cualquiera de las directivas using atenuadas y aparecerá una bombilla Acciones rápidas justo debajo del símbolo de intercalación o en el margen izquierdo. Seleccione la bombilla y mueva el puntero sobre Eliminar instrucciones Using innecesarias.

   

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

   

   Elija 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. Este 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 aparecen dos caracteres de subrayado ondulados bajo CultureInfo. Los caracteres de subrayado ondulados aparecen 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, elija Ver > Lista de errores en la barra de menús superior.

   

2. Solucionemos este problema. En el editor de código, coloque el cursor en cualquiera de las líneas que contienen el error y elija la bombilla Acciones rápidas ubicada en el margen izquierdo. Luego, en el menú desplegable, elija using System.Globalization; para agregar esta directiva al inicio del archivo y solucionar los errores.

   

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.

   

5. Cierre el explorador web, presione Mayús+F5 para detener el modo de depuración y cierre Visual Studio.