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 C# ASP.NET Core en Visual Studio.

En este tutorial se muestra cómo:

• Creación de un proyecto de Visual Studio
• Creación de una aplicación web de C# ASP.NET Core
• Realizar cambios en la aplicación web
• Exploración de las características del IDE
• Ejecución de la aplicación web

Prerrequisitos

Para completar este tutorial, necesita lo siguiente:

• Visual Studio instalado. Visite la página de descargas de Visual Studio para obtener una versión gratuita. Para obtener más información sobre cómo actualizar a la versión más reciente de Visual Studio, consulte actualizaciones de Visual Studio.
• La carga de trabajo ASP.NET y desarrollo web instalada. Para comprobar o instalar esta carga de trabajo en Visual Studio, seleccione Tools>Obtener herramientas y características. Para obtener más información, consulte Cambiar cargas de trabajo o componentes individuales.

Creación de un proyecto

En primer lugar, se crea 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.

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

   

2. En la ventana Crear un nuevo proyecto, seleccione C# de la lista de lenguajes. A continuación, seleccione Windows en la lista Todas las plataformas y Web en la lista Todos los tipos de proyecto.

   Después de aplicar los filtros de lenguaje, plataforma y tipo de proyecto, seleccione la plantilla ASP.NET Core Web App (Razor Pages) y, a continuación, seleccione Siguiente.

   

3. En la ventana Configurar tu nuevo proyecto, escriba MyCoreApp en el campo Nombre del proyecto. A continuación, seleccione Siguiente.

   

4. En la ventana Información adicional, compruebe que .NET 8.0 aparece en el campo Plataforma de destino.

   En esta ventana, puede habilitar la compatibilidad con contenedores y agregar compatibilidad con la autenticación. El menú desplegable de tipo de autenticación tiene las cuatro opciones siguientes:

   • Ninguno: 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 aplicaciones de intranet.

   Deje desactivada la casilla Habilitar compatibilidad con contenedores y seleccione Ninguno para Tipo de autenticación.

   

5. Seleccione Crear.

Visual Studio abre 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 único proyecto de ASP.NET Core denominado MyCoreApp. Seleccione la pestaña Explorador de soluciones para ver su contenido.

   

2. Expanda la carpeta Páginas.

   

3. Seleccione el archivo Index.cshtml y vea 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 el Explorador de soluciones y seleccione 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 de sitio estático, como CSS, imágenes y bibliotecas de JavaScript directamente en las rutas de acceso en las que desee.

7. El proyecto también contiene archivos de configuración que administran la aplicación web en tiempo de ejecución. El archivo de configuración de la aplicación predeterminada se almacena en appsettings.json. Sin embargo, puede invalidar esta configuración mediante appsettings.Development.json. Expanda el archivo appsettings.json para ver el archivo appsettings.Development.json.

   

Ejecutar, depurar y hacer cambios

1. En la barra de herramientas, seleccione el botón https 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

   También puede recibir un mensaje que le pregunte si desea aceptar un certificado SSL de ASP.NET Core. Para ver el código en un explorador web, seleccione Síy, a continuación, seleccione Sí si recibe un mensaje de advertencia de seguridad de seguimiento. Obtenga más información sobre la aplicación de SSL en ASP.NET Core.

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. En la página Privacidad del explorador se representa el texto que se establece en el archivo Privacy.cshtml.

   

4. Vuelva a Visual Studio y presione Mayús+F5 para detener la depuración. Esta acción cierra el proyecto en la ventana del explorador.

5. En Visual Studio, abra Privacy.cshtml para su edición. A continuación, elimine la frase Use esta página para detallar la directiva de privacidad del sitio y reemplazarla por Esta página está en construcción a partir de @ViewData["TimeStamp"].

   

6. Ahora, vamos a realizar un cambio de 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 de using innecesarias del archivo.

7. A continuación, cree una cadena para la fecha actual con formato para su cultura o región usando 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() en Privacy.cshtml.cs por el código siguiente:

   public void OnGet()
   {
      string dateTime = DateTime.Now.ToString("d", new CultureInfo("en-US"));
      ViewData["TimeStamp"] = dateTime;
   }
   

8. Tenga en cuenta que la siguiente directiva using se agrega automáticamente a la parte superior del archivo:

   using System.Globalization;
   

   System.Globalization contiene la clase CultureInfo.

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

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

    

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

Cambiar la página principal

1. 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 aparece en la página de inicio .

   

2. Reemplace el texto de bienvenida por Hola Mundo!

   

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

   

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

   

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

Pasos siguientes

Enhorabuena por completar este tutorial. Esperamos que haya aprendido 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 siguiente tutorial:

Crear una aplicación web de Razor Pages con ASP.NET Core

O bien, aprenda a incluir en contenedores la aplicación web con Docker:

Herramientas de contenedor de Visual Studio

Vínculos relacionados

• Publicar la aplicación web en Azure App Service mediante Visual Studio
• Personalizar el IDE y el editor de Visual Studio