ASP NET CORE

Vista previa del material en texto

Docente: 
M.A. Alex Pacheco Moya 
ASP.NET CORE 
CONTENIDO 
ASP.NET CORE 
• Creación de un proyecto de VS 
• 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 
S10 
 
 
M.A. Alex Pacheco Pagina #2 
Instituto de Educación Superior Privado El Buen Pastor 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ASP.NET CORE 
 
 
 
M.A. Alex Pacheco Pagina #3 
Instituto de Educación Superior Privado El Buen Pastor 
 
1. Crear un Proyecto 
 
 
 
 
 
 
 
 
 
 
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. 
 
 
 
 
 
 
 
 
 
 
 
 
3. En la ventana Configurar el nuevo proyecto, escriba MyCoreApp en el campo Nombre del 
proyecto. Después, seleccione Siguiente. 
 
 
 
 
M.A. Alex Pacheco Pagina #4 
Instituto de Educación Superior Privado El Buen Pastor 
 
 
 
 
 
 
 
 
 
 
 
4. En la ventana Información adicional, compruebe que .NET 5.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 
 
 
 
 
 
 
 
 
 
 
 
 
 
M.A. Alex Pacheco Pagina #5 
Instituto de Educación Superior Privado El Buen Pastor 
5. 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. 
 
 
 
 
 
 
 
 
 
2. Expanda la carpeta Páginas. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
M.A. Alex Pacheco Pagina #6 
Instituto de Educación Superior Privado El Buen Pastor 
3. Seleccione el archivo Index.cshtml y examínelo 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 seleccione el 
archivo Index.cshtml.cs. 
 
 
 
 
 
 
 
 
5. Vea el archivo Index.cshtml.cs en el editor de código. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
M.A. Alex Pacheco Pagina #7 
Instituto de Educación Superior Privado El Buen Pastor 
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. 
 
 
 
 
 
 
 
 
 
 
https://docs.microsoft.com/es-es/aspnet/core/fundamentals/configuration
 
 
M.A. Alex Pacheco Pagina #8 
Instituto de Educación Superior Privado El Buen Pastor 
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. 
 
 
 
 
 
 
 
 
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 Sí y 
después 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. 
 
 
 
 
 
 
 
 
 
 
M.A. Alex Pacheco Pagina #9 
Instituto de Educación Superior Privado El Buen Pastor 
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. 
 
 
 
 
 
 
 
 
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"]). 
 
 
 
 
 
 
 
 
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. 
 
https://docs.microsoft.com/es-es/visualstudio/ide/quick-actions?view=vs-2022
 
 
M.A. Alex Pacheco Pagina #10 
Instituto de Educación Superior Privado El Buen Pastor 
 
 
 
 
 
 
 
 
 
 
Ahora, seleccione Vista previa de los cambios para ver lo que cambiará. 
 
 
 
 
 
 
 
 
 
 
 
 
 
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. 
o 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. 
https://docs.microsoft.com/es-es/dotnet/api/system.datetime.tostring
 
 
M.A. Alex Pacheco Pagina #11 
Instituto de Educación Superior Privado El Buen Pastor 
o 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. 
 
 
 
 
 
 
 
 
 
Abra la barra de herramientas Lista de errorespara 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. 
 
 
 
 
 
 
 
 
 
 
 
 
 
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. 
 
https://docs.microsoft.com/es-es/dotnet/api/system.globalization.cultureinfo
 
 
M.A. Alex Pacheco Pagina #12 
Instituto de Educación Superior Privado El Buen Pastor 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 y presione Mayús+F5 para detener la depuración. 
 
 
 
 
 
 
M.A. Alex Pacheco Pagina #13 
Instituto de Educación Superior Privado El Buen Pastor 
 
Cambio de la página principal 
1. En el Explorador de soluciones, expanda la carpeta Páginas y, después, 
seleccione Index.cshtml. 
 
 
 
 
 
 
 
 
 
 
 
En el editor de código, verá código HTML para el texto que se muestra en la 
página Inicio. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
M.A. Alex Pacheco Pagina #14 
Instituto de Educación Superior Privado El Buen Pastor 
2. Reemplace el texto de la Pagina . 
 
 
 
 
 
 
 
 
 
 
 
 
3. Seleccione IIS Express o presione Ctrl+F5 para ejecutar la aplicación y abrirla en un 
explorador web. 
 
 
 
 
 
 
 
 
 
 
 
 
M.A. Alex Pacheco Pagina #15 
Instituto de Educación Superior Privado El Buen Pastor 
 
 
Referencia: 
 
Tutorial: Introducción a C# y ASP.NET Core en Visual Studio 
 
https://docs.microsoft.com/es-es/visualstudio/get-started/csharp/tutorial-aspnet-
core?view=vs-2022 
 
 
https://docs.microsoft.com/es-es/visualstudio/get-started/csharp/tutorial-aspnet-core?view=vs-2022
https://docs.microsoft.com/es-es/visualstudio/get-started/csharp/tutorial-aspnet-core?view=vs-2022