ASP. Desarrollo de NET Core 7 MVC

1. Introducción: Hola y bienvenidos a este curso, SP dotnet Core desarrollo multiplataforma. Soy tu instructor para voir Williams y he sido ingeniero de software y doy conferencias desde hace más de una década. En este curso, vamos a estar siguiendo unos sencillos pasos que se pueden replicar en cualquier plataforma. Así es. Vas a hacer este curso ya sea que estés usando Mac OS, Linux o Windows. Y podrás seguir adelante y construir una aplicación asp.net Core MVC estará aprendiendo cosas como Entity Framework Core, y tomando un primer enfoque de base de datos, estábamos viendo Bibliotecas Bootstrap cinco y jQuery. Estaremos integrando con auth zero, que es un proveedor de OpenID Connect. Y mientras se hace todo esto será familiarizarse con GitHub. Conoce que las herramientas de desarrollo que vamos a utilizar, esto es muy importante, dispuesto a un más oscuro para que podamos alojar una instancia de SQL Server independientemente de nuestro sistema operativo, aunque SQL El servidor está diseñado principalmente para la distribución de Windows. También usaremos Visual Studio Code como tu Data Studio y la CLI de dotnet, todo lo cual, una vez más, trabajaremos en cualquier sistema operativo. Sepa, solo para entrar en la zona mientras estamos usando Visual Studio Code y Azure Data Studio. Tan versátiles herramientas de desarrollo multiplataforma, y son muy livianas, por lo que no importa qué tipo de especificaciones tenga su máquina. No utilizan tantos recursos como sus contrapartes, como Visual Studio 2022 y SQL Server Management Studio. Para que puedas usar estas herramientas en una máquina menos potente. Se pueden utilizar una vez más en cualquier sistema operativo. Cuentan con integraciones limpias con varios servicios de terceros y son lo suficientemente potentes como para construir cualquier cosa. Ahora espero que estés tan emocionada como yo y no puedo esperar a verte en el curso. 2. Crear cuenta de GitHub: Bien chicos, entonces en esta lección vamos a pasar por el proceso de configuración muy simple de crear una cuenta de GitHub. Entonces github es posiblemente la plataforma de codificación social más grande. Es uno de los buenos proveedores más populares. Y es propiedad de Microsoft y es gratuito para el desarrollo de código abierto y personal. También puedes tener proyectos privados ahí y lanzar este curso, estaremos usando GitHub. Entonces, si esta es tu primera vez, tal vez has estado escuchando son tanto gestión de control de fuentes como GitHub. Y realmente quieres tener esa experiencia. No te preocupes, lo vamos a estar usando en este curso y disfrutarás de esa experiencia. Entonces para empezar, vas a github.com y desde aquí puedes registrarte. Entonces estoy asumiendo que no tienes ya un cono a. Entonces, si te registras, obtendrás un formulario muy sencillo donde te piden tu dirección de correo electrónico para que puedas proporcionarla y continuar. Y en realidad creo que solo necesitas tu dirección de correo electrónico y contraseña, así que ya tengo una cuenta, pero déjame intentar poner otra dirección de correo electrónico. Y luego se crea una contraseña. Y una vez que continúas creando esa contraseña, entonces ellos quieren un nombre de usuario. Puedes crear ese nombre de usuario. Permítanme simplemente crear algo arbitrario y luego continuar. Y luego solo te preguntarán si te gustaría algunas cosas promocionales. Continuar. Y sí se capturan cheque. Y luego básicamente al final de todo eso, te enviará un correo electrónico de verificación. Y luego una vez que te hayas verificado, puedes iniciar sesión. Entonces solo voy a seguir adelante e iniciar sesión y mostrarte cómo sería esa experiencia. Y una vez que hayas iniciado sesión con tu nombre de usuario y contraseña o tu dirección de correo electrónico y contraseña, verás una pantalla parecida a esta. Ya tengo algunos repositorios, así que quizá no tengas nada a la izquierda, entonces está bien. Por eso estamos aquí. Pero ya verás que tengo bastantes repositorios. Y este es mi perfil. Si necesitabas llegar a mi perfil, siempre podrías ir a github.com slash my username, que es simplemente mi nombre. Y sería algo similar para ti y para cualquiera que quiera navegar a tu perfil, se puede acceder a todos los repositorios en los que trabajas todos los repositorios en los que trabajas una vez que se hacen públicos. Y esa es la belleza de GitHub. Te ayuda a contribuir a otros proyectos y compartir tus proyectos que otras personas también pueden aportar a ellos. Una vez que haya configurado su cuenta, podrá pasar a la siguiente lección. 3. Instale . NET 7 SDK: Bien chicos, así que seguimos configurando nuestro entorno. Y el siguiente paso es instalar las redes de puntos de un SDK. Puedes llegar aquí simplemente yendo a.net.microsoft.com o simplemente puedes google.net SDK. Bien, creo que es lo más fácil hacer, solo google.net. Entonces SDK y el primer resultado de búsqueda estoy seguro que te llevaría a esta página. No. Dotnet seven es el último lanzamiento al momento de la grabación, sin embargo, el término estándar release, lo que significa que pasará de moda cuando salga dotnet eight. También tenemos la versión de herramienta de seis puntos, que es el soporte a largo plazo. Así que mucho de lo que vamos a hacer en este curso, pesar de que vamos a estar usando dotnet seven, será más o menos compatible con sus seis salvo quizá unas frases C-sharp, conjuntos. Me aseguraré de señalar dónde diferirá el código entre lo que ofrece dotnet seven y lo que podemos hacer en dotnet six. En el momento de esta grabación, sin embargo, punteado siete es el último y más grande, y así lo usaremos y puede sentirse libre de continuar usando dotnet seven. Entonces, para comenzar, querrás instalar el SDK. Ahora, hay dos cosas que querrás instalar. Querrás instalar el SDK para recursos de desarrollo. Y por supuesto, puedes elegir tu sistema operativo en consecuencia. Entonces, si estás en una máquina con Windows, querrás usar el bit 64 y podrás elegir las versiones de Mac o Linux en consecuencia. Pero luego para propósitos de hosting, también querrías instalar el runtime. Por lo que también puedes instalar el paquete de hosting para Windows o la versión apropiada en función de tu sistema operativo. Para que puedas descargar e instalar esos dos. Dicho esto, vamos a estar usando Visual Studio Code porque nosotros, Visual Studio Code es multiplataforma. No quiero atender todos los sistemas operativos, los monjes, Mac y Windows. Entonces estaremos usando Visual Studio Code. Sin embargo, si estás en una máquina con Windows y prefieres usar Visual Studio, que es un IDE totalmente alimentado, muy, muy potente, entonces solo puedes pegarte a las ventanas y en realidad puedes simplemente descargar e instala Visual Studio 2022, que vendrá con el SDK incorporado. Así que solo estoy lanzando eso ahí afuera, ¿verdad? Entonces, si vas a estar usando Visual Studio Code, que es mucho más ligero y compacto. Y vamos a estar usando muchos comandos de la CLI de dotnet. Entonces puedes seguir adelante e instalar el SDK manualmente. Si desea utilizar Visual Studio 2022. Y te estaré mostrando cómo configurar Visual Studio 2022 en una lección posterior, entonces realmente puedes saltarte el paso de descarga del SDK. Sin embargo, te recomiendo que obtengas el tiempo de ejecución independientemente. Entonces, una vez que los descargues e instalas, y es una instalación simple, simplemente golpeas Siguiente, Siguiente, Siguiente plantado en estrellas, y luego puedes cerrar la ventana. Entonces puedes pasar a la siguiente lección donde estaremos configurando Visual Studio Code. 4. Instala el código de Visual Studio (cualquier sistema operativo): Bien chicos, bienvenidos de nuevo. Así que hemos instalado nuestro SDK y el siguiente paso es instalar Visual Studio Code. O Visual Studio Code es un IDE muy flexible y ligero que nos ha dado Microsoft. Y además de todo eso, es gratuito y es multiplataforma, por lo que podemos usarlo en mark, en Windows o en Linux. Estoy usando una máquina Windows, así que claro, procedería a descargar para Windows, pero asegúrate de elegir la que sea más adecuada para, ya sabes, descargar e instalar es muy fácil. Obtendrás un paquete MSI que una vez que hagas doble clic en él, lanzaremos el instalador y después de unos clics, instalará todos los binarios y estará en tu máquina. Y sólo a modo de adelanto, esto es lo que puedes esperar. Se puede esperar algo como esto. Tengo esto instalado desde hace un tiempo y he usado muchísimos proyectos. Entonces tal vez veas que tengo algunos íconos que quizás no tengas listos para usar. Por ejemplo, si es tu primera vez, posible que no tengas nada bajo reciente. Pero siempre puedes iniciar Abrir Archivo, Abrir Carpeta, puedes verdad. Y consigo repositorio a su máquina. Y luego a un lado tienes la ventana Explorer. Puedes buscar, puedes hacer algunas cosas de control de fuentes. Puedes ejecutar y depurar. Entonces tienes Explorador remoto y extensiones. Y entonces la otra cosa es que tengo aquí están algunos otros plugins que tengo de proyectos paralelos para este curso. Esos no son absolutamente necesarios. Pero me aseguraré de señalar cosas que necesitará a medida que avanzamos y cómo puede configurar su entorno y optimizarlo para el proyecto en el que vamos a estar trabajando. Entonces, una vez que tengas instalado Visual Studio Code, entonces estás listo para irte. Tiene muchas características incorporadas que exploraremos en el camino. Sin embargo, si prefieres la idea de usar Visual Studio, porque el Visual Studio Code requiere que usemos muchos comandos de interfaz de línea de comandos. Y Visual Studio realmente hace un buen trabajo al ayudarte a hacer clic y lograr algunas de esas cosas. Entonces te estaré mostrando cómo instalar Visual Studio 2022, y eso será en la siguiente lección. 5. Alternativa: instale Visual Studio 2022 (Windows y Mac): Bien chicos, entonces en esta lección, solo voy a guiarlos a través de todo un fin de semana configurando Visual Studio en nuestra máquina. Visual Studio es el IDE insignia. Y ID es la abreviatura de entornos de desarrollo integrados, como el IDE insignia que nos ha dado Microsoft. Se trata de un IDE completo verbal. Nos permite hacer de todo, desde la concepción hasta la implementación hasta la entrega de nuestra aplicación. Y está disponible para varios sistemas operativos, mientras que varios, es decir, Windows y Mac OS para ello en realidad desde este sitio web, que es Visual studio.microsoft.com, en realidad podrías ir para descargar Visual Studio Code también, que es hermano pequeño multiplataforma de Visual Studio. Ahora, si quieres obtener Visual Studio, tienes tres opciones. Tienes la Community Edition, profesional y empresarial, comunidades libres para open source y aprendices individuales o usos académicos. Y luego profesional y empresarial son más para empresas o para prácticas de desarrollo comercial. ¿Bien? Entonces, en cualquier momento para este curso, solo estaremos usando la comunidad porque esta es una experiencia de aprendizaje para todos nosotros. Ellos sí te ayudan a elegir qué herramienta es la mejor para ti. Y estoy seguro cuando notas cíclicamente, van a sugerir Visual Studio Code para Linux. Pero luego si elegí a Mark y luego empiezo a seleccionar algunas de las cosas en función de lo que selecciono el MAC de Visual Studio Code. O pueden ver Visual Studio para Mac. Y entonces si elijo Windows más que probable, no importa lo que elija, va a decir que Visual Studio es la mejor selección, bien, aunque no para Java. ¿Bien? Entonces esto puede ayudarte a tomar una decisión sobre qué herramientas podrían ser mejores para ti. Dicho esto, como dije, Visual Studio Code es un poco más compacto, por lo que usa menos recursos y simplemente es más fácil de usar para operaciones de edición rápidas. Visual Studio es muy potente y se usa para muchas cosas avanzadas. Entonces en esta lección, solo voy a guiarte a través de lo que puedes esperar cuando estés instalando Visual Studio. Entonces, cuando, antes que nada, querrías descargar Visual Studio. Entonces, cuando descargas la comunidad, lo que obtienes es un instalador. Y una vez que tengas ese instalador y aprendas, vas a conseguir una ventana que se vea similar a esta. Ya lo tengo instalado, así que solo te estoy mostrando algunos de los módulos y cómo es la interfaz de usuario y cómo puedes proceder desde aquí. Para este curso, realmente solo necesitamos el asp.net y el desarrollo web, lo que llamaremos una carga de trabajo. Entonces cada una de estas cajas representa nuestra carga de trabajo y nos da acceso a los diferentes tipos de proyectos que están disponibles para diferentes tipos de actividades de desarrollo, ¿verdad? Entonces asp.net y desarrollo web, estaremos construyendo una aplicación dotnet en aplicaciones web. Entonces definitivamente queremos esto. Y en realidad incluirá el SDK. Sdk así como otras plantillas de proyectos. Las herramientas que necesitamos para el desarrollo web. Dicho esto, si te interesa tener otras cargas de trabajo, como para desarrollo de escritorios dotnet o desarrollo dotnet Maui. Entonces siempre puedes tomar las diferentes cargas de trabajo que deseas tener. Por supuesto, cuanto más marque, más espacio ocupará su máquina. Así que ten mucho cuidado. Sin embargo, en este punto, una vez más, todo lo que realmente necesitamos para este curso son las cargas de trabajo de asp.net y desarrollo web. Entonces puedes seguir adelante y tomar eso y luego puedes hacer clic en Instalar, que es lo que vendría aquí abajo en lugar de instalarlo mientras se descarga. Y una vez que lo hagas, Visual Studio se hará cargo, descargará todas las herramientas necesarias para esa carga de trabajo. Y luego te permitirá lanzarles resultados. Después. Cuando lo inicies, es posible que se te pida que inicies sesión. Para que puedas usar tu cuenta real si tienes una o puedes crear una cuenta real y usar esa cuenta para tu instalación de Visual Studio. Ahora solo para darte una vista previa rápida de cómo se ve la interfaz de usuario de Visual Studio 2022. Voy a simplemente continuar con todo el cable para que solo inicie la interfaz de usuario. Y lo que tenemos aquí sería un Explorador de Soluciones, que va a enumerar todos los archivos y carpetas que formarán parte de tu proyecto cuando lo creamos. Y puedes seguir adelante y ejecutar el proyecto se queda adjunto, no, porque está vacío, podemos ejecutar el proyecto. Y esta interfaz de usuario realmente cobra vida una vez que estamos en, si tienes muchas integraciones como con Git, y podemos acceder a nuestras cosas de GitHub aquí de la misma manera que podemos hacerlo desde Visual Studio Code. Y si quieres usar Visual Studio, está bien. Para las primeras lecciones, te voy a mostrar los paralelismos entre usar Visual Studio Code y usar Visual Studio. Así que al menos puedes tener una idea de cuál podría ser mejor. Pero para el, para la mayor parte del curso, estaremos usando Visual Studio Code solo porque es multiplataforma. Entonces, independientemente del sistema operativo que estés usando, puedes seguirlo sin problemas. Entonces eso es todo para Hollywood configurar Visual Studio, es bastante fácil. Y si en algún momento quieres más cargas de trabajo, siempre puedes volver al instalador. Así que en realidad puedes simplemente buscar en tu máquina para Visual Studio Installer. Te traerá de vuelta a este punto. Y puede seleccionar o anular la selección de las cargas de trabajo según lo necesite. 6. Instalar SQL Server Express (Windows): Bienvenido al primer video de este curso, introducción a SQL Server 2017. Y hoy vamos a estar viendo descargar e instalar este bit de software. Ahora, una base de datos es más o menos una colección lógica de datos relacionados. Y eso es todo en pocas palabras, si tienes experiencia previa con bases de datos, probablemente vino con Microsoft Access o MySQL. Y solo quieres extender tus conocimientos más allá de eso. E incluso si no tienes conocimiento previo de bases de datos, este es un excelente curso para ponerte al día con lo que son capaces las bases de datos, qué preparación necesita para ir en su lugar, y cómo puedes ir comenzar tu viaje hacia convertirte administrador de bases de datos o simplemente manipular datos en base de datos es en conjunto, como dije antes, estaremos explorando todos estos conceptos usando Microsoft SQL Servidor 2017. Y ya lo tengo arriba en mi pantalla, la página para descargar. Por lo que he incluido la URL como se describe aquí en las notas de clase. Y esto te llevaría a descargar el motor de base de datos express de Microsoft SQL Server 2017. Y la breve descripción es que se trata de un sistema de gestión de bases de datos potente y confiable que le permite construir sitios web ligeros y aplicaciones de escritorio. Entonces esto es bastante bueno, bastante decente es un lugar de partida decente. Si no tienes esa máquina de alta especificación y gama alta, solo tienes una máquina normal, solo quieres comenzar. Esta es una excelente opción. Hay otras adiciones que probablemente verías en tu investigación, pero si sigues este enlace, cortará todo ese ruido y todas las demás ediciones. Y podemos empezar con Express. Puede continuar y hacer clic en esa descarga e iniciar inicialmente ese procedimiento de descarga. Y luego otro poco de software que nos interesa es el SQL Server Management Studio. Ahora Management Studio será tu puerta entrada para interactuar realmente con la base de datos, interrogar los datos y escribir lo que llamamos consultas en un lenguaje con Cloud SQL. Nos meteremos en todas esas cosas a su debido tiempo. Pero por ahora, puedes seguir esta URL una vez más en las notas de clase. Y podemos simplemente hacer clic en este botón Descargar para inicializar esta descarga, lo que puede tardar un tiempo. Es un archivo bastante grande. Así que en cuanto termine esa descarga, volveremos a reunirnos y luego recorreremos el proceso de instalación. Hola chicos, bienvenidos de nuevo. Ahora que nuestras descargas están terminadas, comenzaremos instalando nuestro motor SQL Express. Así que simplemente hacemos clic en ese archivo de instalación, clic en Ejecutar, y luego seremos recibidos con esta pantalla de instalación. Podemos hacer clic básico. El cliente le permitiría seleccionar ciertas características. En esta etapa, no necesitamos estar haciendo eso. Podemos simplemente ir con básico podemos seguir adelante y acordar los términos y condiciones. Puedes leerlo si lo deseas. Si tienes otras ideas, entonces es posible que quieras cambiar este directorio. De lo contrario, también puede usar como defecto. Y puedes ver aquí que fuera de 6 gb, solo necesitamos realmente 300 mb. Así que solo voy a seguir adelante y dar clic en Instalar. Y esto puede tomar un tiempo, así que volveremos a reunirnos una vez que esto esté terminado. Bien, entonces al final de ese procedimiento de instalación, verás que tienes éxito en hacer esta instalación. Y luego te dan alguna información. Te dan una cadena de conexión. Entonces, si quisieras desarrollar una aplicación encima de esta base de datos, probablemente querrás prestar atención a esta parte. Bueno, eso no es realmente necesario en estos momentos. Y solo te dan las rutas para los archivos de registro y otros bits esenciales de la aplicación. Otra parte esencial de este proceso de instalación, como se mencionó anteriormente, es instalar el estudio del servidor de administración secuela. Entonces esta instalación de Express Edition, en realidad te darán opción de decir instalar SSMS. Y esto realmente sacará a colación tu navegador y navega a, bueno, me imaginé este discurso, el enlace a esta página ya está incluido en las notas de clase. Y aquí, desde aquí puedes obtener una descarga directa al Estudio de Gestión. Entonces, si no lo hiciste antes, puedes simplemente seguir este enlace y obtener ese archivo ya, tenerlo descargado aquí. Así que voy a iniciar esta instalación. Todo esto pondrá en marcha el instalador y realmente solo te dan un botón para hacer clic en el que está instalado. Por supuesto, puedes cambiar esta ubicación si tienes otras ideas para el camino. De lo contrario, puede dejarlo como el, como predeterminado y simplemente haga clic en Instalar. Esto también puede llevar un tiempo, por lo que volveremos a convocar al final de este proceso. Bien, entonces nuestra instalación está terminada y todo lo que tenemos que hacer es reiniciar para continuar. Así que solo podemos hacerlo rápidamente. Y nosotros, en el siguiente video, empezaremos a mirar cómo empezamos a armar todo. Lo que es una base de datos es, y por qué es tan importante aprender esta habilidad. Estén atentos. 7. Alternativa: instale SQL Server en Docker (cualquier sistema operativo): Ahora tal como está, Microsoft SQL Server es casi exclusivamente utilizable solo en máquinas Windows. Entonces es posible que los pasos de instalación anteriores no hayan ido bien, si no estás usando una máquina con Windows, si estás usando Mac o Linux, no te preocupes, todavía hay una solución para ti. La solución número uno sería que puedas usar una máquina virtual, así puedes usar VMware o alguna otra herramienta que admita la virtualización. Y puedes poner en marcha una máquina virtual que tenga un sistema operativo Windows y luego usarla. Sepa que puede ser intensivo en recursos. Y no voy a hacerte pasar por todo eso solo para usar el único software. La alternativa a un entorno virtualizado para Windows sería usar Docker, que es lo que tengo arriba en mi pantalla. Más oscuro, puedes llegar fácilmente hasta aquí yendo a docker.com. Darker es una aplicación muy rápida que nos permite usar lo que llamamos contenedores en lugar de todo un entorno virtualizado. Entonces lo que podemos hacer es usar Docker para simular el entorno necesario y solo el entorno necesario para una aplicación en particular se ejecute sin necesidad de todo el sistema operativo. Entonces lo que vamos a hacer es usar Docker para simular un entorno para SQL Server. Y luego podremos conectarnos al SQL Server solo para ver, aunque no estés usando una máquina con Windows. Ahora bien, lo primero que notarás es que está disponible para cada sistema operativo, ¿más o menos cierto? Entonces, si estás usando Windows, aún puedes usar Docker. Si tienes un dispositivo Apple o un dispositivo basado en Linux o un dispositivo basado en chip Intel, puedes exactamente lo mismo. Instalamos Docker. Así que adelante, descárgalo e instálalo. Ya lo tengo instalado en mi máquina Windows, pero una vez que lo hayas instalado, lo que obtendrás es acceder a los comandos de la línea de comandos de Docker. Una vez que lo tengas instalado, presiona pausa, deja que se instale y luego podrás continuar. Yo le animaría a lanzar su terminal. Entonces, una vez más, estoy usando una máquina con Windows, pero tu terminal en Linux o Mac OSX se vería muy similar a esta. Y simplemente puedes ejecutar el comando docker solo para asegurarte de que está instalado. Y si ves algo así, no tuvieron acceso a los comandos de Docker CLI. Bien, entonces lo que queremos hacer en este punto es ejecutar un comando que se llama docker. Pull es acercar un poco para que sea más fácil de leer. Entonces vamos a hacer docker, pull, docker pull. Vamos a sacar esto lo que llamaremos imagen. Entonces Docker tiene archivos predefinidos que alinean el entorno que se necesita para una aplicación en particular. Y a estas se les llama imágenes. La imagen que queremos es la imagen de Microsoft MS SQL Server. Entonces vamos a hacer un docker, tirar contra esa imagen para que puedas presionar pausa, asegúrate de que la escribes de la manera que yo la tengo. Y cuando presionas Enter, va a seguir adelante y decir, Bien, me estoy poniendo lo último y luego vas a ver descargando. Ya saqué esa imagen, así que ya la tengo en mi máquina. Pero vas a ver que está jalando y luego va a empezar a mostrar métricas de lo hecho cargando. Y en realidad se vería algo más así. Entonces esta es una captura de pantalla que tomé antes de cuando la estaba descargando. Y vas a ver que va a generar este montón de líneas parecidas a esta. Y vas a tener estas etiquetas de descarga. Entonces, una vez que eso se completa, el siguiente paso es ejecutarlo realmente. Para ejecutarlo, necesitas este comando. Entonces vamos a decir Docker, corre, luego guión e, y hará que el eula acepte. Entonces lo que pasa es que SQL Server suele tener uno de esos documentos que necesitas para aceptar los términos y condiciones. Entonces solo lo estamos poniendo en un parámetro que sí, aceptamos los términos y condiciones. Y luego otro que dice contraseña SA. Entonces, si miraste el proceso de instalación cuando estamos usando Windows, podemos usar la autenticación de Windows para conectarnos a la base de datos, ¿verdad? Entonces todo lo que necesitamos es un nombre de máquina. Podemos usar un usuario de Windows, el usuario actual de Windows, autenticación de Windows y simplemente conectarnos. Ahora porque esto es más oscuro y es un contenedor, No hay ventanas ni puertas o Mark o no hay Linux Autenticación. Entonces no es realmente que solo puedas conectarte usando el usuario predeterminado en tu computadora. Entonces este paso es aplicable ya sea que estés usando Windows, mac, Linux, etc. Entonces lo que tenemos que hacer es especificar una contraseña de SA. Entonces AC es el usuario predeterminado, lo que significa administrador del sistema o administrador del sistema. Cada vez que instalas un motor de base para Microsoft SQL Server, obtienes este usuario de ensayo. Vamos a configurar esta SA, contraseña. Y puedes poner cualquier contraseña que desees. Sólo estoy poniendo una contraseña segura aquí. Y esto es realmente posible que puedas ver en otras demostraciones que podrías ver en cualquier parte de Internet. Entonces esta contraseña no es necesariamente única para mí ni para este ejercicio. Puedes poner cualquier valor de contraseña con el que te sientas cómodo. Y recuerdas, solo estoy dividiendo la palabra contraseña segura por supuesto con Caracteres, números y un par de letras mayúsculas. Después especificamos el puerto. El puerto aquí al frente es importante lo que queremos pasar. El puerto. En el otro extremo del colon se encuentra el puerto al que mapeará. Lo que esto significa es SQL server por defecto difusiones desde el puerto 1433, ese es el puerto predeterminado. Entonces sin hacer nada, especificando ningún puerto ni nada, siempre pasara por 1433 una vez o conectando. Sin embargo, Docker se está ejecutando en su propio entorno especializado, por lo que necesitamos mapear. Este es el puerto predeterminado, y luego esta es la máquina portuaria que querrá atravesar un túnel para llegar a este deporte. Así que en realidad podrías dejar eso como 14331433. Si no quieres tener SQL Server instalado ya y estás ejecutando Mac y Linux, entonces 14, 14, 33 está bien. No tienes que hacer nada extra. Simplemente puedes conectarte. No obstante, porque estoy usando una máquina Windows y agrego para cambiar mi puerto porque 1433 ya está ocupado por mi instalación nativa de SQL Server. Entonces solo te estoy demostrando que puedes hacer 14, 14, 33 por defecto. O puedes poner en tu propio puerto específico si así lo deseas. Entonces lo siguiente y último es que digamos guión D, y después especificamos la imagen que queremos ejecutar. Así que básicamente estamos diciendo docker ejecutar esta imagen y estar seguro de que todos estos parámetros intermedios están configurados. Eso es esencialmente lo que acabamos de hacer. Entonces cuando presionas Enter y tú solo, esta para ejecutar, lo que hará es lanzar esa imagen dentro de la UI más oscura. En la interfaz de usuario más oscura, vas a ver algo que se ve así. Va a aparecer debajo de los contenedores. Y puedes ver aquí así es como varios contenedores, ¿ no? Incluso tengo otro contenedor SQL que está agregando sal de antes. Y aquí está el nuevo de mi solo ejecutando ese comando. Por lo que creó un nuevo contenedor para Microsoft SQL Server. Y actualmente se está ejecutando, y lleva 30 s. Y el puerto que usa es de 1,400, que si no cambiaste eso y usaste el 1433 predeterminado , sería 1433. Siempre puedes parar e iniciar los contenedores. También puedes eliminar y también puedes ver lo que está sucediendo. Para que puedas abrirla a terminal e interactuar con ella aquí. También puedes inspeccionar para ver el estado de la misma y observar algunas de las configuraciones. Entonces estas son algunas de las variables de entorno que habíamos configurado. ¿Cuáles son los parámetros que pasamos? Entonces también puedes mirar los registros. Mira aquí que parece haber arrancado con éxito. Entonces después de haberlo hecho, ya he confirmado todas estas cosas, me gustaría conectarme. Ahora para Windows, podemos usar el Microsoft SQL Server Management Studio. Sin embargo, Management Studio no está necesariamente disponible en Linux y Mac. Entonces la alternativa aquí sería conseguir el Azure Data Studio. Simplemente puedes hacer una búsqueda en Google y puedes seguir adelante y seguir la documentación de Microsoft hasta Azure Data Studio. Data Studio es una herramienta de base de datos multiplataforma para profesionales. Y puede funcionar en Windows, macOS, Linux. Para que puedas seguir adelante e instalar la versión apropiada por ti mismo. Y por supuesto, puedes mirar cualquier advertencia solo para asegurarte de que estás en un estado compatible. ¿Bien? Entonces el caso es que el Data Studio puede hacer mayoría de las cosas que el Management Studio puede hacer, especialmente dentro de los confines de este curso donde estamos aprendiendo sobre desarrollo de bases de datos y consultas y tal. La experiencia pasada será ligeramente diferente. Entonces ciertas cosas no estarán en el mismo lugar y tal vez no se llamen lo mismo. Terminado para conectar. Déjame mostrarte cómo nos conectamos. Así se puede ver que he conectado bastantes ups lo largo del tiempo o necesita una base es más bien, pero aquí voy a conectar Microsoft SQL Server y luego el servidor aquí va a ser host local coma, el puerto que especificaste. En mi caso, especificé mil 400 en mi porche. Es posible que también hayas especificado 1,400 o lo que sea que hayas especificado. Cuando configuramos el contenedor debe funcionar y si no lo recuerdas, solo puede volver y mirar. Usted especifica ese puerto. Y luego no la autenticación de Windows sino el inicio de sesión SQL. Y nuestro nombre de usuario es SE, y nuestra contraseña es la contraseña que escribimos. Y una vez más, si no recuerdas cuál es esa contraseña, siempre puedes ir al contenedor y luego hacer clic en Inspeccionar. Y sólo puedo copiar este valor y luego pegarlo. Y luego para el futuro, solo recuerdas la contraseña. Entonces podemos conectarnos. Entonces esto es una señal de una conexión exitosa. Yo, ven aquí esa versión del SO, así que todavía estoy en mi máquina Windows. Pero la versión del sistema operativo que ha detectado es Ubuntu. Entonces eso es lo que está haciendo el contenedor. Se está ejecutando en un entorno Linux, pero está simulando el entorno, entorno exacto necesario para que SQL Server pueda ejecutarse. Si expano las bases de datos, verás que está vacía. Y luego básicamente todo lo que podamos hacer desde el Estudio de Gestión lo podemos hacer desde aquí. Sin embargo, una cosa que puede notar es que algunas de las herramientas son limitadas. Entonces en el Estudio de Gestión, puedo fácilmente, o más fácilmente hacer clic derecho y decir, hacer ciertas cosas como crear una nueva base de datos y así sucesivamente. En la gestión en el Data Studio, sin embargo, probablemente tendrá que ser guionado. Es algo que tendrías que controlar y crea un nuevo archivo de script. Y luego para crear una nueva base de datos, tendrías que decir crear base de datos. Y luego decir el nombre, digamos test db, luego F5, y luego se lanza. Entonces podrás refrescar la lista de bases de datos y luego verás TSDB, ¿verdad? Pero en este curso vamos a estar viendo cómo hacer ambos scripts y usar la interfaz gráfica de usuario en Management Studio. Por lo que deberías poder seguir bastante bien. Y en todo caso, si te encuentras con dificultades, no dudes en llegar. 8. Instalar Microsoft Data Studio: Hola chicos. En esta lección vamos a estar viendo cómo podemos descargar e instalar el Azure Data Studio. Ahora bien, el nombre es un poco engañoso porque comienza con Azure, pero no es una herramienta que sea exclusiva de Azure. Se trata de una herramienta de sistema de gestión de datos multiplataforma, y nos permite conectarnos a cualquier tipo de fuente de datos. Bueno, al menos las fuentes de datos de Microsoft SQL Server, ya sea alojadas localmente, están alojadas en Microsoft Azure. Hay otras cosas que podemos hacer con la herramienta, pero no necesariamente las haremos en este curso. La razón por la que vamos por esta herramienta, sin embargo, es el hecho de que una herramienta de base de datos multiplataforma, y podemos trabajar en Windows, Mac OS o Linux. Así que recuerda que estamos atendiendo al desarrollo multiplataforma. Así que estoy tratando de mostrarles todas las herramientas que nos pueden ayudar a lograr nuestros objetivos independientemente de nuestro sistema operativo. Bien, así que para empezar, en realidad puedes simplemente Google Data Studio y probablemente, o puedes decir una descarga de cero dtau Studio. Y te llevará a este sitio web, que está en el Microsoft Learn. Bien. Y desde aquí puedes desplazarte hacia abajo hasta las diferentes opciones de descarga. Entonces para Windows, tenemos estas opciones. Y el instalador de usuario es un instalador sencillo, que sería una instalación muy similar a lo que teníamos con Visual Studio Code. Tenemos el instalador de macOS y tenemos la forma Linux de obtener los archivos en nuestro sistema. Entonces, si necesitas un golpe a golpe por instrucción o dinero mientras realmente puedes desplazarte hacia abajo y verás la sección aquí para la instalación de Windows. Y puedes ver que solo puedes descargar el instalador para Windows y seguir adelante con la configuración. O puedes descargar un archivo zip y descomprimirlo en una ubicación y luego usarlo directamente desde allí. Bien, solo voy a desplazarme por la opción y aquí está la sección de instalación de MAC OS. Y luego aquí está la sección de instalación de Linux. Sin embargo, en última instancia, terminaremos con una aplicación que se ve así. Cuando lo consigas, podrás cambiar tu tema y todo. Tengo el tema oscuro funcionando. Siempre puedes cambiar ese tema de color si lo deseas. Pero en última instancia sí nos permite conectarnos a cualquier tipo de fuente de datos. Y aquí tengo unas actualizaciones pendientes. Lo haré más adelante. Pero podemos conectar nuestros diferentes servidores independientemente de que estén en el host local. Entonces este valor predeterminado es mi host local, instancia de SQL Express. También tengo una instancia docker disponible para mí ahora varias instancias en Microsoft como juris, todos mis servidores están ahí mismo. ¿Bien? Y podemos hacer algunas cosas geniales. Podemos buscar, podemos hacer algunos cuadernos y explorar un control de código fuente y material de extensión. Como dije, tiene otras herramientas incorporadas para otras actividades relacionadas que no van a entrar en esas. Pero por ahora, es una herramienta lo suficientemente sencilla que nos permite escribir nuestras consultas. Podemos crear nuestra base de datos de manera bastante simple. Bien, así que cuando volvamos, en realidad vamos a empezar con el desarrollo. 9. Crear proyecto MVC de ASP.NET Core - código de estudio visual: Bienvenidos de nuevo chicos. En esta lección, vamos a estar creando nuestra aplicación web asp.net Core MVC. Ahora, lo primero que querrás hacer es lanzar tu terminal. La terminal puede verse diferente según el sistema operativo en el que se encuentre. Si estás en Linux, se verá diferente de si no está marcado. Bueno, con demasiada frecuencia en realidad se verá bastante similar. Pero si estás en una máquina con Windows, entonces quieres buscar PowerShell o Command Prompt. Estoy usando una PC con Windows, así que en realidad tengo esta ventana que se llama terminal, y de hecho me da acceso a los diferentes tipos de terminales que tengo en mi máquina. Así que ya ves aquí tengo una pestaña llamada Windows PowerShell, otra pestaña llamada símbolo del sistema. Incluso si eres una ventana no necesariamente se ve así, puedes hacer todo lo que estamos a punto de hacer si estás usando una máquina con Windows, usando el símbolo del sistema, de cualquier manera, lo mismo comandos que estaremos ejecutando en mi máquina funcionarán en cualquier sistema operativo. Así que solo voy a cerrar una de estas pestañas y solo voy a usar la ventana de PowerShell. Y antes que nada, queremos asegurarnos de que lo hemos hecho instalado. Si solo dices dotnet y luego guión, información de guión, entonces verás una pequeña impresión agradable o así mostrando todos los tiempos de ejecución de dotnet que has instalado. He estado haciendo desarrollo dotnet en esta máquina en particular desde que 3.1 era lo de adentro. Ves aquí que tengo cinco y también tengo siete. Y si miras aquí abajo, verás que también tengo acceso a versiones de seis. Bien, así que eso es evidencia de que dotnet está instalado correctamente y quieres asegurarte de que tienes siete porque estaremos usando siete. Sin embargo, si instalaste y quieres usar seis, el 90% de lo que somos capaces de hacer puede funcionar con seis donde hay una diferencia. Me aseguraré de señalarlo. Ahora que hemos validado que dotnet está instalado y tenemos acceso a la CLI de dotnet. Lo que tenemos que hacer ahora es que voy a hacer esto un poco más grande para que los comandos sean más visibles. Lo que tenemos que hacer es navegar a un directorio donde sabemos que vamos a querer tener nuestro proyecto. Y luego crearemos nuestra nueva aplicación dotnet. Solo diré CLS para borrar el símbolo del sistema. Y luego el más grande otra vez. Ahora, lo que podemos hacer es navegar hasta la carpeta, que se vea algo así como cd, y luego eliges tu destino. Entonces tengo una carpeta especial en mi disco C que uso para proyectos. Así puedo navegar a ese directorio. Y luego voy a ejecutar un comando que dice puntos netos nuevo MVC. Y luego fui a ver un guión, o este guión 0 significa ¿ dónde quiero poner este proyecto? Así que quería crear una nueva carpeta. Si no hago esto donde quiera que esté, creará una carpeta. Entonces podrías haber creado una carpeta para ti, ya sea usando tu interfaz de usuario o tu línea de comandos. Y antes de meterme en eso, déjame mostrarte cómo crearías eso que sigue si dijera directorio dir MK y luego darle un nombre, digamos probar MVC arriba. Entonces crearía eso. Entonces podría decir cd para probar app MVC. Y ves aquí eso es sobre una serie de carpetas. Y entonces solo podría decir dotnet, nuevo MVC. Y entonces lo que eso haría es crear un nuevo asp.net Core Web up usando las plantillas de controlador de vista modelo. Entonces eso es lo que significa MVC si acaso eso no estaba claro antes. Y te están haciendo saber que fue creado con éxito. Entonces te están haciendo saber que han creado el proyecto en ese camino. Y le dieron al proyecto el mismo nombre que la carpeta en la que se creó. Bien, así que esa es una manera limpia y agradable crear un nuevo MVC up. Sin embargo, no vamos a estar trabajando en MVC up, así que solo voy a hacer cd dot dot, que me trae una copia de seguridad de un directorio y me deja borrar mi pantalla una vez más de cualquier mensaje. Sólo tienes que ir a pantalla completa esta vez. Y entonces hagamos esto de extremo a extremo. Entonces si quiero una nueva aplicación dotnet MVC, entonces digo dotnet new MVC, y luego la veré guión o no cero, pero todos, y luego le daré el nombre del directorio. Ahora en este curso, vamos a construir una gestión escolar muy pequeña. Lo justo para ayudar a una escuela pequeña mantener el camión fuera de los alumnos, los maestros, en los cursos que ofrecen, ¿verdad? Así que sólo voy a decir que la gestión de la escuela está arriba, ¿de acuerdo? Entonces solo diré MVC, solo para que sepamos que esto es un MVC arriba seguro. Y luego cuando presiono Enter, lo que va a hacer es seguir adelante y crear ese nuevo directorio, School of Management app dot MVC. Y luego en ese nuevo director crea el archivo del proyecto para ir con él. Bien, así que esa es otra forma en la que podríamos hacerlo. Podríamos simplemente decir dotnet, nuevo guión MVC y luego especificar el nombre del proyecto. Hará tanto directorio como archivo de proyecto en un solo barrido. Ahora, cuando queremos abrir este proyecto, tenemos un bonito atajo de teclado que podemos usar otro atajo de comando más bien. Entonces si navego a esta carpeta y digo gestión escolar de MVC, entonces CD, salte por ahí. Y entonces puedo decir puntos de código. Mira lo que pasa. Esto es si estás usando código de Visual Studio. Entonces una vez que tienes Visual Studio Code, tienes esa variable de entorno en tu línea de comandos. Y luego una vez que digas código, punto completo abrirá Visual Studio Code al contexto de la carpeta a la que has navegado actualmente en la terminal. Y efectivamente, estamos ahí con Visual Studio Code y aquí están todos los archivos que se han creado en ese directorio en particular. Por supuesto, él puede navegar, están usando tu Explorer si lo deseas. Pero ahora mismo, esto es prueba suficiente de que nuestros esfuerzos de creación de proyectos han sido exitosos. No voy a pasar por ninguna extensión ni nada. Solo quería mostrarte cómo harías para crear un nuevo MVC usando la CLI y abrirlo completamente usando Visual Studio Code. Sepa justo antes de cerrar este ejercicio, solo quería señalar que hay varios. 10. Crear proyecto MVC de ASP.NET Core - Visual Studio: Bien, entonces vimos cómo podemos crear un nuevo proyecto usando la CLI de dotnet. Y eso es realmente para cualquier tipo de sistema operativo, sobre todo si Visual Studio no es compatible con tu sistema operativo. Sin embargo, si quieres usar Visual Studio para los ejercicios de desarrollo, solo pasaremos por los sencillos pasos para crear un proyecto similar usando Visual Studio. Visual Studio es un IDE muy potente que nos ha dado Microsoft para el desarrollo dotnet. Y viene repleto de todo tipo de características que necesitas. Muchas extensiones y muchos complementos con otras herramientas para lograr realmente las mismas hazañas. Dicho esto, otras herramientas son capaces y el recurso para hacer es capaz fuera de la caja. Nota a la izquierda, verás que tengo una lista de proyectos recientes. Si es la primera vez que usas Visual Studio, puede que no tengas tanta vida a ese lado. Eso está bien. Sin embargo, queremos centrarnos en la sección Comenzar para que podamos comenzar clonando nuestro repositorio, abriendo un proyecto o solución existente, o una carpeta donde pueda haber un proyecto existente o nosotros puede crear un nuevo proyecto. También podemos continuar sin código. Creo que elegimos esa opción la última vez que estamos viendo Visual Studio. No obstante, esta vez vamos a decir Crear un nuevo proyecto. Y entonces eso va a cargar una serie de plantillas de proyecto. Entonces, según las cargas de trabajo que habrías seleccionado para Visual Studio, es posible que tengas más o menos cargas de trabajo de las que tengo aquí. ¿Bien? El más importante es aquel donde se crea, que es MVC sabemos que esta es una lista enorme que podemos filtrar en función de los idiomas. Entonces solo queremos ver las plantillas C-sharp. A lo mejor solo queremos ver por plantillas para nuestro tipo particular de plataforma y para tipos de proyectos particulares, ¿verdad? O simplemente podemos buscar. Entonces sé que quiero MVC, solo puedo buscar MVC. Y entonces aquí me van a dar la API web. No, eso no es lo que quiero. Y luego veo aquí que me están dando una aplicación web con el controlador de vista modelo MVC. Entonces ese es el que seleccionaré, elija Siguiente. Y luego me van a preguntar, bien, ¿cómo debería llamarse el proyecto? Entonces esto va a ir a un directorio predeterminado diferente de mis anteriores. Entonces le voy a dar el mismo nombre sólo para mostrar un nivel de consistencia. Bien, entonces la gerencia escolar punto MVC. Y luego puedo golpear Siguiente. Entonces me va a preguntar por el tipo de framework. Entonces ya pasamos por el hecho de que tenemos diferentes tipos de frameworks o podríamos tener diferentes frameworks instalados. Y lo que vamos a estar haciendo en este curso, Busquemos, podemos hacerlo a partir de las siete, podemos hacerlo donde haya una diferencia. Definitivamente señalaría. Pero para este curso vamos a usar dotnet seven y podemos elegir un tipo de autenticación predeterminado. Ahora bien, estas son opciones que podríamos haber brindado en la CLI porque no proporcioné ninguna opción en la CLI. No voy a hacer nada extra aquí. ¿Correcto? Y no voy a hacer ninguna de estas cosas. Lo que voy a hacer es simplemente presionar Crear. Después de golpear Crear, obtienes nuestro Visual Studio abierto con nuestros proyectos. Entonces tenemos el Explorador de Soluciones por defecto, este panel está en realidad en el lado derecho. Pero me resulta más fácil de usar cuando está en el lado izquierdo. Así que en realidad puedes arrastrar estos paneles y colocarlos donde quieras. Por supuesto, izquierda o derecha suele ser un buen lugar para tener algo como esto, que te está mostrando todos los archivos, pero me gusta tenerlo encima a la izquierda. ¿Bien? También tiene acceso a herramientas de administración de bases de datos integradas. Entonces con Visual Studio, en realidad ni siquiera necesitas el Data Studio porque realmente puedes conectarte a tu base de datos es desde aquí mismo. Y dinero, hasta cierto punto, ejecutar consultas, crear nuevas tablas, y como objetos de base de datos según sea necesario. Bien, entonces Visual Studio es muy potente y cuando quieras correr, puedes presionar F5 en tu teclado o puedes presionar este botón Ejecutar arriba, que tiene las letras HTTPS. Pero si estás usando dotnet six, posible que las letras no vean HTTPS. Puede que solo tengan el nombre del proyecto hace en donde veas HTTPS aquí, diría que la gerencia escolar punto MVC, y eso está bien. Los dos harán lo mismo. Es solo cuestión de cómo se clasifican o llaman en esta configuración de lanzamiento, ese archivo JSON, donde describe los diferentes perfiles. Entonces tendrás un perfil HTTP que se ejecutará en una configuración HTTP. Entonces también sale de la caja con HTTPS, que se ejecutará con la configuración HTTPS. ¿Bien? También puede obtener un aviso para confiar en el certificado, los certificados de desarrollo. Si recibe ese aviso, haga clic en Sí. Y yo sólo correré y veamos cómo sería esto. Entonces lo que hace es construir el proyecto, es decir, va a compilar, mirar todo el código, asegurarse de que todo se vea bien. Y entonces si todo se ve bien, lo va a lanzar aquí. El terminal, o tengo un terminal ejecutándose en Visual Studio también. Y me está demostrando que ahora está escuchando en el HTTPS sports 7212 y el puerto HTTP 5294. En el fondo. También lanzó mi navegador predeterminado, y habría predeterminado el puerto HTTPS. Y aquí está nuestra aplicación web ejecutándose desde dentro de Visual Studio. Entonces, una vez más, Visual Studio es muy potente y nos permite lograr una serie de cosas solo hacer clic aquí y allá. Nos dan muchas herramientas y es muy fácil navegar y ponerse en marcha. Sin embargo, una vez más, no todas las computadoras, no todos los sistemas operativos son compatibles con Visual Studio. Entonces nos enfocaremos en el desarrollo usando Visual Studio Code y la CLI de dotnet. Sin embargo, haré todo lo posible para ejecutar los paralelismos donde es posible que necesites saber cómo lograr lo mismo usando Visual Studio. 11. Tour Visual Studio Code: Bienvenidos de nuevo chicos. En esta lección vamos a estar recorriendo Visual Studio Code un poco, ¿verdad? Es un editor muy versátil y es bueno simplemente saber dónde están las cosas y entender algunas de las indicaciones que podemos ver a medida que avanzamos. Así que tengo nuestra aplicación School of Management proyecto punto MVC abierto que creamos antes. Y si quieres abrir nuestro proyecto, digamos que Visual Studio Code cierra y quieres volver ahí. Tienes la opción de usar el CLI y navegar por allí. O en realidad podrías ir a Archivo y decir Carpeta Abierta. Y luego desde aquí se puede navegar a la carpeta y luego seleccionar carpeta. Y entonces tendrías la misma experiencia donde el código de Visual Studio, simplemente cargaremos todos los archivos que se encuentran actualmente en la carpeta en esta sección llamada el Explorer. Puedes acoplar este Explorer para que obtengas más bienes raíces para tu código. O puedes tenerlo a un lado, puede redimensionarlo a voluntad. Escribe a veces simplemente no lo quieres tan abierto. ¿Bien? También tienes la capacidad de buscar a través de todo. Entonces si busco el último MVC, entonces solo me va a mostrar todos los lugares que aparece puedo hacer una búsqueda y reemplazar con bastante facilidad. Reemplazar todos están reemplazando uno a la vez. Por supuesto, sugeriría uno a la vez para operaciones a granel donde podrías tener algunos choques con lo que estás buscando, ¿verdad? Por lo que siempre se quiere tener cuidado con esa búsqueda y sustitución, especialmente para operaciones a granel. Entonces tenemos acceso de control de fuente. Ahora, aquí podrías ver una opción que sugiere que instales Git para tu sistema operativo. Ahora estoy en Windows. Entonces, si no tuviera Git instalado ya, verías instalar Git para Windows. Porque lo que sucede es que Visual Studio Code tiene una integración directa con Git. Y te permite ejecutarlo todo, obtener comandos de aquí mismo con bastante comodidad sin que nunca tengas que meterte en el CLI. Bien, así que conocer los comandos de Git es genial. Pero con Visual Studio Code, puedes ser causado por sin tener un conocimiento íntimo de ellos. Entonces quieres seguir adelante y ponerte, subirte a tu sistema operativo. Estaremos usando GitHub. Entonces ves aquí que hay un bonito botón rojo grande que dice publicado un GitHub porque es de unos pocos clics, en realidad podemos empujar nuestro proyecto a GitHub y lo estaremos haciendo más adelante. Entonces no tenemos que preocuparnos por eso. Después hay run y debug. Ejecutar y depurar realmente nos permite ejecutar nuestro proyecto. Bien, así que con nuestro experimento de Visual Studio, viste que podíamos hacer clic en el botón y lanzó nuestro proyecto. Bueno, eso es lo que Runner Depot va aquí. Veremos cómo funciona esto versus cómo podemos hacerlo en el CLI también. No quería saltarse el Explorador remoto. Y me estoy saltando eso porque probablemente no tienes eso. Este explorador remoto es uno de mis complementos adicionales. Y cualquier cosa que estés viendo a lado en mi computadora que no estés viendo para decidir en tu computadora significa que estas son extensiones adicionales que tengo instaladas para mis propios fines. No voy a priorizar nada que no sea absolutamente necesario para que completes este curso. Entonces, el siguiente ícono importante al que querrías prestar atención serían las extensiones. Ahora en Extensiones, verás que tienes acceso para instalar diferentes extensiones en soporte para diferentes tipos de proyectos en función de tus necesidades. Entonces trabajo con Azure. Tengo bastantes como sus extensiones instaladas, ¿no? Pero luego también tengo fragmentos para Bootstrap cinco para hacerme la vida más fácil. También tengo un fragmento C-sharp. Y es posible que haya visto algunas indicaciones sobre la necesidad de extensión C-sharp, C-sharp según el tipo de proyecto. Entonces porque vamos a estar haciendo un proyecto C-sharp en dotnet. La extensión C-sharp tiene mucho sentido porque es agregar soporte para la sintaxis de sentido porque es agregar soporte para codificación C-sharp e IntelliSense y autocompletado y una serie de cosas. Por lo que sugeriría que espera con ansias la extensión C-sharp. No. Para instalar una extensión, lo que haces es buscar el mercado de extensiones arriba aquí, y simplemente puedes escribir C sharp. Y entonces esa encabezará la lista porque es una extensión oficial de Microsoft. Puedes hacer clic en él. Entonces donde veas todos estos botones para mí, en realidad verías un botón de extensión de instalación. Como si tuviera que hacer clic en uno, no tengo ahí es lo que verías botón de desinstalación. Para que puedas seguir adelante e instalarlo y podría requerir que reinicies tu Visual Studio Code. Hay una serie de extensiones útiles y siempre quieres mirar el editor de la extensión. Y una cosa que utilizo para medirlo también es cuántas descargas tiene. El editor es uno, pero luego el número de descargas en caso de que no estés necesariamente familiarizado con el editor. El número de descargas también es variar. Un muy buen indicador en cuanto a su estabilidad y qué tan bien se usa. Ahora otra cosa que puede notar, y creo que mencioné antes es que código de Visual Studio podría mostrarte un pequeño pop-up sugiriendo que obtienes particularmente extensiones. ¿Instalas ciertas extensiones en función de un tipo de proyecto? En realidad puedes seguir adelante con esos. Visual Studio Code es solo hacer sugerencias para ayudarte a tener la mejor experiencia que puedas en función de lo que estés trabajando. Instaló una serie de extensiones. Puedes ver aquí que tengo 45 extensiones. Así que solo ve social, Visual Studio Codes, versatilidad, porque lo he usado para el desarrollo de plantillas ARM. Lo he usado para el desarrollo Angular, lo he usado para el desarrollo de Azure. Lo he usado para algunas cosas del libro de trabajo de datos que siguen siendo Azure, ¿ verdad? Larval, PHP, Python. Estas son todas las cosas que he usado para hacer, y estas son cosas para las que puedes usarlo en el futuro medida que te desarrollas y quieres explorar diferentes avenidas. Por lo que Visual Studio Code es casi como un IDE todo en uno para varias plataformas. Esta es la primera vez que usas Visual Studio Code. Te animo a que sigas adelante y explores y veas cómo soporta otros lenguajes y otros frameworks y cómo puedes usarlo a tu favor. Ahora, otra cosa que quiero, Pasemos de las extensiones. Otra cosa que solo quería señalar antes de entrar en cualquier desarrollo real sería el hecho de que tiene un terminal incorporado. Entonces antes saber todo lo que hicimos para crear el proyecto y así sucesivamente. Lo hicimos en la terminal nativa de nuestro sistema operativo. Sin embargo, mientras estamos en Visual Studio Code, probablemente no queremos estar saltando dentro y fuera y entre ventanas. Convenientemente ha incluido una terminal para nosotros. Para que puedas llegar usando el atajo de teclado que está aquí. O simplemente puedes darle click fuera de curso y eso lanzará una ventana de terminal. Y esta ventana terminal está basada en Porsche. Pero ¿adivina qué? Tenemos opciones. Así que en realidad podemos tener múltiples terminales funcionando simultáneamente. Así que en realidad podría agregar otra ventana de terminal. Y si quisiera uno que fuera solo símbolo del sistema. Si quisiera uno que fuera un bash y obtendrás Git Bash una vez que instalemos Git en tu máquina. Y lo mencioné antes, pero no te lo mostré. Para que te pongas bien. Así que puedes conseguir yendo a obtener guión scm.com, o simplemente puedes obtener Google. Y estoy seguro que el primer resultado de búsqueda te daría este sitio web. Se puede descargar para diversos sistemas operativos tal cual es, también multiplataforma. Entonces puedes obtener las ventanas, el Mach, y puedes obtenerlo para tus distros de Linux. Y es de forma nativa interfaz de línea de comandos, ¿verdad? Pero entonces sí tienes ciertas herramientas que te pueden dar una interfaz de usuario y Visual Studio Code, una vez más, es una herramienta que te permitirá hacer obtener comandos relacionados aquí. ¿Bien? Entonces esas son cosas que podemos saber si quiero que ejecute nuestra aplicación aquí usando la CLI. Puedo en el terminal y dejame simplemente cerrar el Windows, Terminal Windows que no estoy usando, ese pequeño cubo de basura. Simplemente puedes hacer clic en eso para matar la ventana. Y voy a saltar al Propiedades para su archivo de configuración de césped. Bien, así que te voy a dar un recorrido por el archivo para que entiendas todo lo que está pasando. Pero antes de eso, solo quería enfocarme en este archivo de configuración de línea. Ahora, tenemos dos perfiles de HTTP y HTTPS. Si queremos que ejecute nuestra aplicación, por defecto sería HDTP. Si digo dotnet run, en realidad pondría por defecto el perfil HTTP y el almuerzo o versión HTTP de nuestra aplicación, cotizar versión sin comillas. Es la misma versión, mismo código, solo comportamiento diferente seguridad sabia. Pero entonces si quisiéramos ejecutar usando la configuración HTTP s, entonces tendríamos que especificar en nuestra ejecución dotnet. Así que sólo voy a silenciar esta ventana de terminal un poco más grande. Y puedes hacerlo manteniendo presionado Control y presionando Plus para aumentar el tamaño general de tu Visual Studio. Código, Interfaz de Usuario y Control menos para reducirlo, ¿verdad? Para que puedas jugar con eso y llegar a ajustarlo a un tamaño apropiado para tu pantalla. Y entonces ¿qué más es dotnet run? Y luego pueden ver guión, lanzamiento de guión, perfil de guión, y luego especificar que quiero usar el perfil de lanzamiento HTTPS. O cuando presiono Enter, va a construir. Y verá la salida del terminal que nuestra aplicación está escuchando ahora en nuestro puerto HTTP y HTTP, ¿verdad? Yo no hice esto. Parte de ella seguiría funcionando, pero solo estaría escuchando en el puerto HTTP de 5246. Bien, entonces esas son solo algunas pepitas. Entonces, si controlamos haga clic en esta URL, se lanzará nuestro navegador. Y entonces podemos ver aquí que esta es nuestra aplicación MVC ejecutándose desde dentro de Visual Studio Code. Bien, y cuando termine de hacer lo que estoy haciendo, solo puedo usar Control C para apagar. Entonces, cuando termine probar y quería volver al código, y quiero detener el servidor que está funcionando. Puedo simplemente Controlar C y luego lo apagará y me devolverá a la interfaz CLI. Bien, así que ese es un agradable recorrido rápido y sucio por Visual Studio Code y lo que puede hacer por ti. Hay otras pequeñas pepitas que descubriremos en el camino. No quiero darte sobrecarga de información. Solo quería señalar algunas de las cosas más esenciales para nuestras tareas de desarrollo. Y a medida que vayamos vamos a ver más. Ninguna característica agradable. No es absolutamente necesario, pero es uno que yo uso. Y probablemente influirá en la experiencia que tienes en base a cómo hago lo mío. Pero yo uso autosave. Si vas a Archivo, tú también lo harás. Si te desplazas hacia abajo, verás el guardado automático, así verás que está marcado para mí. Entonces eso significa que a medida que escribo, código de Visual Studio está guardando automáticamente mis cambios. Y si lo habilitas, tendrás esa experiencia similar. De lo contrario, claro, después de realizar cambios en nuestro archivo, ¿ necesitas guardarlo o construyo cada vez para ver el reflejo en el entorno de pruebas? Así que el guardado automático puede ahorrar mucho tiempo. Cuando se trata de eso. También podemos ir y cambiar nuestra configuración. Si quieres usar un tema de color diferente ahí está, puedes cambiar tu tema a qué, un claro u oscuro. Entonces no voy a cambiar de oscuro, pero puedes elegir la que más te guste. También puedes habilitar cosas como Word o superior y cambiar el tamaño de tu fuente desde la configuración. Puedes cambiar el tipo de fuente que estás usando. Se puede cambiar el tamaño de la fuente. Entonces el mío es 30. Renta saber. Si quieres hablar o arriba. Puedes buscarlo aquí y puedes cambiarlo, lo que quieran encendido o apagado. Lo tengo puesto. Ahora, cuando volvamos, haremos un recorrido por nuestros archivos de proyectos. 12. Recorrido de archivos y carpetas: Bien chicos, así que ahora hagamos un recorrido por nuestros archivos de proyectos. Entonces ese es el nivel en configuraciones abiertas. Permítanme cerrar esto y empecemos de nuevo. También voy a acercarme un poco y cerrar la terminal así tenemos más bienes raíces. Saber. La carpeta bin. Esto se genera después de hacer un proyecto construido y prácticamente está almacenando los activos que hacen que su aplicación se ejecute, ¿verdad? Entonces, esencialmente, cuando presionas F5 en Visual Studio o usarías el comando .net dotnet run. Lo que pasa es que cuando dice que está construyendo, está compilando todos estos archivos y activos y poniéndolos en esta carpeta bin. Y luego se va a ejecutar la aplicación desde esta carpeta bin. Y entonces esa es la manifestación de que verías un interactivo mientras pruebas. otro lado, cuando estás publicando, también crearía un conjunto de activos similares a este, y eso es lo que colocarías en la máquina de destino cuando estés implementando tu aplicación. ¿Bien? No, dotnet Core es multiplataforma, por lo que estos activos funcionarán en cualquier sistema operativo, en prácticamente cualquier tipo de servidor donde necesite ser alojado. Bien, eso es lo que obtenemos de la carpeta bin. Ahora, tenemos una de las carpetas de claves que sacamos de la caja incluso antes de hacer una compilación. Y eso se llama controladores. Ahora tenemos en la carpeta de controladores, los controladores. Y recuerda que los controladores están ahí para controlar el flujo de tu aplicación, lo que significa que cada solicitud que entra pasa por un controlador. Y luego se maneja y o obtienes un error porque no puede manejarlo correctamente, o realmente llegas a la página a la que intentas ir. Así que cada vez que navegas por nuestro sitio web, envías una solicitud con cada clic, envías una solicitud cuando vas al destino u obtienes los resultados que esperas, luego obtienes una respuesta. Ojalá obtengas la respuesta que estás esperando, o podrías obtener una respuesta de error. Entonces, un controlador está sentado entre esa transacción de respuesta de solicitud, ¿verdad? Entonces, por ejemplo, cuando ejecutamos nuestro sitio web y cargó la página de inicio, lo que pasó es que fue al controlador home y luego pasó por defecto la acción index, y luego el index acciones es devolver una vista. El controlador tiene un registro de todas las posibles raíces son solicitudes que puede cumplir con éxito. Una de esas solicitudes que se enrutan puede cumplir es el índice. En general, desarrollo web, índice siempre debe ser tu primera Playa. Más servidores van a intentar ir al índice punto HTML o punto PHP o no SPX, ¿verdad? No importa cuál sea el tipo de archivo y el tipo de extensión, siempre está buscando índice. Primero. El controlador doméstico tiene lo que llamamos una acción, que es una ruta registrada a la que el controlador doméstico sabe que puede ir. Si vas a casa, automáticamente va a buscar índice. Y luego cuando busca índice, este método define lo que debería suceder cuando se navega el índice a partir de qué acorde y qué magia queremos que suceda. Es posible que queramos ir a buscar datos de la base de datos. Es posible que queramos hacer cálculos. Hacemos todo eso dentro de este método. Hacer cosas. ¿Bien? Y aquí leemos todo nuestro código y magia y lógica. Y luego regresamos lo que llamamos la vista. Bien, así que pronto llegaremos a la carpeta views, pero verás que tenemos una carpeta Views. Esta es la C en control en MVC, el controlador de mares. Entonces esto es lo que hace un controlador. Toma la solicitud que dice no puede cumplir con la solicitud. ¿Quieres que vaya al índice? Sí, tengo una acción de índice. Puedo cumplir con la solicitud. Esto es lo que tengo que hacer antes de cumplir con su solicitud o antes de mostrarle un resultado. Entonces la línea final es donde devuelvo la página que solicitó junto con cualquier dato adicional que necesite estar ahí. Dado que se trata de un código repetitivo, se puede ver que es muy sencillo. Sólo va a devolver el pH. No es hacer nada elegante antes de que pase página. Entonces la vista es el destino final y esta generalmente va a ser la última línea en tu acción cuando estés creando la tuya propia. Otro destino que el controlador doméstico conoce es la privacidad. Entonces cada destino que quieras, necesitas tener una acción. Y esa acción devolverá una vista o devolverá alguna respuesta que sea favorable a lo que el usuario está esperando. También tienen otro mito general, acción llamada error, que es devolver un modelo de vista de error. Entonces la página de error. Ahora bien, si miras aquí, ves que éste está haciendo más. Uno tiene algunas anotaciones que están manejando el almacenamiento en caché. No tenemos que preocuparnos por eso, ¿verdad? No. Pero dentro del método se ve que está haciendo un poco más. Dice vista de retorno y luego está viendo vista de retorno con estos datos. Entonces, esencialmente, esto es como una página de error global. Siempre que haya un error, al menos mientras estás depurando, entonces va a hacer un seguimiento de qué rayos ese error, qué actividades son, y te permitirá rastrearlo en la línea en tu aplicación. Entonces esa es una especie de cosas más avanzadas en las que no voy a meterme. Pero lo que realmente quería señalar aquí es que está agregando información que la vista necesita. Entonces así es como pasamos la información a la vista. La vista del hogar no necesita una inflamación. Entonces no tuvimos que hacer cosas. Derecha. No tendría que darle ninguna inflamación. El controlador de privacidad tampoco necesitaba ninguna información adicional. Sin embargo, cuando se supone que va a aparecer la página de error, queremos pasar esta información adicional del código detrás cuando devolvamos la vista. Entonces eso es esencialmente lo que hace eso. ¿Bien? No, no estoy dispuesto a ordenar de MVC. Voy en el orden de la estructura de carpetas aquí. Entonces los siguientes serían los modelos. Y un modelo error view model es el único modelo que obtuvimos en nuestra foto. Ahora, el modelo Error View contiene estas dos propiedades y prácticamente nuestros modelos recortan los modelos de vista, nuestros archivos de clase que representan los diferentes bits de datos que queremos mostrar a nuestro usuario, ¿verdad? Entonces un modelo encarnará cadenas en diferentes tipos de datos, en spool, char, etc. Sea lo que sea que necesites mostrar en tu página que necesita ser dinámico. Prácticamente vas a crear un archivo de clase, que básicamente va a jugar el papel de nuestro modelo. Es sólo la clase. Nada demasiado especial si 0 p, Bueno, no quieres clases y sabes cuáles son las propiedades. Y esencialmente lo que hacemos con el controlador es establecer los datos. Entonces eso es lo que estamos haciendo aquí. De hecho, estamos sentando los datos dentro de este modelo de vista de error, o estamos creando un objeto de esta clase. Y luego una vez que hayamos creado un objeto, despoblamos las propiedades con los diferentes bits de datos que serán uno. Entonces aquí llenamos el ID de solicitud con toda esa información. O va a enviar sobre eso según ID o va a enviar sobre el identificador de rastreo. Si eso es saber lo que va a poblarlo con todo eso, entonces va a devolver un objeto de eso. Entonces la vista ahora tiene un modelo que tiene algunos datos. Y la vista ya sabrá extraer los datos del objeto y mostrar los del usuario. Bien. Entonces eso es lo que realmente representa un modelo, es solo un objeto de una clase que almacena datos que la vista va a usar. El controlador es el encargado de poblar ese objeto con los datos antes de que la vista lo muestre. Obj, esta es una de esas carpetas arbitrarias o a las que no necesariamente tenemos que prestar mucha atención. Una vez más, solo tiene un montón de archivos generados que no hacemos o con los que interactuamos demasiado. Así que me saltaré eso. Hemos entrado en propiedades y hemos mirado la configuración de lanzamiento de ese archivo JSON. Entonces aquí, como sugiere el nombre del archivo, solo tiene diferentes configuraciones para todo, la aplicación debería iniciarse, ¿verdad? Así que tenemos la configuración de iOS. Si quisiéramos ejecutar con una instancia local de IIS Express se ejecutaría en ese puerto. Pero Vizio, sorry.net tiene su propio servidor incorporado. Así que no necesariamente tenemos que confiar en lo expresado como lo tuvimos que hacer en el pasado. Por lo que nos permite tener nuestros propios perfiles de lanzamiento en HTTP y HTTPS. Y luego sí nos permite conectar lo que le llamaremos variables de entorno en las diferentes configuraciones de lanzamiento según sea necesario. ¿Bien? Entonces esos son más o menos los ajustes que salen de la caja. Y no necesariamente tiene que modificar este archivo a menos que sepa absolutamente lo que está haciendo y tenga necesidades muy específicas detrás de sus modificaciones. Pero en términos generales, puedes dejar este archivo solo. Ahora, pasemos a las vistas y a la carpeta views. Puede ser muy interesante. En primer lugar, notarás que tenemos dos. Tenemos una carpeta ahí llamada home. Ahora, tengo el controlador doméstico abierto simultáneamente para que pueda mostrarles la expectativa del sistema de archivos y cómo todo se une. Una vez que sigamos esta convención de nomenclatura, tenemos el controlador doméstico. Así que tenemos una carpeta Views llamada home. Entonces lo que notarás es ese controlador para siempre que crees, el motor MVC automáticamente va a buscar dentro del controlador de vistas una carpeta con el mismo nombre que el controlador. Quiero decir el mismo nombre. Es decir, lo que viene ante el controlador de palabras. Pero ese es un patrón de nomenclatura. Entonces si agregamos estudiantes controlador. Entonces serían estudiantes. Ese es el nombre del controlador. Los controladores de palabras esperaban. Bien, así que siempre debes tener el controlador de palabras, pero lo que venga antes ese es el nombre. Se espera ver una carpeta con el mismo nombre en lugar de la carpeta views. Y luego dentro de esa carpeta se espera ver diferentes archivos CSS HTML. Entonces CSS HTML es la extensión que se le da a una navaja ver archivos, ¿verdad? Y antes de entrar en cómo se ve uno de esos archivos, quería señalar que cada nombre de archivo necesita corresponder con un nombre de acción. Entonces es por eso que cuando volvemos view sabe qué regresar. Bien, entonces déjame pasar por eso otra vez. Cuando envías una solicitud, al hacer clic en un enlace, a la derecha, estás haciendo clic en un enlace que debería navegar a nuestro controlador. El controlador evaluará el enlace y verificará para ver si tiene una acción que coincida con la URL a la que está tratando de llegar. Si tiene una opción, entonces irá a esa acción, ejecutará cualquier magia que haya en esa acción, y luego intentará devolver una vista. Esta visión que intenta devolver será el archivo CSS HTML que se le especifique con el mismo nombre fuera de esa acción. Entonces, si envías una solicitud y no hay ninguna acción que coincida con esa solicitud, entonces obtendrás un error 404. Si envía una subasta y solicita, lo siento, y encuentra una opción que coincida con la solicitud. Y luego intenta devolver la vista y no puede encontrar ese archivo coincidente, entonces obtendrás una solicitud de fluoróforo y eso es básicamente mantener todo el trabajo de los sitios web. Entonces esa es esencialmente la experiencia que puede esperar cuando navega por su vista cuando está construyendo su sitio. Y una vez que sigas esta convención de nomenclatura, no tendrás ningún problema. Entonces verás aquí he indexado Celsius HTML. Tengo índice como acción f privacidad, privacidad. Puede haber excepciones a la regla porque aquí hay error, pero no ves un error dentro de esa carpeta. De hecho, el error está en la carpeta compartida. Eso está bien. Pero en términos generales, quieres seguir el patrón detrás del índice y la privacidad a medida que avanzas. Ahora, echemos un vistazo a lo que hay en el archivo de índice. En el archivo index, prácticamente tenemos una mezcla de HTML y C-sharp. Bien, así que eso es HTML. Este es un código de aspecto C-sharp. Entonces el archivo CSS HTML es como un archivo híbrido que nos permite escribir cierta cantidad de C-sharp dentro de este archivo HTML. Pero realmente es solo un archivo HTML glorificado. Si necesitamos que algo sea dinámico entonces podemos introducir C-sharp. Y para introducir C-sharp, solo necesitamos un letrero publicitario. Y entonces podemos empezar a escribir algo, ¿verdad? Ese es el código C Sharp. Entonces veamos, primero voy a ejecutar esto. Voy a usar mi atajo de teclado Control Shift, apostrophe lanzó el terminal, voy a decir dotnet run y dejar que eso inicie nuestra aplicación. Entonces aquí está nuestra aplicación, ¿verdad? Y fíjate que fue, no especificó a dónde quería ir, sino que solo nos dirigió a la página de índice del controlador home, ¿verdad? Si hago clic en privacidad, entonces mira eso. Va a decir la privacidad de la barra de hogar. Entonces, ¿quién es el controlador? privacidad fue la acción. Si traté de ir a, intentemos, intentemos indexar, entonces va a volver a la página principal. Por lo que conoce el índice de barra en casa. Pero si traté de ir a casa cortar mi nombre, entonces me va a dar un 404 porque no hay acción que se pueda encontrar para esa ruta. Bien. Ahora bien, lo que quiero hacer es mostrarles cómo podemos inyectar algo dinámico en esta visión. Entonces, si quería, digamos el valor de la fecha. Entonces puedo decir a la hora de firmar escrituras. No. Mira eso, UTC sabe, bien, y guarda eso. Y yo solo haré Control C dentro de la terminal para matarlo. Y luego solo presiona hacia arriba para obtener el comando run más reciente y luego presiona Enter nuevamente, para que se reinicie. Y luego navego de regreso al sitio web o simplemente refresco luego mira esto. Acabo de agregar eso, ¿verdad? Esa es una marca de tiempo basada en el código que acabo de poner, que es el código C-Sharp, datetime, UTC know. Bien, entonces esto es, sí, es un archivo HTML, pero puedo poner en mi código C-Sharp. Entonces, si quisiera que esto fuera, digamos en una etiqueta H1, realidad podría crear un HTML. Cada una etiqueta. Poner en ese tiempo. Y esta vez voy a Control C para terminar. Y esta vez voy a usar un comando diferente. En vez de dotnet run, voy a decir dotnet watch. Bien. Así que mira esto ahora. Y dije reloj dotnet. Me va a dejar saber que va a hacer lo que ellos llaman recarga caliente. La recarga en caliente está habilitada. Déjame desplazarme hacia arriba para que podamos ver exactamente lo que dice. Aquí. Está en el reloj dotnet Hot Reload habilitado. Y luego podemos ver una lista de otras opciones. Entonces dicen usar Control R para reiniciar. Así que de esa manera, cuando hacemos nuestros cambios, no tenemos que estar parando y comenzando y parando y corriendo y saltando y corriendo punto sobre él. El reloj cumplirá eso un poco más fácil para nosotros. Entonces cuando vuelvo a mi navegador, aquí está la fecha y hora conocida como etiqueta H1, ¿verdad? Entonces si quería más de esos, solo puedo usar Control C, V. Y noté que no resalté, cuando hice control CV, simplemente hice clic en la línea, control C, control V. Será duplicar la línea. Y con cada cambio, me está haciendo saber que el archivo ha cambiado y hace una recarga en caliente. Y luego cuando vuelvo al navegador sin parar y comenzar, aquí está un fruto del trabajo. Bien, así que solo te estoy mostrando que el archivo view es realmente solo un archivo HTML glorificado que nos permite inyectar algún código C-Sharp donde sea necesario. Y es por eso que cuando cargamos un objeto con datos, en realidad podemos interactuar con los datos que provienen de nuestro objeto C sharp aquí mismo en nuestro archivo de vista. La vista de índice es bastante simple. Déjame quitarle todo eso. Tenemos la vista de privacidad, que no es más espectacular que eso. Excepto aquí verás que están haciendo esa inyección C-sharp porque puedes establecer el título dinámicamente fuera de la página en la que estás, y luego solo están imprimiendo esa página dinámica aquí. Bien. Ahora, cuando voy a la carpeta compartida, tenemos el archivo de diseño o el archivo de diseño. Alejar un poco. El archivo de diseño es básicamente solo la plantilla que utilizará todo el sitio web para inferir cómo debería ser. Si notas, cuando voy entre el hogar y la privacidad, todo es estático excepto lo que está entre el encabezado y el pie de página. Bien, bueno, todo se ve consistente y la consistencia es muy importante. Al crear sitios web con sitios web estáticos, tendrías que copiar y pegar manualmente esa barra de navegación y el pie de página y todos los activos en cada página. Si desea una consistencia, la página de diseño proporciona una plantilla HTML. Notarás que las vistas no empiezan con las etiquetas HTML y todo. Y en cada WEBO es que siempre empiezan con tu esqueleto. Sin embargo, tenemos el esqueleto un lugar, tenemos las etiquetas HTML DOCTYPE. Tenemos la cabeza y tenemos el cuerpo todo en un solo archivo. Bien, así que no tenemos que repetir eso por cada página de vista que construimos. Sin embargo, dentro del cuerpo y tenemos el nav, déjame simplemente colapsar un poco las partes, ¿verdad? Tenemos el nav y luego empezamos con el contenedor, que suele ser donde empiezas a poner tu contenido. Entonces tenemos eso, y luego tenemos esta sección llamada render body. Entonces render body es donde se inyecta la vista. Es por eso que cuando cambiamos las páginas, todo lo demás es estático excepto lo que hay dentro del cuerpo. ¿Bien? Esta es la sección de contenedores, privacidad. Esa es nuestra sección de contenedores esa entrega cuerpo porque solo nos está mostrando el archivo de vista o el contenido del archivo de vista que se está cargando en función de la ruta. Sin embargo, todo lo demás es consistente. Entonces ahora si hago pequeños ajustes, como cambiar el nombre de esta sección, tomar todos los pasos, alimentos y poner espacios entre los medios. Y eso lo hice en el título, la barra de navegación, así como el pie de página. Si echamos un vistazo por aquí, entonces veremos que todo cambió, ¿verdad? Y no importa a qué página vayamos, una vez más, siempre va a ser consistente. No. Creo que tenemos una buena comprensión de nuestros puntos de vista y tenemos otros archivos que juegan un papel de apoyo en los que entraremos más adelante. Tenemos la carpeta raíz dub, dub, dub, dub, que tiene nuestros activos. Entonces venimos con ese CSS. Este es nuestro propio archivo CSS que viene construido en que podemos extender y escribir nuestro propio CSS, pero sí tenemos CSS de sitio en el que podemos escribir nuestro propio sitio, solo que podemos escribir nuestros propios archivos JavaScript en. Y luego tenemos la carpeta lib que tiene bibliotecas de terceros. Entonces, en términos generales, cuando instalas bibliotecas de terceros, como sale de la caja con Bootstrap y jQuery end. Esas bibliotecas, entonces querrás ponerlas dentro de un flip. Esos también están referenciados por defecto en nuestro archivo de diseño. Aquí. Aquí podrás ver todos los archivos de script a los que se hace referencia, ¿verdad? También verás en el encabezado, todos los archivos CSS siendo referenciados como la clave. Y con esos, así tenemos Bootstrap, hemos decidido CSS, y luego tenemos un archivo CSS especial que está diseñado específicamente para layouts. Y lo verás aquí llamado layout.css ational que CSS, podemos escribir aún más CSS específico para la página de maquetación sin que sea global. Bien, a continuación, tenemos algunos otros archivos incorporados y tenemos la configuración de la aplicación ese archivo JSON. Así que las cosas opuestas como el archivo JSON tiene dos partes para que podamos crear otros entornos, versiones específicas. Entonces para el desarrollo, si tenemos configuraciones específicas queremos usar, podemos establecerlas ahí versus cuando publicamos versus cuando estamos probando etc, entorno de Cuenca. Podemos tener diferentes. Estaremos modificando esto a medida que avancemos. Así que debes saber que es un archivo clave y quieres tener mucho cuidado con las modificaciones que hagas aquí, porque si esto es mal modificarlo, entonces tu app no se ejecutará. Entonces tenemos nuestro program.cs, que está en cualquier aplicación de C-Sharp. Program.cs es el primer archivo que se ejecuta. Una vez que la aplicación se ejecuta, va a buscar program.cs. Entonces, lo que sea que esté en este archivo establece el tono de cómo funcionará tu aplicación. Y cuando vemos que marca la pauta, lo que estamos haciendo antes que nada, es agregar servicios al contenedor. El contenedor será como lo que utilizará la app para saber lo que puede y qué no puede hacer. Queremos agregar tantos servicios como necesitemos para que ese contenedor antes de que se construya la aplicación. Así que aquí estamos viendo soporte IDE para controladores con vistas estaban haciendo un MVC absolutamente necesita controladores y vistas, ¿verdad? Después construimos la app. Y luego hay algunas comprobaciones para decir, bien, si estamos en un entorno que es desarrollo, o si no estamos en el desarrollo de aplicaciones, podemos reescribir esa página, cuatro flechas y podemos forzar Redirección HTTPS, ¿verdad? Entonces básicamente esto dirá que puede usar otra cosa que no sea HTTPS, estricto bateador de seguridad de transporte. Pero entonces eso suele ser para producción. Entonces por eso está en esa declaración if. Si no estamos en desarrollo, entonces sea estricto con ese encabezado de transporte https, ¿verdad? Nosotros usamos HTTPS, la redirección. Entonces verás aquí que hay una advertencia que aparece cada vez que no estamos usando la configuración HTTPS, es decir, el middleware de redirección está durante nuestra advertencia, eso será esto. Entonces estos son lo que llamaremos un middleware. Entonces estas son mini aplicaciones que hemos agregado a la canalización de solicitudes. decir, una vez que llegue la solicitud, una vez que alguien haga clic en una URL, va a decir, bien, ¿cuál es el orden que debo hacer? Primero debería leer Erich para leer Erich a HTTPS, debería usar archivos estáticos, es decir, esos activos desde la raíz. Debería usar ruteo. Debería intentar autorizar, y luego debería intentar mapear. Entonces debería correr, ¿verdad? Así que más o menos eso es como el orden en el que todas las funciones se llaman con cada solicitud, podemos agregar nuestro propio middleware. Podemos cambiar el orden, pero el orden sí importa. Por lo tanto, desea asegurarse de que cuando agregue middlewares a este archivo, lo esté agregando en un orden particular en función de cómo desea que funcione su aplicación. Eso es para la gira, ¿verdad? Se compartió mucha información. Entonces quieres volver a jugar, ya sabes, cómo crear proyectos adicionales. Si quisieras crear un proyecto adicional e intentar estropear los archivos y ver qué deja de funcionar y así sucesivamente. Esa es una buena manera de aprender a moverte. Yo sugeriría que tengas múltiples proyectos que hagas ese ancho. Pero por ahora, tenemos hacia todos los archivos del proyecto que son absolutamente necesarios para nuestro entendimiento en esta etapa. En nuestra siguiente lección, vamos a llevar nuestro proyecto a GitHub. 13. Añadir proyecto a GitHub: Bien chicos, así que háganoslo saber, impulsen nuestro proyecto para que se levante. Así que usaremos el proyecto que hemos creado para crear un nuevo repositorio en nuestra cuenta de GitHub. Y eso también establecerá un vínculo entre nuestra instancia de Visual Studio Code y la instancia de GitHub. Y eso nos permitiría empujar y tirar como necesitamos. Vaya a la pestaña Control de código fuente. Y tienes dos opciones puedes inicializar un repositorio se publican en GitHub. Entonces lo que pasa es que una vez que tengas Git instalado en tu máquina, obtén acceso a un sistema de gestión de control de origen local. Por lo que también se le llama sistema de gestión de control de fuentes distribuidas . En tu propia máquina, puedes tener todos los cambios que quieras, toda la historia, todo lo que estás haciendo, todo está en tu máquina. Sin embargo, si tu máquina se cae, entonces no tienes respaldo. Entonces la opción remota, como GitHub, donde lo llamamos servidor remoto. Entonces podría ser GitHub o Bitbucket, podría ser Azure DevOps. Podría ser una máquina en tu oficina que se haya instalado en ella y esté sirviendo al equipo. Sea lo que sea. Eso es lo que llamaremos un servidor remoto. Entonces ese es el repositorio central donde usted y muchos otros pueden empujar su código simultáneamente y almacenar. Así tendrás tus propias copias locales así como una copia centralizada para el acceso de todos. Ahora, antes de que realmente vayamos y empujemos al repositorio central, quiero explicar algo sobre los archivos y qué archivos realmente queremos rastrear y no mientras recorre el proyecto, yo habría señalado que hay ciertos archivos que son más autogenerados en base a nuestras actividades. Y eso significa que no necesariamente necesitamos mantenerlos en control de fuentes. O el control de fuentes es el camión, los incendios que en realidad curamos los cambios. Lo único que se va a generar después del hecho, no necesariamente necesitamos realizar un seguimiento en el control de fuentes. Entonces todo eso para decir que hay ciertos directorios como OBJ y ha sido que lo rápido que me generan sobre la marcha. Derecha. Entonces OB-GYN ha sido tener el debulk o los archivos de liberación y otros activos que se están compilando. Que quiere hacer un dotnet build nuestro dotnet run o el dotnet watch, van a ser generados por lo que no necesariamente necesitamos aquellos en control de fuente. Entonces lo que pasa es que Git Hub tiene el concepto de un archivo gitignore o obtiene en general tiene un concepto de un archivo gitignore donde podemos generar este archivo que podemos especificar directorios que no queremos. Y dado que tal vez no necesariamente seamos expertos en todos los directorios que se nos permiten o podemos darnos el lujo de ignorar. Hay buenas para ignorar las plantillas a las que podemos acceder. Nuestra CLI de dotnet nos permite en realidad solo genera dotnet new git ignore. Y entonces eso seguirá adelante y genera ese archivo gitignore basado en las plantillas de Visual Studio. ¿Bien? Esta plantilla de Visual Studio sabe que cualquier proyecto que esté basado en Visual Studio slash dotnet basado, no necesitamos este tipo de carpetas incluidas. Consulta aquí el lanzamiento masivo, verás que ha sido un OBJ. Y esto significa lo que S mayúscula o común, o una vez que tenga esas tres letras de lo que somos para ignorarlo. Eso es lo que representaba visual. Eso es lo que este archivo gitignore le estará diciendo get cuando esté enviando para obtener ignorar estos archivos y los archivos en estos directorios. Bien, así que esta es una manera muy agradable de mantener sus registros o sus comentarios bastante precisos y concisos. Y puedes ver aquí que puedes obtener la última plantilla desde esta ubicación en GitHub. Bien, entonces ahora si volvemos al controlador fuente, decimos publicado en GitHub. En este punto es posible que se te pida que te autentiques con GitHub, así que solo proporcionas tus credenciales y todo. Ahora podemos decir si queríamos publicar un repositorio privado o en un repositorio público. Privado significa que tú y todas las personas a las que des acceso podrán acceder a él. Entonces no voy a poder ir a tu perfil y verlo. Y luego público significa que cualquiera que tropiece con tu perfil puede verlo. Ahora bien, por lo menos este ejercicio fomentaría que se haga público porque facilita compartir. Hace que sea más fácil mostrarle al mundo lo que has hecho y en qué estás trabajando. Y la gente podría incluso mirar y hacer revisiones de código y ayudarte en el camino, ¿verdad? Entonces voy a hacer público. Entonces una vez que hagamos clic en público va a publicar eso. Para levantarnos, va a poner en un mensaje de commit automático. Entonces, cuando decimos abrir al conseguir, en realidad lanzará GitHub y te mostrará todos los archivos de tu proyecto que han sido comprometidos. Y fíjate que no ha habido un OBJ y cualquier otra carpeta que pueda haber sido auto-generada lead que será. Excluidos, derecho, por lo que esos habrían sido ignorados por R, ignorar archivo. También obtuvimos un primer mensaje automático de compromiso. Y lo que pasa es que cuando lo hacemos, cuando hacemos nuestros cambios y después queremos enviar los cambios al motor de control de origen. Queremos incluir algún resumen de lo que hemos hecho. Así que permítanme hacer un pequeño cambio aquí en nuestro archivo de vistas. Fui a bajar a compartir el layout y el DateTime aquí. Entonces el año aquí es estático. ¿Y si quisiera que eso fuera dinámico? Porque si cambia al año siguiente, no quiero tener que venir y actualizar este archivo manualmente. Entonces puedo cambiar esto para ver la hora. Pensamientos. Sin oreja. Ventaja de poder escribir o C-Sharp aquí. Entonces solo digo que me des la fecha y hora a partir de este momento y cuál es el año. Y entonces esto será dinámico. Entonces, sea cual sea el momento y lo hicimos, nuestra siempre cambiará en consecuencia. ¿Bien? Para que puedas hacer correr dotnet y solo validar que sigues viendo el mismo año. Por supuesto, y sigue funcionando. Pero entonces claro, cuando esto aumenta, cuando aumenta el año, no tienes que preocuparte por cambiar esa no dualidad. Eso es sólo ese pequeño cambio. Puedes tomar nota de las señales visuales que verás apareciendo como esos pequeños puntos y m. Entonces eso significa que este es ahora un archivo modificador. Entonces la última vez que obtiene todo este archivo, se veía así. Entonces, hazte decir que esto ya está modificado, lo que significa que cuando vaya a mi pestaña de control de código fuente, me va a decir que tengo un cambio pendiente porque he modificado al menos un archivo. Ahora puedo ver cambiado. Digamos cambiar pie de página, año para ser dinámico. Ese es mi mensaje de compromiso. Ahora puedo confirmar, lo que guardaría los cambios localmente en mi copia local del repositorio de GitHub. También puedo hacer commit y push y commit y sink. Así que commit y push significa que me comprometo localmente y empujaré mis cambios al repositorio remoto, que en este caso es GitHub commit. Y sync dice que me comprometeré localmente, empujaré mis cambios a GitHub e intentaré obtener cualquier cambio que pudiera haber estado en GitHub. Y eso es perfecto para nuestro equipo sentado, justo cuando tienes varias personas contribuyendo al repositorio remoto, quieres tener siempre los últimos cambios. También puedes antes de comprometerte y empujar nuestro compromiso viendo tirado en el litro. Así que en realidad puedes usar estos tres puntos. Puedo decir Paul. Y se verá y verá, bien, ¿qué son? Archivos que han cambiado en el repositorio remoto que son diferentes a los tuyos? Déjame tirar de esos cambios. A veces terminarás con conflictos si dos de ustedes podrían haber modificado el mismo archivo, ¿verdad? Entonces podrías terminar con un conflicto. Ojalá no termines con eso. Pero esencialmente siempre se quiere tener la última versión tanto como sea posible. Entonces quieres hacer albercas irregulares mientras trabajas. Pero entonces empujo va a enviar tus cambios hacia arriba. Bien, así que siempre quieres tirar, tal vez sobresaltó cualquier caída antes de empujar, porque eso ayudará al equipo. No obstante, donde los desarrolladores solares para este curso, solo te estoy dando un sí muerto, pero lo que podemos hacer es esto comprometernos y empujar, ya que estamos trabajando solos. Entonces vendrá localmente, y luego sincronizará los cambios con GitHub. Y luego cuando vuelvo a Git Hub solo para mirar el repositorio y actualizo. Entonces vas a ver aquí que hay un nuevo mensaje de compromiso que llegó hace unos segundos. Y puedes desglosar y ver qué cambió. Cambiamos esa línea a esta línea. Bien, así que ese es el poder de los sistemas de gestión de control de fuentes mientras construye sus proyectos. Así que estaremos haciendo registros regulares como este y asegurándonos de hacer un seguimiento de todos los cambios que hagamos a medida que avanzamos. 14. Comprensión del archivo de diseño y bootstrap: Bien chicos, entonces en esta lección, quiero que dediquemos un poco más de tiempo a ver este pequeño tipo de mirarlo antes. Y solo quería señalar algunas de las partes clave que puedes modificar. Modifique de forma segura si desea personalizar toda su aplicación a sus necesidades. Entonces comencemos desde la línea número uno. Entonces tenemos el archivo de carga. Y una vez más, este es nuestro archivo de plantilla HTML para todo nuestro sitio web. Entonces las diferentes páginas no necesitan comenzar con todas las etiquetas HTML como lo haríamos en un sitio web estático. Se trata de un archivo dinámico que se encargará de todo eso por cada nueva pieza que queramos. Ya viene equipado con todas las etiquetas Meta HTML5. Y también incluye Bootstrap. Así que fuera de la caja obtendremos Bootstrap con nuestra aplicación MVC. Ahora, bootstrap es una biblioteca de interfaz de usuario muy poderosa. Si es la primera vez que lo escuchas, está bien. Así que realmente puedes familiarizarte con él yendo a conseguir bootstrap.com. Esa es su página oficial. Y verás aquí que la última versión es 5.2, que es la versión que salió de la caja con nuestro paquete, con nuestro proyecto, más bien, te guiará a través de cómo lo instalarías. Pero no tenemos que hacer todo eso porque ya está incluido con nuestro proyecto. La documentación, sin embargo, es excelente. Entonces, si hay algo que necesites entender en cuanto a cómo funciona, puedes ir a getbootstrap.com y puedes desplazarte. Entonces veamos cómo podemos personalizar algo como tal vez la barra de navegación. Podrías simplemente hacer una búsqueda aquí. Y se puede ver nav, nav bar. Eso es bastante justo bar. Entonces te dejarán navegar hasta cómo funciona. Entonces aquí en los componentes que tienes navbar, hablan de cómo funciona. Te dicen el contenido soportado y este es el diseño de código general si lo quieres suficiente barra luciendo así. Entonces eso significa que todos fueron suficientes el código de barras comienza aquí, y está entre estas etiquetas de navegación abiertas en Android. Así que por cada artículo que queramos, podemos poner ahí. Entonces si quisiéramos la palabra navbar, esa es nuestra marca navbar si se justifica una imagen ahí en cambio podríamos poner la imagen, bueno, ¿adivina qué? También tenemos esa sección. Perdón por eso. También tenemos esa sección. Aquí tenemos esa etiqueta ancla, marca navbar. Entonces verás que Bootstrap es realmente solo un montón de clases que me han construido para que nos ayuden a hacer las cosas más rápido porque hay cosas que siempre queremos hacer. Siempre que tenemos una aplicación web, hay colores, siempre queremos sus ciertos estilos. Siempre queremos a los chicos Bootstrap donde los chicos que desarrollaron bootstrap, después de años de hacer lo mismo una y otra vez. Hicieron un archivo CSS glorificado. Bien, un enorme archivo CSS, que es este archivo CSS que hemos incluido en nuestro dub, dub, dub roots lib, Bootstrap, CSS. Y entonces verás que no hay búferes ahí, pero en el que quieres enfocarte sería el main.css o el CSS punto. ¿Bien? Dot Min es solo una versión minificada de ese CSS. Pero el punto es que este es solo un archivo CSS grande. Mira eso, todo ese archivo CSS, un código CSS y Styling, correcto, solo para que no tengamos que hacerlo una y otra vez. Podemos usar su hoja de estilo y aprovechar su experiencia y su arduo trabajo. Bien, así que este es todo el fin de semana personalizar lo suficiente. Si quisiéramos agregar una imagen que esto muestra, bien, si quisieras una imagen, podrías hacerlo en su lugar y agregar tu logo. No creo que vayamos a ir con ningún logo, pero estoy buscando ver como los esquemas de color. Bien, aquí vamos, para que puedas cambiar el color. Entonces tenemos tres opciones. Tenemos azul oscuro y tenemos luz. ¿Bien? Aquí esto muestra las clases que podemos usar para cada una. Entonces en la etiqueta nav, si vuelvo a saltar a mi layout, archivo CSS HTML, mi etiqueta nav, en cuanto lo veo, actualmente usando luz de guión de barra de navegación. Bien, así que si quisiera el tema oscuro o eso tendría que ver, es navbar guión oscuro. Oh, bueno esto es bg primario, así que eso me va a dar el azul. Entonces, si quisiera oscuro, usaría éste. Entonces si voy por aquí y ella sabía solo desde navbar guión claro y bg blanco hasta navbar guión oscuro y Biji oscuro. Y entonces si le echo un vistazo a eso, lanzó mi terminal Control Shift y apóstrofe y luego dotnet. Yo sólo diré dotnet watch. Ahora mira ese navbar oscuro bien, ¿adivina qué? No, mis textos no se pueden ver. Derecha. Porque el hogar debería estar aquí y la privacidad debería estar aquí. Pero eso es negro sobre negro, así lo puedes ver. Bien, así que veamos qué recomendaría bootstrap. Entonces ellos recomendarían, bueno, no me están diciendo cómo poner el texto en blanco aquí mismo, ¿verdad? Pero entonces puedo buscar diferentes colores para el texto. ¿Bien? Solo estoy desplazándome porque estoy viendo, estoy tratando de ver si tienen algún ejemplo aquí, que es el indicado. Eso está bien. Pero si quería modificar el aspecto de mi texto, tienen una sección llamada topografía. Ahí vamos, tipografía rojos bajo contenido. Y luego aquí nos dicen los diferentes estilos que podemos usar. Así que con solo tener bootstrap tu etiqueta H1, tus HDL se verán así automáticamente. Puede conocerlos como pantallas usando la pantalla de clase uno a seis. Eso es genial, pero estoy más después de diferentes colores. Y lo siento, eso no está en la topografía, eso no debería estar en los colores. Así que saltemos para personalizar y ver el color ¿verdad? Aquí están los diferentes colores. Ahora, lo genial de Bootstrap es que es muy consistente. Entonces si haces primaria, ya sabes, vas a conseguir esa tonalidad de azul, secundarias, esa tonalidad de gris, seda dice Peligro, etc. etc. etc. así que la luz nos dará un poco gris, color ligeramente blanco en general. Y verás que tienes toda una paleta de colores. Si quieres los tonos intermedios, puedes obtener todos esos colores sin necesidad de saber el real, soy dolores de cabeza o la combinación RGB. Eso es lo que lo hace tan conveniente. Bien, ahora, si quisiera mis textos tuvieran ese color en particular, puedo en mi código pasar a los elementos de navegación que ves aquí de una clase o en el nav, nav item, y luego en el ítem nav de la etiqueta de anclaje que realmente representa el enrutamiento, ¿verdad? Voy a explicar qué significa esto, B, control y acción más adelante. No quiero centrarme en eso ahora mismo, pero quiero cambiar el color de mi texto. Entonces voy a cambiar esta etiqueta de anclaje que tiene el enlace de navegación de clase de ser guion de texto datos oscuros, siendo guion de texto luz. Bien. Ahora que he cambiado ese archivo y ha sido recargado en caliente, déjame saltar de nuevo. Y boom. No, es texto, luz de tablero. Mira que es tan fácil cambiar el color una vez que me siento cómodo con las diferentes clases y los diferentes colores que están disponibles para mí en Bootstrap, es fácil para mí solo hacer la transición entre estilos cuando necesito. 15. Modificación de la página principal: Bien, entonces lo que vamos a hacer es modificar nuestra página de inicio. Así que saltando de nuevo a nuestro documento bootstrap, puedo saltar por encima de dos ejemplos. Voy a abrir eso en una nueva pestaña. Y luego a partir de ejemplos ves aquí que tienen diferentes tipos de muestras de secciones que puedes agregar a tu sitio web. Entonces, ¿cómo quieres que tu foto a la calidad que quieres que se vea? Diferente. Hero Laos, características, uñas, etc. incluso tienen páginas completas que podrías usar y puedo aplicar esta. Entonces tiene controles incorporados como un carrusel, ¿verdad? Podrías usar esta plantilla de inicio de sesión para tu sitio web. Podrías usar todas estas cosas, ¿verdad? Es sólo cuestión de saber dónde poner el código. Entonces estos son diferentes filtros que puedes aprovechar. Estos son encabezados diferentes. Podrías usar. Héroes, secciones de héroes, ¿verdad? Basado en el tipo de sitio web que estás construyendo. Aunque voy a usar esta plantilla de carrusel. Creo que esto sería un buen diseño de página de inicio para nuestro sistema de gestión escolar. O simplemente podemos enchufar algunas imágenes y poner algunos textos adicionales si es necesario. Para obtener la fuente que necesito de esta página. Lo que voy a hacer es hacer clic derecho e ir a Ver fuente de página. Y creo que ver la fuente de la página debería ser una opción que cada navegador, cada navegador moderno tiene, ¿verdad? Entonces a partir de aquí, estoy viendo la página HTML completa, que sabemos que no necesitamos de todo porque sólo estamos modificando nuestra página de inicio, así que no necesito de todo. No necesito las, ya sabes, esas etiquetas. Solo necesito esta sección que se necesita para la vista, ¿no? Podemos tomar el estilo porque creo que estos estilos son únicos para el PID. Entonces, tomemos prestados estos estilos, ¿verdad? Aunque no los voy a poner en una etiqueta de estilo. En cambio, lo que voy a hacer es colocarlos dentro de nuestro archivo CSS para nuestro sitio. Bien, entonces estos estilos pueden entrar ahí. Y lo que pasa es que si quieres extender bootstrap, como lo que estaría pasando aquí. Si quisieras extender Bootstrap, no estarías modificando el archivo bootstrap. Simplemente escribirías estilos que anulen el existente. Bien, así sucesivamente toma la luz Dash. Si quisieras que fuera de un color diferente, puedes poner en tu propia clase, en tu propio archivo CSS y ver que punto toma Dash light. Y luego poner el tuyo tal vez tome color o lo que sea que quisieras cambiar. Y luego sobrescribirá ese archivo, esa clase en el archivo Bootstrap original. Bien, así que solo estoy usando esos estilos porque podríamos necesitarlos, claro. Y luego me voy desplazando hacia abajo para ver dónde empieza el contenido. Entonces el contenido, o, y en realidad también hay estilos personalizados para esta plantilla. Déjame ver esto y voy a tomar prestadas estas también. ¿Bien? Porque fui a necesitar estos para la página se pareciera a la demo. Así que sólo voy a pedir prestado eso. Puedes tener múltiples archivos CSS, claro, pero yo solo voy a poner este archivo CSS del sitio, con todos esos estilos personalizados. ¿Bien? Yo también te animo a que leas los diferentes estilos porque aquí verás que se trata de un estilo de carrocería. Y ese estilo de carrocería podría extender nuestra anulación de nuestro estilo de carrocería existente. Entonces podría ser que los fusiones. También podrías simplemente dejarlo solo aquí mismo, verás que está agregando una parte inferior acolchada y una parte superior acolchada. Entonces nuestro original que está sumando un margen inferior, pero veremos cómo juegan juntos y luego haremos ajustes en consecuencia. ¿Bien? Entonces tenemos eso, tenemos el CSS para nuestro Uno de los pH. Bien, así que estamos llegando despacio pero seguramente. A continuación, quiero tomar esta sección que tiene el contenido que necesito. Entonces voy a empezar desde el carrusel porque recuerden que ya tenemos una sección media en nuestro layout. Entonces es importante notar estas cosas, ¿verdad? Tengo el div, que es el contenedor, y luego tengo este principal. Y luego quiero renderizar body y render body me van a mostrar las vistas. Entonces lo que quiero hacer es reemplazar el contenido en la vista por el contenido que necesito, ¿verdad? Entonces, ¿el contenido que necesito para la vista en realidad comenzaría después de esa etiqueta media e iría tan lejos como eso significa Todd? Bueno, aquí está la etiqueta principal, pero eso va después del pie de página. No necesito un pie de página. Ya. Tener un pie de página. Derecha. Así que tendría que llegar hasta aquí. Así que déjame tomar ese Copiar y Pegar y lo estoy pegando dentro de mi archivo HTML de punto índice. Bien, déjame alejarme un poco para que podamos ver es un ángulo un poco amargo, ¿verdad? Entonces aquí está nuestro carrusel. Y si quieres documentación sobre el carrusel, una vez más, siempre puedes ir al sitio web de Bootstrap para obtener la documentación. Se encuentra bajo componentes. Y en cuanto mis ojos se ajustan y una vez más, si no quieres pasar por todo eso, siempre puedes buscar carrusel lo que funcione. Estaba justo ahí. Entonces cómo funciona y luego verás aquí que estas son muestras de donde puedes conseguir un carrusel. ¿Bien? Si quieres un carrusel con botones Bach y botones de avance, bueno, aquí tienes el código que te mostrará lo necesitas reemplazar usando elipsis, ¿verdad? Y esto es uno a uno y eso también es importante. Si quieres más, solo agregas más diapositivas, agrega más secciones como esta para cada elemento o imagen del carrusel que quieras. Entonces ves que es muy, muy flexible. Entonces el ejemplo que copié tipo de usa ese ejemplo exacto donde tengo, este en realidad tiene botones. Este tiene texto de marcador de posición para que pueda agregar subtítulos. Aquí están mis subtítulos. Y luego cada ítem, tengo la capacidad de cambiar la imagen. Eso es querido, señor, sé que solo está usando algunos SVG de incidentes del lunes, que eventualmente podemos cambiar. Entonces tenemos los botones de navegación. También tenemos algunas secciones donde tienen bien, clase div y lo llaman clase de marketing. Aquí está el marketing, que estoy seguro es una de las clases que habíamos tomado prestadas. Ahí vamos. Mercadotecnia de contenidos. Aquí está la clase de marketing. Entonces, si necesitábamos ajustarlo, personalizarlo a nuestras necesidades, podríamos modificar todo eso si quisiéramos. Hay muchos marcadores de posición e imágenes para que podamos rellenarlos, por supuesto, luego tienes el divisor de características y podemos agregar lo que sea necesario que quieras. Entonces ahora que hemos hecho ese ajuste y sigo haciendo un reloj dotnet si acaso habías detenido el reloj dotnet desde la última lección, podrías comenzar un reloj dotnet. Pero cuando saltamos para previsualizar nuestra página, eso es lo que obtenemos. ¿Bien? Ahora, unos ajustes por supuesto, van a ser necesarios porque aquí vemos que tenemos un relleno en la parte superior que no queremos. No queremos ese relleno por encima de nuestra barra de navegación. Así que voy a saltar de nuevo y voy a modificar el CSS. Entonces por eso dije que hay que prestar atención al CSS y saber lo que estamos agregando y modificando. Entonces me voy a llevar todo ese top acolchado. Y una vez que lo veo, eso es todo lo que sé. Se ve normal, ¿bien? Y entonces todo lo demás me queda bien, ¿verdad? Así podemos tener un subtítulo alineado al centro. Podemos sobrescribir subtitulaciones alineadas. Podemos tener un subtítulo alineado a la izquierda. Y claro, estas son imágenes que podemos cambiar. Todos. Se trata de cuerpos de textos que podemos cambiar viejos. Y podemos poner en nuestro contenido ya que necesitamos colocar donde suelo obtener algunas imágenes es pixabay.com. Es una excelente fuente para algunas imágenes bonitas una vez que no las usamos comercialmente o le damos créditos al artista o a quien sea el crédito de la imagen. Así puedo tomar algunas de estas imágenes. Y lo que voy a hacer es no descargarlos. Yo sólo voy a resolver estos. No los descargaré, pero sí tenemos la opción de descargar uno y mostrarte cómo ponemos una imagen en nuestro proyecto. Pero solo voy a incrustar los otros dos directamente desde el sitio web para que pueda hacer descarga gratuita y voy a descargar esa imagen tinny TPR 12 80. También puedes reducirlo. Entonces vamos con un 12 80 por 853 para éste. Pizarra, no, no soy un robot. A través de los polluelos, claro. A continuación, descargue el archivo. Todos. Ahora lo que me gusta hacer es arrastrar el archivo desde el navegador y al código de Visual Studio y nada que sea una característica muy, muy genial de aprovechar, ¿verdad? Así que una vez que se descarga ese archivo, puedo arrastrarlo y luego soltarlo dentro de Visual Studio Code. Y donde quiero es dentro de la carpeta raíz real dub dub. Y por extensión, lo querría en una carpeta de imágenes, así que simplemente la arrastré. Es saber dub, dub, dub roots. Bien. obstante, no lo quiero ahí sentado, todo está organizado. Quiero mantenerme organizado. Entonces voy a hacer clic derecho dub, dub, dub root crea una nueva carpeta, lo llamaré imágenes. Y entonces puedo arrastrar esa imagen ahí dentro. Entonces cambiaría el nombre de la imagen. Entonces en mi curso web, siempre seguro de que es la mejor práctica renombrar la imagen de la manera más conveniente posible. Entonces Blackboard. Bien, ese es el nombre de la imagen que vi en mi opinión. Puedo saber modificar. Déjame alejarme un poco para que pueda navegar un poco más rápido. Ahora puedo modificar la imagen que se está utilizando en uno de mis artículos de carrusel listó el primer auto así que artículo está usando este SVG. No quiero ese SVG. Entonces voy a hacer una combinación de mirar cómo debería ser. Entonces, así es como debería verse la imagen del elemento del carrusel en el código. ¿Bien? Una vez más, solo está usando un montón de marcadores de posición en los ejemplos, comprensiblemente, pero voy a usar eso y reemplazar este SVG. Y luego para la imagen SRC, voy a poner tilde ahí. Así que hasta el, ese es el símbolo español. Y solo, solo Infórmate de dónde estoy obteniendo esta información. Si vuelvo a saltar a mi diseño, verás aquí, esto es todo lo que hacemos referencia a un archivo que está en la carpeta lib en el dub, dub, dub roots, derecho, así que vive jQuery, jQuery min, aquí está, aquí está jQuery, aquí está esto, aquí está el archivo. Bien. Entonces si quería una imagen de la carpeta images y el mismo dub, dub, dub root, voy a tener que decir es tilde slash. Y luego vamos en el, en el camino, así que las imágenes de corte, barra. Y luego voy a decir pizarra negra, puntos, GP. ¿Bien? Y luego lo convertiré en la alternativa, solo ve una imagen de pizarra. Bien. Ahora, cuando vuelva a mi punto de vista, déjeme refrescarme. Bien, ahí está nuestra página de inicio. Sabes que tenemos esa pizarra ¿verdad? Una vez si quería cambiar el titular sé, así que para el titular del texto aquí, título de ejemplo, sistema de Escuela de Administración. Bien, textos tan representativos. Entonces verás, solo estoy tomando código existente, lo estoy modificando a Hawaii, necesito que lo haga. Y a veces así es como empezamos hasta que nos volvemos cada vez más creativos y cada vez más cómodos. El mejor sistema de gestión escolar basado en ESP, dotnet, MVC, Alright, b.net, Core six, eso es siete. Porque lo que estamos haciendo es reutilizable, Bien, Tan pronto como llegue mi derramamiento sobre la gerencia, bien, ahí vamos. Entonces no hay sistema de gestión escolar, sistema manejo de vesículas inscríbase hoy. Esto no hace nada pero creo que es agradable ponerlo ahí en caso de que estés construyendo tu producto. Entonces esa es nuestra primera diapositiva. Así que en realidad puedes hacer los mismos pasos con las otras imágenes si quieres. Cuando dije que no los iba a descargar, lo que pretendía hacer cuando dije que se copiaba el enlace de la imagen. Entonces, una vez que copio el enlace de la imagen, es un enlace directo a la imagen alojada, así que no tengo que copiarla. Es una CDN, así que en realidad podría simplemente incrustarla sin descargarla. Entonces, si voy al siguiente elemento del carrusel y reemplazo esa etiqueta SVG con esa etiqueta de imagen. Y luego para el SRC, voy a usar este enlace CDN. ¿Bien? Y eso es lo que coloqué ahí. ¿Bien? Y entonces esta va a ser imagen de geometría. Entonces cuando regrese y mire, bien, aquí está nuestro Blackboard y luego aquí está nuestra imagen de geometría. Y éste es un poco ruidoso. Entonces es posible que desee medir cómo juega con el con la leyenda, ¿verdad? Y luego los niños en la India? Sí, copiar enlace de imagen. Y queremos alguna representación de los niños que van a estar en esta escuela, ¿verdad? Entonces esa es la modificación final que estoy haciendo y solo la estoy masacrando un poco hasta que me ponga rumbo. Derecha. Entonces ahí vamos. Y solo deja que eso hayamos modificado nuestra página de inicio para que se vea algo así como lo que queremos. Bien. También solo voy a quitar la sección de subtítulos de la imagen de geometría. No creo que necesitemos esa leyenda. Toma eso menos. Entonces voy a quitar las dos etiquetas P son las solo las etiquetas H1 y p. Y dejaré el botón que dice Más información, ¿verdad? Y para los niños, uno, estudiantes inteligentes. ¿Bien? Y de todo el mundo. Todo bien. Sólo estoy mostrando, sé que podemos navegar por la galería. Bonito. Entonces creo que esto es en realidad como la página de plantilla de inicio perfecta para este tipo de sistema. Bien. Necesito ser un estudiante inteligente con esa ortografía. Pido disculpas en el canto principal. Ahí vamos. Bien, entonces me voy, te dejo para que sigas adelante y personalices el resto de estas secciones, ¿verdad? Y realmente se trata solo de mirar y prestar atención al código. Bien, así que si solo te desplazas y lo miras, Aquí está la sección de marketing. Aquí están los marcadores de posición, SVG. Los puedes reemplazar por tus propias imágenes que quieras en esas, en esos pequeños círculos. Aquí está el encabezado, Aquí está el texto debajo del encabezado, y ahí está el botón Ver detalles, ¿verdad? Así que en base al tipo de producto que estés construyendo, puedes modificar esas secciones serían más representativas de lo que necesitas. También podrías simplemente eliminar esa sección. Podría ser que no quieras esa sección en el sitio web. Sé que ya sabemos cómo agregar nuestras imágenes. Entonces para esos marcadores de posición de 500 por 500 aquí, las etiquetas SVG una vez más que podemos reemplazar. Bien, así que adelante y explora y diviértete con eso. 16. Incorporación de una página sobre nosotros: Bien chicos, entonces en esta lección vamos a echar un vistazo a cómo podemos crear nuestra propia página. Entonces ahora mismo tenemos casa donde tengo privacidad o ¿y si quisiéramos una página Acerca de Nosotros? ¿Cómo vamos a añadir eso? Así que volvamos a pasar a Visual Studio Code. Y voy a empezar con un controlador. Tenemos el controlador doméstico y sabemos que el controlador doméstico nos permite navegar, indexar y a la privacidad. Y tenemos el tercer botón de opción. Todos necesitamos los nuestros, no construidos en uno, ¿verdad? Entonces voy a crear en primer lugar resultados de acción pública solo siguiendo las plantillas de las anteriores. Y entonces voy a llamarlo barco. Entonces eso significa que quiero una página llamada barco. Bien, entonces el oxígeno necesita ver un bote. Y entonces cada método de resultados de acción necesita volver a la vista. mí me gustaría simplemente hacer esto. Este es el esqueleto que hago primero. Antes de empezar a escribir la magia. Garden dijo que se trata de un pozo sencillo, así que no habrá magia en este en particular. Pero ahora tenemos la vista, perdón, de ninguna manera tengo la subasta en el controlador. Saber. Si intento navegar por ahí. Bien, y veo slash, home slash o barcos, entonces vas a obtener este tipo de error, al menos mientras estás probando. Entonces va a decir que es una excepción de operación inválida. No se encontró la morada de vista y estas fueron localizaciones buscadas. Se veía a la vista slash home para un archivo llamado un barco, hace CSS HTML. También se ha mirado a la vista slash, compartido slash sobre eso. Cse es OGM. Entonces, en esencia, es por eso que el error no necesariamente tiene que estar en la carpeta home. Se puede compartir porque ahí se puede encontrar un error. Entonces cada vez que decimos vista de retorno, automáticamente va a estar buscando en esas ubicaciones la vista que estamos regresando para un archivo con el nombre de la vista que dijimos que vamos a devolver. Entonces como no lo puede encontrar, se volvió loco. Así que háganoslo saber, volver atrás y crear ese archivo. Así que sólo voy a hacer clic derecho en casa, ¿verdad? Yo nada estos nodos que estas carpetas suelen tener una zanahoria y los archivos amanecen. Bien, así que eso puede resultar confuso, especialmente cuando estás arrastrando y soltando como cuando arrastramos y soltamos la pizarra. Pero sí empieza a destacar los diferentes bloques y secciones de archivos. Y verás esas líneas en el camino. Así que ten cuidado con esas cosas. Entonces voy a hacer clic derecho y voy a decir nuevo archivo, y voy a poner en el nombre de barco punto CSS HTML. Presiona Enter, y ahora tengo mi archivo de vista. Ahora es un archivo vacío, pero digamos que quería seguir el ejemplo de, bien, ¿Cuáles son las primeras cosas que necesito en el archivo? Puedo mirar las plantillas de los archivos que le precedieron. Aquí mismo veo que hay una sección de datos de vista para el título, así que puedo agregar eso en la parte superior. Derecha. Esto me permite establecer el título de la página que debería aparecer en la vista. Porque recuerda en la maquetación, este es el título, ¿verdad? Entonces va a ver lo que sea que haya en los datos de vista en su momento. Dash aunque nombre del sitio web, ese es un título en el que se mete la página, Señor. Entonces puedo especificar que esta es la página Acerca de Nosotros. Bien, entonces todo lo que tengo que hacer es colocar el HTML. Quiero para esta vista, poco probable que hayamos visto que no necesitamos todas las plantillas HTML y todo, solo necesitamos las cosas específicas. Así que voy a saltar de nuevo a nuestros ejemplos para sitios web de Bootstrap. Y sólo voy a elegir un ejemplo muy sencillo. Voy a usar esta portada, ¿verdad? Entonces, si salto a esta plantilla de cava, realmente solo quiero este texto. Yo sólo quiero el texto que está ahí. Sólo voy a decir View Page Source. No voy a meterme en todo tomando todos los estilos y así sucesivamente. Realmente solo me interesa lo que hay en esta sección principal. Bien, así que toma y yo lo pegaré aquí. Bien. Entonces puedo cambiar el texto para que seamos capaces. Mantener empresa de desarrollo de Pebble. ¿Bien? Y podrías ponerte en cualquier perorata de un párrafo que quisieras ver como tanto la empresa como luego puedes ver contactanos, contacta para mas info. Bien. No me estoy centrando necesariamente en toda la fantasía les toma HTML que podemos poner en. Sólo te estoy enseñando cómo podemos reconstruir. Un sitio web de aspecto decente para la aplicación MVC. Entonces, si nos refrescamos ahí, vemos bien nuestro texto. Ahora. ¿Cómo llego aquí? Correcto, ¿aparte de escribir barra diagonal casera o ambas? ¿Cómo llego a esta página? Porque lo escribí manualmente, pero no podemos esperar que nuestros usuarios sepan que necesitamos escribir botón, necesitamos darles una manera de que se dupliquen. Entonces es de la misma manera que pueden llegar casa y a la privacidad. Bien, entonces lo que hacemos es modificar la sección de navegación. Así que volvamos a saltar a nuestro layout.css, HTML. Y aquí están, son suficientes artículos, así que tenemos artículo para el hogar, voy a tener suficiente artículo para la privacidad. Entonces necesito otro elemento de navegación y estoy dispuesto a poner su privacidad hormonal intermedia. Bien. Éste, todo lo que hice fue copiar y pegar. Por lo que acabo de destacar uno de los ítems de nav, Open , LI, anchor tag, close ally, copy, y luego paste. Bien, nada especial. Al hacer eso, estoy reteniendo que sí, toma consistencia de luces Dash, así que no lo estoy escribiendo desde cero al arriesgarme a error, solo copiando y pegando y reutilizando. No, no vi que vamos a pasar por lo que son estos atributos SP. Entonces estos no son atributos HTML regulares. Estos son ayudantes de etiquetas de navaja. ¿Bien? Entonces para la etiqueta de anclaje, tenemos un ayudante Eso nos permite especificar un área. Un área es una aplicación especial, literalmente sobre todo era y web. No tenemos nada de eso, al menos aún no. Así que no tienes que preocuparte por eso. ¿Bien? Pero sí tenemos un controlador. ¿Cuál es el controlador que te gustaría navegar? Entonces en HTML normal, tendrías que leer H ref es igual a y luego tratar de averiguar la barra, esta carpeta barra esa carpeta para llegar al archivo que deseas. Bien. En un entorno dinámico como este, dotnet Core nos ha facilitado la figura sin ningún tipo de navegación, ¿verdad? Porque sabe que está usando controladores y vistas. En realidad podemos especificar que queremos ir a este controlador. Podemos ver casa porque todavía estamos usando el controlador doméstico. ¿Qué acción quieres? Entonces, cuando vas a, cuando haces clic en inicio, la etiqueta de anclaje de inicio, debe ir al controlador de inicio y a la acción de indexación. Al hacer clic en la etiqueta de anclaje de privacidad, debe ir al controlador de inicio y a la acción de privacidad. Recuerda que la acción es el método que aquí se define y que debe devolver la vista. Entonces si quiero ir a la página Acerca de eso necesito ir a su controlador de casa y al acerca de la acción. Entonces puedo modificar eso en código y voy a usar este. Entonces la acción que voy a hacer es un rayo y el texto que espero ver en el isquión es un software de perno haciendo esas modificaciones. Cuando recargo el sitio web, cuanto me sale un error de 500. Oh, me doy cuenta que a veces cuando modificas y está reconstruyendo y te cambias a la ventana, en realidad va a ser una especie de Frisco hasta el día no puedes cambiar mientras yo estoy reconstruyendo. Deja que se reconstruya un poco antes de cambiar. Bien, solo dije que sí, reinicie y sepa que se reinicia. Puedo volver atrás y recargar el sitio web. Ahí vamos. Sé que veo mi nueva URL, nuestro enlace de menú más bien, cuando haga clic en él, navegará hasta el controlador de inicio y la acción about, que devolverá nuestra página sobre nosotros. Bien, así de fácil es configurar realmente tus vistas y tu navegación entre tus vistas y las diferentes secciones de tu aplicación. 17. Añadir a GitHub: Bien chicos, así que hemos alcanzado otro hito y ahora tenemos una mejor comprensión de cómo nuestros puntos de vista y el diseño y todo se unen. Hemos agregado imágenes, modificamos nuestra vista de casa, agregamos nuevas vistas. No sabía acciones a nuestro controlador y terminamos con algunos archivos nuevos y algunos archivos modificados. Entonces ahora necesitamos registrarnos o comprometernos más bien con nuestro sistema de gestión de control de fuentes , lo cual es bueno. Entonces, solo a modo de señales visuales, cualquier cosa que sea verde tiene un UV establecido para significar que no está rastreado, lo que significa que es un archivo nuevo que no conoce. Entonces, cada vez que agregas un archivo, lo obtienes en un estado sin seguimiento y es verde. Y luego una vez que existió el archivo desde el último pollo y hayas hecho modificaciones, entonces será naranja o ámbar y se mostrará modificado, ¿verdad? Así podemos saltar a nuestra pestaña de control de código fuente donde nos están diciendo los diferentes cambios. Y a partir de aquí podemos especificar realmente si queremos que le guste ignorar, podríamos deshacer los cambios, podríamos agregar específicos. En primer lugar, gitignore. A veces queremos hacer eso si tenemos como archivos de configuración que no queremos un pollo, ¿verdad? Podríamos agregarlo al gitignore. Podríamos hacer como una etapa, como si quisieras cometer algún nulo, pero no todo. Podríamos decir. Escenario. Como dije, si, si hiciste cambios pero ya no los quieres, solo puedes decir descarte los cambios. E incluso podrías hacer una comparación. Entonces podrías decir cambios abiertos y en realidad te mostrará una comparación lado a lado de las aves acuáticas fue y lo que es no, ya que hiciste tus modificaciones. Entonces estas son herramientas que nos pueden ayudar a asegurarnos de que no estamos comprobando lo suyo y que definitivamente vamos por buen camino con los cambios que esperamos que hayamos hecho. Ahora, podemos ver vistas y maquetación de sitios web agregados o manipulados, ¿verdad? Entonces ese es nuestro mensaje de pollo. Así que cualquiera que venga y vea nuestros cambios puede conseguirnos una sinopsis de lo que pasó con este commit. Y solo haremos un commit y push. Bien, entonces ahora que tenemos esta sección fuera del camino, te veré en la siguiente lección. 18. Conéctate a la base de datos con Azure Data Studio: Bien chicos, En esta lección vamos a estar creando nuestra base de datos que usaremos como columna vertebral de nuestro Sistema de Escuela de Administración. Sepa, Comencemos abriendo nuestro Azure Data Studio. Y voy a usar la imagen docker para nuestro Microsoft SQL Server que instalamos de actividades anteriores. Ahí es donde estaremos creando nuestra base de datos. Para que puedas volver a visitarlo. Escuche solo para ver cómo se abriría más oscuro y lanzaría esa base de datos. Pero ya tengo más oscuro y solo voy a guiarte a través algunas cosas por si detuviste el contenedor a partir de ese momento. Y necesitas reencontrarte con agujero para llegar a poner en marcha y correr. Bien. Para que puedas seguir adelante y abrir tu escritorio Docker. Solo voy a usar el escritorio esta vez a diferencia de la CLI. Y por debajo la sección Contenedores podríamos ver todos los contenedores que tenemos actualmente. Entonces probablemente solo tengas uno. Eso está bien. Tengo varios. Bien, pero aquí está el que creamos antes, que es el contenedor de Microsoft SQL Server. ¿Correcto? Ahora, antes de hacer clic en ejecutar o iniciar, solo quería señalar que en caso de que te olvidaste alguna de las configuraciones que pones ahí, en realidad puedes volver atrás, verificar todas las configuraciones. Así que en realidad puedes mirar la inspección. Cuando haces doble clic en él, puedes ir a Inspeccionar. Y luego en entorno verás las variables de entorno que agregamos pasadas cuando nosotros, cuando lo configuramos. Así que realmente olvidé mi contraseña. ¿Correcto? Esa es la postura que había usado. Así que solo puedo copiar eso y tenerlo en cuenta porque lo voy a necesitar cuando me conecte. Y recuerda que cuál es el número de reporte le pones ese número de soporte que estás tratando de conectar a alguien para poner en marcha este contenedor. Y puedo ver la pantalla de registros solo para ver que está iniciando con éxito y que no hay errores en ningún lado. Eso es bueno. Ahora, una vez que está en estado de funcionamiento, y si vuelvo a saltar, mira aquí que es verde, entonces está funcionando y está transmitiendo en el puerto 1,400. No, puedo seguir adelante y conectarme a él usando Azure Data Studio. Entonces en Azure Data Studio, puedo dar click en esta nueva conexión. Puede que no tengas tantas conexiones como yo. Eso está bien. Pero a partir de aquí, sólo voy a ver cómo Nixon tipo servidor Microsoft SQL Server es host local. Y luego cuando estamos usando visuales, lo siento, cuando estamos usando SQL Server, usa una coma para el puerto, ¿verdad? Entonces localhost coma, luego 1,400. ¿Bien? El tipo de autenticación es el inicio de sesión SQL. usuario es SE, ya que configuramos por defecto o como sabemos por defecto. Y nuestra contraseña es la contraseña que usaste. Y luego una vez que haga todo eso y haga clic en Conectar, me avisará que necesita un certificado de confianza para que solo pueda habilitar el certificado de servidor de certificados de confianza. Y una vez que hago eso, no, estoy conectado. Entonces tengo localhost coma 1,400 conectado como SE. Y ahora puedo seguir adelante y manipular todos los activos en ese servidor. Lo bueno de esto, Your Data Studio es que incluso te permite categorizar tu conexión. Así que ya ves aquí puedo limpiar algunas de mis categorías. Puedo simplemente crea un nuevo grupo de servidores. Y voy a decir como Azure. Y entonces puedo arrastrar todos mis ojos, tus conexiones, a ese grupo. Bien, así que tengo menos ruido y puedo encontrar lo que quiero que sea más fácil. Puedo colapsarla. Y entonces puedo crear otro para local. ¿Bien? Y entonces puedo poner ahí a ese anfitrión local. Incluso podría especificar que uno es más oscuro versus este no es médico. Entonces estas son todas mis instancias locales. Como pueden ver, tengo varias instancias locales e inadvertidamente desconectado de las más oscuras. Así que sólo voy a poner de nuevo en el pasado Y ahora recordar analizador esta vez, así que no tengo que hacerlo cada vez. Y verás aquí que están viendo deberían hacer cifrar la conexión. Puedo decir verdadero o falso. Confíe en el certificado del servidor, esta clínica. Y estoy listo para ir de nuevo. Entonces así es como nos conectamos a nuestra base de datos usando el Azure Data Studio. Ahora, cuando volvamos, de hecho saltaremos a crear la base de datos. 19. Crear base de datos: Bien, así que saltemos a la creación de nuestra base de datos. Entonces voy a abrir una nueva consulta y esta nueva consulta va a estar en contra o conexión. Siempre podemos cambiar la conexión tomando eso y luego eligiendo la otra conexión que queramos. Pero eso está bien. Simplemente continuaremos como es ahora. Notarás que esta interfaz de usuario es muy similar a la interfaz de Visual Studio Codes. Bien, así que muchos atajos de teclado para trabajar podemos hacer control, un control cerrado menos. Podemos atracar las conexiones para decidir darnos más espacio. Entonces es una interfaz de usuario muy familiar y es muy limpia y fácil de usar. Ahora vamos a estar creando una base de datos llamada School Management DB. ¿Bien? Y esta base de datos está algo basada en la base de datos que se utilizó en mi curso SQL. Para que puedas comprobarlo. Si no estás muy familiarizado con SQL y SQL Server, entonces puedes consultar ese curso. No obstante, si ya tienes algún conocimiento de la base y te sentirás como en casa. Y voy a explicar a medida que vaya solo para que puedan hacer un seguimiento. Entonces la primera declaración que queremos escribir es crear base de datos. Y lo que esto hace es que nos permite especificar el nombre de una base de datos que desearíamos crear. Bien, así que vamos a querer crear una base de datos llamada School Management DB. Entonces tenemos que especificar una meta. Y luego tenemos que usar la base de datos que acabamos de crear ahora mismo. Y escribiendo un guión, podemos ejecutar cada línea. Entonces puedo resaltar esto y decir Run, y luego resaltar esto y decir run. Porque lo que está pasando es que cuando llegue aquí, esto no existe, ¿verdad? Entonces hasta que este sea Ron, esto no existe. Entonces veremos esa línea roja squiggly que representa un error. Pero eso está bien porque podemos simplemente escribir todo el documento y va a correr desde la línea uno, línea dos, la línea tres, luego todo lo demás. Así que no tenemos que preocuparnos esa línea roja, ¿verdad? No. Entonces vemos crear tabla. El primer día de eso voy a crear un estudiante, bien. Así que crea alumnos de mesa y ésta abrirá y cerrará paréntesis. Y luego ahí dentro vamos a especificar algunas columnas. Entonces voy a decir id INT. Siempre animo a que cuando estés creando una base de datos, siempre tengas una columna de ID de clave primaria generada en base de datos. ¿Bien? Entonces aquí estoy viendo id es integer, es una clave primaria y debería ser una columna de identidad. Identidad significa que se incrementará automáticamente a medida que avanza. Después otras cosas que tendrán los alumnos, nuestro nombre, apellido, fecha de nacimiento. Y en realidad sólo voy a enchufar estos. Bien, así que no te aburro con escribir. Puedes hacer una pausa y replicar esas columnas adicionales. Nombre, estamos usando n var char 50, y no está permitido que sea nulo, ¿verdad? Lo mismo con apellido, fecha de nacimiento. Veremos deet y vamos a permitir que sea nariz. No voy a especificar un no nulo. Entonces eso significa que si sé entra aquí, Eso está bien. ¿Bien? Entonces la siguiente mesa que vamos a tener son las conferencias. Para las conferencias, solo voy a hacer el mismo tipo de declaración excepto que solo estamos usando FirstName y LastName. Bien, así que en realidad podría haber copiado este espacio que cambió a los estudiantes a conferencias y quitarle el ritmo. Verás que son muy similares en estructura. Y entonces el final que queremos es uno-cuatro cursos. Entonces como dije, es un sistema de gestión escolar para una escuela pequeña. Solo quieren poder rastrear quiénes son los estudiantes. Quieren rastrear quiénes son las conferencias. Y luego quisieron rastrear qué cursos se están ofreciendo. ¿Cuál es el nombre del curso? ¿Cuál es el código del curso? Y esta nieve va a tener una restricción única. Entonces eso significa que no hay dos cursos que deban tener el mismo acorde. ¿Bien? Podría decirse que esto también podría ser único por nombre, pero las reglas comerciales impulsarán estas decisiones. Y luego el número de créditos que tendrá ese curso. Es un sistema de gestión escolar sencillo, muy, muy sencillo. Así que ahora hemos creado nuestro script de base de datos. Sé que realmente queremos crear la base de datos, porque si volvemos y miramos, las bases de datos están vacías. Entonces cuando hacemos clic en Ejecutar, como dije, va a recorrer todo el script y crear nuestra base de datos. Entonces obtenemos estas señales visuales que iniciaron la ejecución y luego todo se completó con éxito. Entonces, si actualizo las bases de datos, fui a ver mi gerencia de escuela EB, y luego puedo profundizar y ver las tablas que hay ahí. Bien, así que así de fácil es crear una base de datos usando scripts. Y lo genial de los scripts en caso no estés tan familiarizado con SQL y scripting funciona es que puedo guardar este archivo y reutilizarlo en una fecha posterior, ¿verdad? Entonces es solo un archivo de scripting. Es solo un archivo de texto que contiene instrucciones sobre como el agujero para construir una base de datos, puedo guardarlo en mi sistema de archivos local. Si necesito de nuevo esta base de datos, puedo o cambiar el nombre aquí o una vez más, pasa por todos esos escenarios en mi curso SQL. Ahora, tengo la base de datos creada. Mi siguiente objetivo es conectarlo realmente a mi aplicación. Entonces la base de datos y se está ejecutando en más oscuro igualado han estado fácilmente en otro servidor, ¿verdad? Eso realmente no importa en el gran esquema de las cosas. Sin embargo, lo que importa es que necesito mi aplicación para ver esta base de datos y poder interactuar con ella. Entonces veremos cómo podemos aprovechar una biblioteca llamada Entity Framework para lograrlo con nuestra aplicación web. 20. Base de datos de andamios con núcleo de marco de entidad: Bien chicos, así que hemos creado nuestra base de datos y todo lo que necesitamos para conectarnos a ella a través de nuestra aplicación. Y son pocas las cosas que necesitamos reequipar o aplicar para facilitar eso. Entonces estará usando Entity Framework, que es Microsoft construido en nuestro buque insignia o para conectividad y manipulación de bases de datos. Entonces ORM es la abreviatura de asignador relacional de objetos. Llegar a Entity Framework en nuestro proyecto, podemos pasar al archivo CSS. Podríamos agregarlos manualmente aquí, pero en realidad solo usaremos la CLI de dotnet. Y se puede ver lo que sucede en este archivo CSV cuando ejecuto estos comandos. Entonces el comando que voy a ejecutar, el me acaba de aumentar y aumentar los realistas sean bienes raíces y el tamaño de la pantalla. Entonces el comando que estamos ejecutando aquí es dotnet add package. ¿Bien? Y lo que esto hará es llegar al gestor de paquetes llamado New gets. Te pondrás en contacto con nuevos repositorios de git y obtendrás el paquete, la última versión del paquete. Si no especificamos, en este caso, no voy a especificar una versión. Y lo que voy a intentar conseguir es el paquete para Microsoft dot Entity Framework Core SQL Server. Este paquete, solo podemos sumergirnos en dotnet add package Microsoft pero Entity Framework, Core SQL Server. En este paquete, cuenta con todos los conectores y todo el código que necesitamos para facilitar la comunicación con una base de datos SQL Server. Entity Framework es de código abierto, es multiplataforma y también tiene soporte para diferentes tipos de bases de datos. Entonces, si estás usando luz secuela o Postgres o MySQL, hay bibliotecas que son extensión en paquetes más bien para Entity Framework Core para esas bases de datos particulares. En este caso, estamos usando SQL Server. Entonces solo voy a seguir adelante, meterlo y presionar Enter y luego darle unos segundos. Y luego se va a apagar y va a descargar ese bolsillo de NuGet y están en archivo puente RCS, ve un nuevo nodo apareciendo indicando que sabemos tener una referencia de paquete a la biblioteca que acabamos de hacer herramienta de referencia, y la versión es 7.0. Bien, Entity Framework Core seven es compatible con dotnet busca. Entonces, incluso si estás usando dotnet seeks, puedes usar la versión siete de Entity Framework Core. Ahora se diseñaría otro paquete que quiero instalar antes de seguir adelante . Entonces solo presionaré para obtener la Lira y el mando más recientes. Y luego voy a quitar el SQL Server del comando y reemplazarlo con la palabra diseño. Y luego presiono Enter. Y luego va a hacer lo mismo, llegar, obtener el paquete, y luego va a actualizar nuestro archivo CSV con ese nodo. Entonces aquí verás que tiene algunas cosas más que agregar fuera de solo la referencia del cubo, pero eso está bien. Entonces ahora que tenemos Entity Framework en nuestro proyecto, necesitamos agregar lo que llamamos una cadena de conexión. Entonces la cadena de conexión es como una dirección, o tiene una serie de instrucciones que permiten la aplicación o cómo puede conectarse a la base de datos. Así que eso va en nuestro up settings.js, archivo JSON. Aquí. Solo voy a modificar esto, y esto es solo un archivo JSON regular, ¿verdad? Entonces es la sintaxis CMG. Sabemos que es un par de valores clave. Las cadenas de conexión son una sección. Así que en realidad podrías comenzar a escribir cadenas de conexión y presionar Enter y lo llenará por ti. Déjame hacerlo otra vez. Las cadenas de conexión entran y se llena, se sostiene. ¿Bien? Entonces dentro de las cadenas de conexión podrías tener múltiples bases de datos. Por lo tanto, puede tener tantos pares de cadenas de conexiones de valores clave como necesite. Esta primera cadena de conexión que voy a necesitar para esta aplicación es aquella que conecta a la administración escolar dB. Así que abre y cierra las comillas. Y luego ahí estoy escribiendo el nombre de la cadena de conexión, que es la conexión de la Escuela de Administración DB. Bien, entonces tenemos los valores así que dos puntos y luego abrimos y cerramos comillas. Así que aquí es donde realmente ponemos en la cadena de conexión. Entonces nuestra cadena de conexión va a decir servidor es igual y luego la dirección del servidor, que en nuestro caso es localhost coma 1,400, porque estamos usando nuestra base de datos alojada más oscura que configurado. No obstante, esta es solo la dirección de la base de datos. Entonces, si estaba usando mi instancia de host local, diría localhost. Si estuviera usando mi instancia de SQL Express, diría SQL Express, ¿verdad? Entonces, si estás usando SQL Express y no más oscuro, entonces así es como se vería esa dirección. Bien, así que estoy usando más oscuro, una vez más, localhost 1,400. Y luego especificamos la base de datos. La base de datos aquí, creo que la llamamos gestión escolar. Eb siempre puede volver atrás y verificar de nuevo cómo lo llamas. Entonces esa es la base de datos. Y fíjate que estamos usando punto y comas. Y luego tenemos que ver una conexión de confianza en la partitura. Entonces tenemos que decir si se trata o no de una conexión de confianza, que en este punto sólo voy a decir falsa, porque la base de datos está buscando que se cumplan ciertos requisitos de seguridad y podemos reservarlo para más escenarios de producción que cuatro desarrollos sentados. Entonces por ahora sólo voy a decir que eso es falso. Y luego tenemos otra configuración que dice conjunto de resultados múltiples activos. Y eso básicamente especifica si se permiten múltiples conexiones simultáneamente. Sí. Y entonces el final es encriptar es igual a falso. Bueno, no finalmente, pero el final relacionado con la seguridad es encriptar iguales caídas, sobre todo en EF Core. Lo que pasa es que en la versión más reciente de EF Core, esto va a pasar a true por defecto, así que hay que afirmar específicamente que es falso, o esto va a asumir que es que está encriptado y si no está configurado correctamente, entonces tu conexión no pasará. Esta conexión solo establecerá esas dos caídas en nuestro entorno de desarrollo. Entonces necesitamos especificar el nombre de usuario y contraseña. Ahora esta parte es opcional. El ID de usuario y la contraseña son opcionales si está usando SQL Express o si está usando una instancia instalada localmente de SQL Server, eso significa que va a tener la autenticación de Windows predeterminada en usted no es necesario especificar un ID de usuario y contraseña. En el caso de que tengas que usar un usuario como si estuvieras usando SQL Login, ya sea que lo hayas configurado así, o estés usando Docker donde no hay una opción real para hacer lo contrario, entonces definitivamente vas a tener que especificar el ID de usuario. Y entonces vas a tener que especificar la contraseña y olvidé mi contraseña. Déjame simplemente saltar de nuevo a más oscuro y miré mi imagen. Ahí vamos. Sigue haciendo clic en el lugar equivocado. Entonces estoy tomando prestado ese valor de contraseña para mi cadena de conexión porque sin embargo me conectaría a ella, Así es como la aplicación necesitará conectarse a ella. Entonces esta cadena de conexión es como realmente nos conectaremos a la base de datos y extraeremos la base de datos. Entonces en esta lección, no solo estamos sentando una cadena de conexión, sino que también vamos a ser lo que causará la tos, plegando la base de datos en nuestra aplicación. Tomamos lo que llamamos un primer enfoque de base de datos, lo que significa que creamos una base de datos y luego vamos a conectar la aplicación a ella. La alternativa, podría ser que tengamos esa aplicación y usemos código, es decir, estamos escribiendo código y clases y modelos. Y luego usar eso para informar a la base de datos sobre cómo debe verse. Eso se llama Código Primero. Otros cursos donde muestro código para nosotros este curso estoy seguro en base de datos primero, que podamos tener una idea de cómo podemos traer en una base de datos existente porque muchas de las veces la base de datos es ya ahí y necesitamos actualizar la aplicación o construir una aplicación para la base de datos. Necesitamos conocer un todo para mirar base de datos existente y modelarla en nuestra aplicación. Entonces solo voy a hacer CLS. Entonces tenemos una nueva ventana de terminal aquí. Ustedes son destrucciones. Y luego escribamos una nueva dotnet. Stephen. Pero antes de hacer eso, realmente necesitamos instalar el conjunto de herramientas EF en nuestra CLI de dotnet. Entonces necesito decir dotnet new install, y luego solo lo instalaré globalmente. Así guión, guión global. Y entonces la herramienta que estoy instalando se llama dotnet high F y E f. así que una vez que lo haga, se puede ver que ya la tengo instalada. Entonces mi CLI de dotnet ya tiene eso instalado, pero el tuyo probablemente pasará por los movimientos y de hecho extraerá todas las bibliotecas de soporte para esta herramienta. Una vez hecho esto, sin embargo, ahora podemos proceder a nuestras operaciones de andamios dotnet EF. Entonces podemos decir dotnet EF BB context. ¿Bien? Y luego decimos andamio. Un andamio significa que estoy viendo lo que existe y luego fui a modelarlo en la aplicación. Y luego para regañar lo que necesito es la cadena de conexión. Entonces voy a copiar esta misma cadena de conexión que solo la ponemos en la configuración de la aplicación, ese archivo JSON. Y voy a pegarlo aquí. Bien, agradable y sencillo, pero ya lo escribimos. Y ojalá ya sea exacto ¿verdad? Después de que tengamos eso, vamos a ver qué controlador o qué tipo de base de datos. Entonces tengo que especificar el tipo de base de datos a través de la biblioteca, el mar y Microsoft pero Entity Framework, Core dot SQL Server. Y no tengas miedo de copiar y pegar porque esto es mucho mecanografía. Así que incluso para eso, podrías saltar de nuevo al archivo de brocha USCS, copiarlo y luego pegarlo Es lo que sea que te haga más eficiente. Entonces voy a especificar que quiero que esto se emita a un directorio llamado data. Bien, así puedo ver el guión 0. Y luego indicar el nombre de la carpeta que son datos. Entonces, una vez más, esto es ver dotnet EFL le gustaría regañarse en el contexto DB. Dondequiera que esté esta base de datos, vaya por esa base de datos. Eso es lo que quiero construir. Ese contexto DB apagado. Estamos usando un servidor SQL. Y cuando estés listo para generar tus archivos, cárgalos a una carpeta llamada data. Puedo presionar Enter. Y luego una vez que presione Enter, o vamos a ver algo que se ve bien o algo que se ve mal. Un bonito siempre es bueno. Entonces aquí vemos que recibimos un error porque no pudo iniciar sesión con el usuario. Entonces las respuestas que el inicio de sesión falló para este usuario, y yo, probablemente no obtuviste esa experiencia. Pero esto es porque aquí uso las comillas dobles. Permítanme cambiarlos por comillas simples. Bien, fíjense, noten la diferencia. Debido a mi elección de contraseña, tengo los signos de dólar. Entonces, cuando estoy usando comillas dobles, los signos del dólar están siendo codificados para mostrar que no están siendo vistos como cadenas literales. Cuando uso comillas simples, todo está en un solo color. Entonces esas son pequeñas pepitas que descubres a través de prueba y error. Entonces déjame presionar Enter e intentarlo de nuevo. Esta vez. Bien. Recibimos una pequeña advertencia y dice el potencial de proteger la inflamación sensible en tu cadena de conexión, deberías sacarla del código fuente. ¿Bien? Ahora bien, si voy a mi Explorer, puedo desplazarme hacia arriba y ver una nueva carpeta aquí llamada data. Y cuando lo amplíe, veré archivos de clase que corresponden con mis nombres de tabla. Y voy a ver este archivo llamado archivo de contexto DB. Ahora bien, en estos contextos DB, básicamente estamos modelando o base de datos. Entonces este contexto DB es que la encarnación de nuestra base de datos. En versiones anteriores anteriores a dotnet Core y EF Core, podríamos generar ese diagrama, algo parecido a un diagrama de relación de entidad ERD que en realidad mostraría estas tablas ya que están en la base de datos en ausencia del diagrama. E incluso detrás del diagrama había un archivo llamado archivo de contexto DB que se parece a esto. Entonces, en este archivo de contexto DB, está delineando las diferentes partes de la configuración que se necesita. Vemos aquí donde se inicializa en conjuntos de dB. Entonces, cada línea de asiento dB representa la tabla. Entonces el nombre de la mesa es estudiantes, pero el conjunto de bases de datos se basa en los modelos. Los alumnos tomaron todas las propiedades de la mesa llamada estudiantes y generaron una clase que corresponde con eso. Entonces las propiedades de la base de datos o identificación, nombre, apellido y fecha de nacimiento. Todos ellos corresponden con lo que hay en la definición de la base de datos. Bien, así que este diagrama representa la versión de código de nuestra base de datos. Ahora, una cosa a tener en cuenta es que veremos el mismo error o advertencia que obtuvimos en la CLI justo encima de la cadena de conexión. Ahora bien, esta es la misma coordinación y corriente que usamos aquí en el comando, así como ya la tenemos en la perturbación. Realmente no quiero codificar. Entonces lo que voy a hacer es ejecutar otro comando para generar la CLI. Generado este diagrama o este contexto más bien, déjame hacer un CLS. Fui a simplemente presionar hacia arriba y recuperar lo más reciente que estuvimos en la única nieve. Todas las cosas a tener en cuenta aquí. Uno, ya tengo expedientes. Si intenté ejecutar este comando, de nuevo, voy a recibir un error porque va a ver los archivos que estoy tratando de generar ya existen. Ahora bien, esto puede ser un problema cuando realmente quieres que te guste traer cambios, entonces la base de datos cambia, entonces quieres que el código refleje que necesitarás ejecutar este comando nuevamente. Entonces ahora están diciendo que necesitamos usar la bandera de fuerza para sobrescribir los archivos. Entonces eso significa que en el comando SAM, necesito agregar guión, ¿verdad? O guión, guión fuerza. Esto significa lo que sea, aunque ya esté ahí, quiero una anulación. Lo siguiente que queremos poner es un comando que te dice que no incluyas esto en la configuración o en la sección de configuración. No necesitamos esa sexual con la cadena de conexión. Entonces puedo ver guión, guión, guión configurando, saber configurar, ¿verdad? Cuando presiono Enter, me sale un error. Y eso es porque esto es más en configurar y me disculpo, no es en configurar. Vamos a intentarlo de nuevo. Entonces no en la configuración y luego está construyendo, y luego está hecho. Y si volvemos a los valores de nuestros contextos, veremos que ya no tenemos eso al configurar el método. Bien, entonces tenemos en el modelo creando lo que no tenemos en la configuración. No necesitamos esa parte. Entonces así es como cuando hagamos cambios en nuestra base de datos, tendremos que ejecutar ese comando. Va a ir y solo regenerar todos los archivos para nosotros cada vez. ¿Bien? Ahora lo último para asegurarnos de que nuestra aplicación sepa sobre la base de datos porque sí, los archivos están ahí, pero todavía no hay un conocimiento real de la base de datos y aplicación reales. Tenemos que ir a nuestro program.cs Y luego tenemos que hacer lo que llamamos registro o dependencia inyección o distribución. Entonces necesitamos registrar que esta base de datos existe en la aplicación para que podamos usar Entity Framework y acceder a ella. Entonces antes que nada, voy a decir que var con es igual a. Y luego voy a entrar en nuestro archivo de configuración. Así puedo ver la configuración de perros constructores, configuración en el momento en que se inicializa la aplicación o discapacidad. Buscará todos los ajustes de la aplicación y todos los demás archivos de configuración y simplemente los enrollará en este único objeto, construirá la configuración. Y luego tiene un método que dice get connection string, nice and clean. Y entonces todo lo que tenemos que hacer es conocer el nombre de la cadena de conexión. Entonces, si olvidaste el nombre, está bien. Salta por encima, agarró el nombre, copia, salta hacia atrás y pega. Entonces ahora tenemos la cadena de conexión. Necesitamos agregar realmente el contexto DB. Entonces la startup, digamos un constructor de servicios punto. Y dirá punto AD B2B contexto. Y lo pondremos en contexto DB. Y sólo voy a repasar copia del nombre y pegarlo aquí. Entonces estamos agregando ese contexto DB, ¿verdad? Entonces tenemos que pasar en las opciones. Entonces q puntos, es solo una expresión Lambda. Si no estás familiarizado con las expresiones lambda, vas a estar haciendo muchas puertas. Pero esta es una expresión lambda. En ninguna parte decimos usar SQL Server. Y aquí está la cadena de conexión. Bien, ahora me faltan algunas referencias. Simplemente haga clic en eso y diga Conductos de control. Eso me permitirá agregar esta declaración usando. Ahí vamos. Y luego aquí los datos onshore otra vez, y me permite agregar esto usando declaración. Y no, no hay flechas. Así que esencialmente estamos viendo cuando se inicia la aplicación, me agarró la cadena de conexión. Luego use la cadena de conexión para inicializar una conexión real a la base de datos que este contexto de base de datos es un modelo desactivado. Y aquí está esa cadena de conexión que deberías usar. Bien, ahora esto es lo que llamamos la sección de opciones. Entonces esto es lo que pasa a nuestro contexto DB cuando vemos opciones. ¿Bien? Entonces solo te estoy mostrando todas las pequeñas partes móviles para que puedas apreciar cómo se une todo. Así que ahora en realidad hemos creado una conexión entre nuestra aplicación y SQL Server. Así que cada vez que hacemos una ejecución dotnet desde no, en realidad va a establecer esa conexión cuando la aplicación se está iniciando. Ahora, lo siguiente que vamos a querer hacer es comenzar a crear funcionalidad en torno a crear funcionalidad la interacción con la base de datos. Porque tenemos aquí lo que llamaremos modelos de la base de datos, ¿no? ¿Y si quisiéramos comenzar a crear cursos, crear conferencias, crear estudiantes? Entonces necesitamos controladores, necesitamos vistas, necesitamos funcionalidad intermedia para entregar eso. Entonces veremos cómo podemos comenzar con eso en la siguiente lección. 21. Vistas y controladores de andamios: parte 1: En esta lección, vamos a andamiar a nuestro controlador y ver la palabra scuffled. Lo hemos usado antes, y básicamente significa que estamos generando código basado en algo, ¿verdad? Así que fuimos capaces de andamiar o contexto DB generando contexto DB y los archivos de clase, archivos modelo basados en nuestra estructura de base de datos. En esta situación, vamos a ser controladores de andamios y vistas basadas en uno de estos modelos. Bien, así que recuerda que tenemos controlador de vista modelo. Ahora tenemos el modelo. Entonces la carpeta de datos, todo en ella representa los modelos. Entonces estos archivos de clase son modelos orales, curso de conferencia, y estudiantes, esos son nuestros modelos. Esos representan los datos. Ahora necesitamos las vistas que nos permitan ver los datos e interactuar con los datos, la interfaz de usuario relacionada con el modelo. Y necesitamos que el controlador controle tráfico y las solicitudes y cualquier lógica relacionada con manipular los datos y mostrar la vista. Ahora, para crearlos, tenemos la opción de crear manualmente un controlador, crear manualmente una vista y conectarlos. Y creo que a estas alturas, sobre todo si eres principiante, es mejor mostrarte el código generado y explicarte eso. Y entonces mejor apreciarás lo que se necesita para crearlo desde cero, ¿verdad? Entonces dotnet CLI nos permite andamiar todo el código que nos permitiría hacer operaciones básicas de crud, crud, crear, leer, actualizar, eliminar, bien. Entonces, vistas y controladores y funcionalidades que nos permiten crear registros, leer registros, actualizar registros o eliminar registros basados en cualquiera de estos modelos y lo que representa en la base de datos. Así que basta de mi monólogo, entremos en él. Lo primero que queremos hacer es instalar otra herramienta, que es el generador de código ASP NET. Entonces voy a colapsar el panel lateral y hacer mi CLI un poco más grande. Y también haremos CLS. Deshazte de todo el ruido. Ahí vamos. Bien, entonces ahora necesitamos ejecutar el comando que dice dotnet tool. Eso ya lo has visto antes. Instalar. Y ya veré se puede decir guión, guión global como lo hicimos la última vez o guión g. Muy bien. Después se instalaron en la herramienta dotnet.net guión ASP, NET generador de código de guión. Bien, así que presionemos Enter y dejemos que eso corra. Bien, bueno, ¿qué funcionaría para ti? Ya lo tengo instalado, bien, así que porque nuestro instalado, estoy recibiendo este error. Sin embargo, en realidad tendrías una experiencia muy similar en cuanto a cuando instalamos el dotnet EF2. Bien. Ahora que tenemos eso instalado, necesitamos ejecutar un comando que nos permita andamiar el controlador basado en el modelo. Y queremos andamiar las opiniones que nos ayudan a lograr operaciones multitudinarias. Sin embargo, antes de hacer eso, necesitamos algunos paquetes más, ¿verdad? Así que ya tenemos el Entity Framework SQL Server. Ya contamos con Entity Framework. Diseño. Lo que necesitamos saber dotnet add package. Y queremos la cogeneración de punto web punto de Microsoft Visual Studio que diseñe. Entonces ese uno es un múltiplo. Pulsa pausa y asegúrate de que lo escribes nuevo como lo ves en la pantalla, ¿verdad? Así dotnet add package, Microsoft Visual Studio punto web punto cogeneración que diseñó. Este paquete realmente apoya esa ambición de cogeneración que nosotros, una vez que haya corrido y haya tenido éxito, solo haré CLS. Y entonces lo que podemos hacer después de haber incluido eso es seguir adelante y hacer nuestro andamio. Si estás usando Mac OS X o Mac OS o Linux, necesitarás ejecutar este comando donde veas ruta de exportación es igual al veas ruta de exportación es igual signo de dólar home, Slashdot, net, dotnet. Derecha. Ahí vamos. Dot.net o herramientas de slash de stop.net completo y luego ruta de signo de dólar de colon. Bien. Así que básicamente para OS, Mac OS y Linux, donde el tipo base simplemente sentado que el camino aquí, y esto debería ser signo de dólar a casa, no hashtag a casa. Pido disculpas. Entonces esto es solo decir que el hogar del archivo del proyecto o el archivo program.cs está en la raíz, ¿verdad? Entonces las herramientas dotnet deberían apuntar a la raíz del proyecto. Entonces, si estás usando Mac OS o Linux, primero tienes que ejecutar ese comando. Después de ejecutar ese comando, sin embargo, esta siguiente parte es para todos los que dirán que dotnet es generación de código B net dash, cuatro generaciones. Ahí vamos. Controlador. ¿Verdad? Entonces ahora estamos viendo dotnet y sabemos que este es el nombre de la herramienta porque la acabamos de instalar. Y queremos crear un controlador. Entonces podemos poner cosas como el nombre. Entonces puedo decir el nombre del guión. Y comencemos con el controlador para los cursos. Queremos crear un controlador para nuestras operaciones del curso. Entonces voy a ver el nombre del guión es con, es por supuesto, por supuesto que es correcto. Por supuesto su controlador, porque esa es la convención de nomenclatura. Entonces podemos especificar el modelo. Entonces puedo decir dash m. y ¿qué modelo estamos usando? Bueno, el modelo que estamos usando es por supuesto, ¿de acuerdo? Entonces vemos un guión m, y luego vemos curso. ¿Bien? Entonces necesitamos especificar el contexto de datos o contexto de datos. Y no quiero escribirlo todo manualmente, así que solo voy a saltar por ahí, copiar el nombre, y pegarlo en la línea de comandos. Ahí vamos. Entonces tenemos algunas otras cosas. Entonces esto realmente generará ese controlador, pero quiero que entre en la carpeta específica las alertas de control, ¿verdad? Así que solo voy a ver guión, guión ruta de carpeta relativa es igual a controladores. Bueno, no hay signo igual. Pido disculpas, no me dejes decir igual. Entonces podemos especificar las cosas que queremos usar el layout por defecto. Y si queremos hacer referencia a bibliotecas de scripts, entonces la combinación de todas estas cosas generará el controlador por ese nombre usando este modelo y este contexto de datos. Y abrirá los controladores a esta carpeta. Pero luego estamos viendo usar el diseño predeterminado, lo que significa que las vistas que se generan junto con un controlador tomarán esa opción donde solo queríamos usar el archivo de diseño predeterminado. Bien, también podríamos tener otras opciones. Entonces estas otras opciones normalmente verás en la interfaz de usuario cuando estés usando Visual Studio. Así que aquí podemos ver bibliotecas de scripts de referencia. Déjame colapsar de ello. Referenciar bibliotecas de scripts y luego podemos decir como false. Bien, esas son otras opciones que podemos ver. Si quieres ver todas tus opciones, por supuesto, siempre puedes decir dotnet, ASP, NET, guión, guión de cogeneración H o Control H, y ver todas tus opciones. No obstante, sigamos adelante con esto. Voy a presionar Enter. Oh, Dios mío, me disculpo. Escribí ese comando completamente incorrectamente. Eso no debería ser cogeneración, eso debería llamarse generador. Bien, ese es el carro que. Entonces déjame hacer primero un CLS y volver a leer el comando desde cero. Así ASP NET generador de código. Ahí vamos. Entonces presionemos Enter y dejemos que vuelva a funcionar. Muy bien, y luego en unos segundos, habría construido nuestro proyecto y generado algún código para nosotros. Entonces veamos qué hizo. Hizo la compilación, luego dijo encontrar el controlador del generador y está ejecutando el controlador del generador. Entonces eso es esto. Bien. Y luego está viendo que va a averiguar los Meta datos de Entity Framework para el contexto DB y modelo llamado curso. Luego se agrega el controlador al controlador slash ese directorio slash nombre de archivo. Bien, y luego agregó las vistas. Así que mira aquí, se agrega para vistas, índice, eliminar, detalles, editar y crear. Y luego nos dijo que el tiempo de ejecución era de 18 s. Ahora bien, si miramos en nuestra estructura de archivos, efectivamente, sí vemos un nuevo controlador. Esto un poco más pequeño. Bien, entonces sí vemos que tenemos un nuevo controlador llamado curso. Por supuesto que es controlador. Y vemos aquí que está inyectando el contexto DB. Y no voy a entrar en demasiados detalles ahora voy a revertir y explicar todo, pero solo quiero que echemos un vistazo a lo que tenemos. Tenemos nuestra página de índice, tenemos detalles o acción u otros. Hay mucha opción de detalles. Tenemos nuestra acción de creación para crear acciones en realidad. Entonces vamos a explorar por qué tenemos que hacerlo, tenemos la edición. Tenemos dos ediciones en realidad. Una vez más, tenemos delete y tenemos otro Delete. ¿Bien? Y luego si miramos en nuestra carpeta views, veremos que tenemos una nueva carpeta llamada courses. Así que recuerda que una vez que tengas ese controlador, necesitas esa carpeta de vistas coincidentes. Y si lo expandimos, vamos a ver archivos de vista que coincidan con cada una de las acciones que obtuvimos en nuestro controlador. Entonces antes de comenzar a explorar el código, vamos a verificar y ver si esto se ejecuta. Entonces voy a hacer una carrera de dotnet. Entonces cuando se cargue la página, solo vamos a navegar manualmente. Vamos a arreglar todo eso más adelante, pero solo puedo decir cursos de recorte. Y luego recuerda que siempre va a buscar primero la acción del índice. Entonces cuando hago eso y presiono Enter, carga nuestra página de listado. Entonces aquí veríamos todos los cursos del sistema. También podemos proceder a crear nuevos. Entonces, si hago clic en Crear nuevo, llego a un formulario. Déjenme seguir adelante y agregar un nuevo curso. Veamos el desarrollo de código abierto. Bien. El código del curso es CS101, por ejemplo. Y este es un curso de tres créditos y nos permite crear y luego mirar eso. Entonces todo esto no es dinámico. Yo no escribí nada de este código 12, sabes que cualquier cosa que se ya sabes que cualquier cosa que se muestre en una página HTML tenía que ser escrita estáticamente o se está cargando dinámicamente. Entonces esto viene directamente de la base de datos ahora mismo, ¿no? Si vamos a editar, veremos que nos compran la inflamación. Si dije bien, esto es más como un curso de dos créditos y un curso de tres créditos. Puedo ahorrar. Ahí se edita. Puedo ver los detalles del mismo. Y eso es básicamente lo que queremos decir con multitud, ¿verdad? Entonces esto es leerlo. No podemos detalles es leerlo. Podemos editar y también podemos eliminar. Entonces si digo eliminar, eliminar, ahí vamos. Así que ahí mismo, acabamos de generar funcionalidad de multitudes con un solo comando en r.net CLI. Entonces, cuando regresemos, vamos a descomponer el código y mirar exactamente lo que obtuvimos de este ejercicio de andamios. 22. Comprender el controlador andamio: Bienvenidos de nuevo chicos. En esta lección, vamos a estar explorando nuestro controlador de cursos, y queremos simplemente tomarnos nuestro tiempo y entender lo que está haciendo el código. Así que he colapsado mi terminal y voy a estar colapsando y descolapsando en el Explorer medida que exploramos el código, ¿verdad? Para que puedas seguir adelante y abrir el Controlador de Cursos. Entonces lo que verás después de que obtengamos a través de todo el bloque usando y el espacio de nombres y el controlador de curso de clase pública, que está heredando de la clase base del controlador, que es bastante estándar. Vamos a ver que tenemos esta inyección de la dependencia en la base de datos. Ahora, permítame explicarle qué significa esto cuando digo inyección. Por lo general, cuando tienes una clase y quieres un objeto de la clase, en realidad verías algo así como y yo solo lo escribiré aquí abajo. Dirías que el nombre del objeto de tipo de datos es igual a una nueva instancia de ese tipo de datos. Entonces conoce que tienes el objeto, puedes empezar a usarlo. Sin embargo, esto puede causar problemas en función de la naturaleza de la misma, especialmente para algo así como una conexión de base de datos. Porque cada vez que haces nuevos, realmente acoplando fuertemente la clase y el objeto, ¿verdad? Entonces no, he acoplado estrechamente My Courses Controller al contexto de la base de datos. Si cambio eso tiene que ser Son contextos como este. Por ejemplo, me está dando un error porque ahora necesito proporcionar ciertos parámetros y cómo ser responsable de prevenir esos parámetros cada vez que uso ese objeto, invocar un objeto de ese tipo. Entonces eso no es realmente sostenible y mantenible a largo plazo. Entonces el concepto de inyección de dependencia significa que puedo tener la clase. Puedo modificar esta clase tantas veces como necesite para referirme a contextos DB. Puede evolucionar, puede necesitar más parámetros o lo que sea. Pero por mucho que evolucione, no tengo que modificar cada lugar al que le estoy haciendo referencia. Simplemente puedo inyectarlo en mi código. Y en segundo plano, la aplicación hará lo que sea necesario. Entonces así es lo que llamaremos inyección de dependencia. Tuvimos que configurar la inyección de dependencia o configurar el contexto de base de datos y prepararlo para inyección de dependencia cuando creamos nuestro contexto de base de datos antes. Entonces si pasamos a program.cs, recuerden que ponemos en esta línea aquí y decía agregar servicios al contenedor. El contenedor aquí, retiro el contenedor COI o inversión de control, ¿verdad? Entonces todo ese concepto de inversión de control e inyección de dependencia, esos dos van de la mano. Significa que estamos configurando la aplicación para poder inyectar estas lo que llamaremos dependencias donde quiera que estén. Así que por mucho que podamos modificar la clase real aquí, cuando se inyecta como una dependencia. El destinatario está recibiendo clase, como en este caso el control de cursos no tiene que preocuparse por alimentarlo con todas sus dependencias. Porque el contenedor del COI se está ocupando de todo eso. Bien, es un concepto bastante genial y lleva a un código mucho más limpio, mantenibilidad mucho más eficiente a largo plazo. Para que totalmente asp.net Core tenga incorporado ese contenedor IoC. En el pasado, no se necesitan bibliotecas de terceros. Y algunas personas todavía recurren a bibliotecas de terceros, pero no es absolutamente necesario en estos días cuando se usa dotnet Core. Entonces después de haber inyectado o dependencia, que en este caso es contextos RDB, y es una dependencia porque necesitamos el contexto DB para poder hablar con la base de datos o contexto DB o el objeto de contexto tipo db en este caso, representa la conexión a la base de datos. Entonces cuando hacemos clic en la página de cursos y carga el índice sí se conecta a la base de datos, obtiene los datos y se muestra. Entonces eso nos lleva a nuestra siguiente parte de la misma, que es la acción. Ahora, ¿qué está pasando en la acción? En primer lugar, estamos comprobando para ver si el curso es Table, quote unquote realmente existe en la base de datos, ¿verdad? Así que una vez que esto realmente existe en la base de datos, entonces vamos a devolver la vista con los datos. Esto está escrito en una línea. Quiero decir que es un operador ternario. Entonces, si es a través de varias líneas, es realmente una declaración de una línea. Entonces eso podría llevar a cierta confusión. Por supuesto, esto se generó para nosotros. Pero más o menos lo que está haciendo esto es ver. Y solo leeré esto en un bloque de comentarios e intentaré escribirlo en pseudocódigo. Entonces tiene sentido. La tabla de la base de datos existe, ¿verdad? Entonces eso es lo que hace esta primera línea. Si eso existe, entonces queremos devolver la vista. O en realidad déjame verte que quieres ejecutar una consulta. Entonces decimos que los registros var en una tabla serían iguales a la consulta. Entonces en este caso nuestra consulta es un contexto de peso, puntos, cursos, y esa lista de herramientas es fregadero. Entonces estamos usando un dialecto de C-sharp llamado link, ¿verdad? Enlace aquí es lo que usa EF Core. Ahí está la biblioteca para ir a la base de datos, buscar los registros en base a la consulta que pueda generar a partir de nuestra declaración aquí dice básicamente solo estoy convirtiendo esto en una sentencia SQL que dice seleccione estrella de esta tabla. Sin embargo, no necesitamos escribirlo en el código porque tenemos enlace el dialecto para traducirlo por nosotros. Entonces aquí básicamente estamos viendo que me pone los discos en la mesa. Esperaré una conexión a la base de datos, conseguiré las tablas y obtendré todo en forma de lista. Ahora, algunas palabras clave que notarás son asíncronas. Voy a esperar y hacer la tarea. Cuando estamos haciendo programación asincrónica, hace que las consultas sean más eficientes y operaciones más eficientes. Y sintácticamente, solo necesitamos asegurarnos incluir estas declaraciones a medida que avanzamos. Los explicaré a medida que aparezcan. Pero no quiero especializarme en eso ahora mismo. Todo bien. Entonces estamos sacando los registros de la mesa y luego sabemos que tenemos los registros. Vamos a devolver la vista que has visto ese nombre antes, y donde se convirtió en vista con los datos provenientes de la base de datos. Entonces eso es lo que están haciendo estas dos líneas, más o menos. ¿Bien? Si la mesa existe, esa es esta parte. ¿Bien? Y luego no me vuelvo operador, el signo de interrogación. Y entonces lo que debemos hacer, entonces básicamente decimos devolver la vista con esos datos. Sin embargo, todo lo que hice aquí arriba, dividiremos en dos líneas, obtendremos los datos luego regresados a la vista. Así que es más o menos lo mismo, ¿verdad? Creo que este formato podría leerse un poco mejor a la larga, pero si lo aprecias aquí, entonces está bien. Entonces si eso no va a evaluar a verdad, entonces vamos a hacer otra declaración de retorno donde devolvamos este problema. Al ver que algo está mal con la base de datos prácticamente ¿verdad? El problema es solo un objeto especial que nos permite ver que hubo un error. Cada vez que haya un error, podemos devolver el problema y la aplicación lo mostrará en consecuencia. Entonces aquí está diciendo que la entidad se sienta en el contexto DB de gestión escolar no se configuró correctamente. No es que no existe o, ya sabes, algo anda mal, no es encontrarlo. Entonces eso es lo que esta línea. Entonces déjenme que pueda dejar eso, ese comentario. A lo mejor te ayudará a diseccionar mejor esta línea de código. Entonces eso resume lo que sucede cuando cargamos nuestra página de índice. Bien, cuando estemos viendo las vistas, verás cómo vinculamos los datos del backend al front end. Pero esto es lo que quise decir con la magia que hace el controlador antes de que apague el View. Solicitud de juego fue a la base de datos, obtuvimos nuestros datos, luego devolvimos la vista, que los datos. Ahora bien, si vamos con los detalles, hay pocas cosas más que suceden dentro de los detalles. Cuando intentemos cargar los detalles, verás que está intentando, o está esperando ver un valor de id. Entonces así es como se verán las raíces. Cursos slash details slash y el valor id. Y ese valor de ID entra en una variable de parámetro que estamos llamando id, ¿verdad? Lo primero que hacemos es asegurarnos de que ese ID no sea nulo. Entonces dice si el ID es nulo o la tabla de la base de datos se el mismo problema que teníamos aquí arriba. No existe, entonces volvemos. No es divertido, no para ellos es lo mismo que un fluoróforo. Entonces es por eso que cuando vas a sitios web y haces clic en ciertas cosas, es posible que veas un cuatro o cuatro porque no puede encontrarlo. Bueno, aquí hay un ejemplo vivo de eso. Entonces si eso, si ninguno de estos obtiene, entonces iremos a la sección de búsqueda del curso donde vemos la base de datos. Dame los cursos de mesa, y luego consígueme el primer registro que coincida con la identificación que he proporcionado. Entonces esto es lo que llamaremos una expresión lambda. Ya hemos visto esto antes, ya lo hemos hecho antes. Bien, pero en las consultas por escrito, son útiles cuando queremos especificar ciertas condiciones. Así que aquí estamos viendo, dame el primer registro estrella por defecto donde, y luego empezamos a lambda expresión con ese token y luego esta flecha. Y luego decimos columna de puntos Tolkien que nos interesa comparar si va a ser igual, igual, menor que, mayor que, mayor que igual, etcétera, etcétera. Sea cual sea el tipo de comparación, el valor que deseamos. Bien, No, esto es decir primero nuestro default porque primero significa que obtendrá el primer registro que coincida con la condición. Entonces aunque vea múltiples, devolverá el primero. O por defecto significa que si no viste nada devolvió nulo. ¿Bien? Entonces es por eso que después va a decir si el curso fue nulo, luego regresar no encontrado. Porque podría ser que lo pedí, claro con el ID 50. Cuando no hay curso con la idea de 50. Entonces, si después de esto no lo pudo encontrar, esto sería nulo. Y si se sabe que vemos no encontrado. Una vez que pase todo eso, sin embargo, vamos a devolver la vista con los datos, con el objeto, con el modelo o un objeto fuera del tipo de modelo. Entonces eso es lo que sucede dentro de los detalles. Y la forma en que está escrito, es un poco más sencillo que el único trazador de líneas aquí. No necesito escribir ninguna anotación aquí. Luego entramos en Crear y verás que crea torpe en, aquí arriba. Bien, entonces tenemos el Create, get, nuestro F crea una operación post y GET suele ser lo que usamos para recuperar la inflamación. Entonces aquí solo va a volver a ver porque cuando hacemos clic en Crear, solo va a devolver la vista que es la forma que nos permite crear. Sin embargo, cuando hacemos clic en enviar en el formulario, es una buena práctica enviar datos con una solicitud posterior. Y por eso tenemos el post create. Entonces tenemos el get created y tenemos el post create. La posdata obtiene aquí una anotación que dice publicación HTTP. También hace nuestra validación de un token anti falsificación para asegurarnos de que no lo hacemos o limitamos el número de presentaciones que vendrán en caso de que nuestra fuerza corporal al spam fuera o algo así. Cada vez que entran los datos, a lo sumo tienen este token, que es algo que solo conoce el servidor. Entonces el servidor sabe validar este token que viene de la forma. Si no podemos validarlo, entonces rechazará que tiente. ¿Bien? Entonces en la lista de parámetros vemos aquí que estamos haciendo un bind. El enlace aquí básicamente dice, me interesan los campos con estos nombres que podrían haber sido enviados en este objeto. Bien, puedes extender esta lista. ¿Bien? Si el coro obtuviera una nueva columna y quisiéramos atenderla, podríamos extender esa lista de en consecuencia, en consecuencia. Y solo agregamos coma, el siguiente nombre de campo. También podríamos crear un modelo de vista, pero no vamos a entrar en eso en este punto. Pero puedes leer y decir para protegerte de ataques de sobrepublicación, puedes especificar las propiedades para que puedas leer más sobre lo que está sucediendo en este parámetro. Pero prácticamente solo estamos diciendo que cualesquiera que sean los datos que se envíen, todos estamos interesados en los datos con estos con estos nombres. Entonces alguien intentó enviar más datos de los necesarios para este formulario en particular, entonces esos campos adicionales serían rechazados automáticamente porque no cumplen con estas condiciones de valor. Bien. Entonces pasamos a ver si el estado de los modelos es válido. punto de estado modelo es válido. Bastante. La validación se basa en nuestras propias reglas de validación que podemos crear más adelante. Y las reglas de validación que C-sharp está inferyendo en función de los tipos de datos en uso. Entonces aquí tenemos cadena. La cadena no es anulable. Entonces básicamente diría eso, Oye, estoy esperando un valor aquí, pero en este es nullable. Entonces si recibo un objeto de tipo curso, y esto resulta ser nulo por cualquier motivo. Y verás aquí que hay algo así como un pollo viejo o contingencia para asegurarse de que siempre tenga un valor. Pero vamos a ver. Entró con un valor que es nulo, entonces esa validación automáticamente vería que no es válida porque estoy esperando una cadena y me estoy poniendo nulo, no es válida. ¿Qué pasa cuando no es válido? Se va a saltear esto porque esto se evaluó a falso. Y sólo va a devolver la vista con el objeto que se presentó. Bien. Entonces es por eso que cuando envías un formulario y hay un error en él, sí. En realidad, en realidad vuelve a cargar el formulario con los datos que acababas de enviar. Entonces esto es todo lo que está pasando aquí. No obstante, si es válido, entonces seguimos adelante y decimos base de datos, estamos agregando este registro. Sé que quieres guardar la cadena, así que esto es lo que realmente la compromete a la base de datos. Y luego redireccionamos a la acción con el índice de nombres. Entonces Lee Derek, la subasta es la razón por la que saltará de nuevo a la página de listado y luego te mostrará un registro recién creado que es conocer la base de datos. Entonces eso es todo lo que está pasando. En lugar de los Crea. Si bajamos al editor, veremos que es algo así, bueno, es muy similar a la página de es muy similar a detalles porque está recibiendo un valor de id está comprobando para asegurarse de que es un ID válido valor. Se va a buscar el curso, pesar de que esta consulta está escrita un poco diferente, pero está haciendo lo mismo. Encuentra el curso por ID. Y entonces si es nulo, lo mostramos por ello. Si no es nulo, mostramos la página, la página de edición en realidad va a tener un formulario similar a la página Crear, pero esta vez en realidad está obteniendo los datos. Entonces es por eso que cuando hacemos clic en Editar, realidad vemos los datos en el mismo formulario que parece un decreto, pero en realidad obtenemos los datos. Entonces cuando nos sometemos, nota que también se ha opuesto. Hace la misma validación del token anti falsificación. Tomamos y validamos el ID así como tamizamos los campos que están entrando. Bien, así mismo concepto el post que acabamos de ver para el Create. Luego pasamos a hacer algunas validaciones más donde decimos, bien, asegurarnos de que el ID que está entrando aquí en el enlace coincida con el id que viene en el formulario. De lo contrario, devuelva un error. Entonces decimos si el estado modelo es válido, intentaremos actualizar el registro y guardar los cambios. Ahora hay casos en los que podría haber tomado el registro para actualizarlo y usted pudo haber hecho lo mismo. Y entonces intentamos presentar, o para el momento en que usted está presentando, ya lo envié. Entonces estás editando versión anterior. Entonces eso provocará lo que llamaremos una excepción de concurrencia DB. ¿Bien? Y si eso sucede, entonces dice si el curso existe o si por supuesto no existe, entonces devuelve no por teléfono. De lo contrario, solo tira la excepción porque no estamos muy seguros de cómo manejarla, bien. Pero esto sería raro, pero sí sucede. Entonces es bueno tener esa contingencia en su lugar. Entonces después de todo eso, leemos a Erich a la página de índice, igual que con el create. Al final de eso, también devolvemos la vista con los datos si no era válida. Bien, entonces empezarás a ver que el código se ve muy parecido porque este es el código de esa manera. Esto se llama reasignar los detalles y todo lo que sucede aquí son mucho de lo que sucede aquí es similar a lo que sucede con un Create. Bien, entonces pasamos a la eliminación. Entonces estamos pasando una identificación para la eliminación. Él va a hacer lo mismo que los detalles y la edición que acaban donde está comprobando el id es encontrar el curso comprobando si es nulo, si no es todo, vamos a conseguir una página que nos muestra los detalles del curso. Después hubo un botón de borrar. Si recuerdas de nuestra prueba, solo debes saber que cuando hagamos clic en eso, va a enviar un post. Eso ya lo sabemos, ¿verdad? Y esta vez es solo decir que está usando un nombre de acción diferente, ¿verdad? Entonces el método es diferente, pero si quisiéramos que navegue a un nombre en particular, podemos especificar esta anotación y decir que te identifiques como delete, aunque te llamen delete confirmed. Bien, seguimos validando el token anti falsificación. Entonces esta vez donde estamos comprobando si el DB existe, está bien. Vamos y conseguimos el curso por identificación. Y luego si pudiéramos encontrar el curso, entonces intentamos eliminarlo de la base de datos. Una vez que se elimina, guardamos los cambios. Y luego una vez más, leemos a Erich para indexar. Entonces es por eso que después de cada vez que completamos una operación, siempre vuelve a la página de listado porque cada operación, una exitosa, diremos redirigir a la página de índice. El método final dentro de este controlador solo verifica si el curso existe. Y esto realmente solo se usó dentro de la sección de edición, ¿verdad? Donde estamos viendo si no existe entonces a través de no se encuentra. Entonces esta es solo otra forma de ver si existe donde en la base de datos tenemos el cualquier método. Entonces contextos tabla de puntos, punto cualquiera. Y entonces podemos decir ¿cuál es la condición que estamos comprobando? Entonces, ¿hay algún registro que cumpla con esta condición, que en este caso es ver dónde el ID coincide con el valor de id que estamos pasando? Y luego obtenemos el, ya sea el valor que sería cierto en cuanto a nuestro default, que sería nulo. Eso es más o menos lo que sucede en nuestro controlador. Ahora eso fue un recorrido rápido y sucio. No vamos a modificarlo. Vamos a dejar el código abreviado. Y más adelante vamos a empezar a escribir nuestra propia lógica personalizada. Pero por ahora, es bueno entender el código reiterado y saber qué está haciendo. Cuando regresemos, vamos a echar un vistazo a las vistas coincidentes para cada una de estas acciones y apreciaremos cómo ocurre la vinculación. 23. Comprender las opiniones Scaffolded: Bien chicos, así que avancemos y comencemos a mirar nuestros puntos de vista. Entonces voy a cerrar todas las tinas que no son absolutamente necesarias para esta actividad. Y luego busquemos en la carpeta views y luego busquemos la carpeta del curso. Y luego comencemos con el índice. Entonces lo haré en el orden en que probablemente visitaríamos las páginas. Y claro, index view es la primera que surge porque la acción index es la primera acción a la que se llama. Y si recuerdas, la acción index en realidad va a ir a consultar la base de datos y luego devolver esos datos a la vista. Entonces cuando devuelve esos datos a nuestro índice de vista, aquí es donde ocurre todo el enlace. Así que vamos de la línea uno. La línea uno estipula el modelo. ¿Está bien? Entonces en el modelo sinusoidal es solo una palabra clave que verás en la parte superior de las vistas que son enlace de datos, ¿verdad? Y luego se especifica el tipo de datos. Entonces aquí está diciendo que el tipo de datos que esta vista es deshuesada herramienta es una innumerable que es un tipo de colección, lo cual tiene sentido ya que estamos pasando por encima de una lista de objetos. Entonces esta es nuestra colección, ¿verdad? Por supuesto, los objetos. Entonces eso es lo que se espera. Entonces ahora que sabe que debe vincularse a este modelo, ahora podemos acceder a las diferentes partes. Tenemos la sección de datos de vista regular. Eso ya lo hemos visto antes. Tenemos una etiqueta H1 aquí que dice índice. Tenemos una etiqueta p con una etiqueta de anclaje que nos permite navegar a la acción de creación, ¿verdad? Entonces fíjense aquí que es sólo acción. Antes cuando estábamos mirando la pequeña página verás en ASP controller es igual a y habrías visto acción y controlador en pares. Sin embargo, cuando no especificamos el controlador, esto asumirá automáticamente que está buscando la subasta en el mismo controlador del que proviene la vista actual. Por lo que el índice de vista actual viene del controlador del curso. Por lo que supondrá que debe ir a la acción create en el mismo controlador. Muy bien, entonces vamos a ver una mesa. Así que recuerda que vimos la lista de registros. Y luego en esta tabla tenemos algunos métodos helper. Y a este se le llama nombre para mostrar. Bien, entonces este es un método de extensión HTML que básicamente mirará el nombre de la propiedad en la clase modelo, ¿verdad? Entonces notas que está usando una expresión lambda. Y parecía modelo esa rodilla, modelo de código de punto, modelo de créditos de punto. Y sabe de estos por el modelo que se especificó. Entonces si cambio este tipo de modelo solo para ser provocativo un poco, si lo cambio a estudiante, entonces note que esto empieza a iluminarse porque ninguna de estas propiedades pertenece a este tipo de datos del modelo. Entonces es muy, muy sensible, está muy fuertemente escrito y muy sensible al tipo de datos que están usando aquí versus las propiedades a las que estás aquí versus las propiedades a las accediendo. Yo revierto. Verás que las luces se van. Lo que estamos haciendo aquí es que estamos especificando para la mesa. El encabezado. La primera fila debe tener columnas de encabezado de tabla que especifiquen un nombre llamado y créditos. Entonces tenemos un th en blanco, y veremos por qué esa está en blanco. Entonces bajaremos al cuerpo. Entonces esa es la cabeza. En ninguna parte del cuerpo de la mesa. Para el cuerpo, estamos usando un bucle foreach. Y recuerda que cada vez que queramos C-Sharp en el HTML, solo necesitamos un signo at y luego podemos escribir nuestro código C-Sharp. Entonces aquí estamos viendo para cada artículo en modelo. Entonces modelo aquí es el objeto real que toma el tipo de datos que se especifica aquí arriba. Observe la diferencia, éste está en el modelo sinusoidal. Este es el modelo M mayúscula. ¿Está bien? Entonces aquí estoy diciendo, consígueme cada ítem en este modelo o en este objeto que sea de tipo colección, por supuesto objetos. Ahora conocemos ese bucle. Entonces, la mejor manera pasar por las colecciones, ¿verdad? Así que pasa por la colección y para cada una que encuentres, crea una nueva TR o fila de tabla, y crea una columna que muestre el nombre, una columna que muestre el código, o columna que muestra los créditos. En realidad, en realidad podría decir al firmar créditos de punto de artículo, ¿verdad? Así que realmente ni siquiera necesito decir display para lo estos métodos de ayuda realmente nos ayudan es la forma en que se muestra, porque a veces quieres una pantalla especial para como una casilla de verificación. Si es un booleano, entonces esto generará una casilla de verificación. Si lo escribimos manualmente, entonces en realidad imprimiría la palabra true, ¿verdad? Entonces por eso nos gustaría usar esto a veces. Cuando queríamos realmente mostrar dinámicamente un control que sea apropiado para el tipo de datos de la propiedad. Así que solo te estoy mostrando las opciones, ¿verdad? Entonces, para estos valores de cadena y numéricos, probablemente no necesitemos consideraciones especiales. En realidad podríamos simplemente decir, yo diría item dot model manualmente. Pero entonces para los booleanos y algunos otros, probablemente querrás permitirles que generen eso para ti. Entonces tenemos el td que coincide con el MTT H, y ese tiene las acciones. Entonces tenemos un botón de opción para editar un botón de acción para detalles de un botón de acción para eliminar. Noto que todos ellos escriban a las acciones correspondientes. Bien, pero también están pasando, eso es P dash root dash ID value, que es item dot id Entonces, ¿cuál es la relevancia de eso? Recuerda que en el controlador para, Echemos un vistazo al método de edición. Si miramos el método de edición, el EDI obtiene, está esperando ese ID. Entonces eso significa que cualquier enlace va a estar llamando a este método de edición necesita pasar ese id Entonces es por eso que tenemos que decir SP dutch root dash ID. Porque una vez más, es una identificación. Si decían cachorro, entonces tendríamos que ver ASP dash, dash puppy. Así es como funciona. Por lo que la encuadernación sucederá automáticamente. Y entonces el valor que estamos pasando es el valor id del ítem que se está procesando en ese rol en particular. ¿Está bien? Y lo mismo sucede para los detalles y eliminar. Y eso es todo para la página de índice. Ahora veamos la página Crear porque está vacía. Entonces queremos crear un registro. Eso es probablemente lo primero que queremos hacer. Ahora aquí tenemos una forma. Y es un concepto muy similar donde no, está haciendo un modelo, pero fíjate que estamos especificando nuestro modelo arriba. Pero en el controlador en realidad no le dimos ningún dato, ¿verdad? Todo lo que hicimos fue vista devuelta sin datos. Entonces, ¿por qué estamos especificando un modelo en esta página? Bueno, porque es un foro donde especificando qué tipo de objetos queremos formar para rellenar mi especificar un modelo aquí arriba, podemos usar eso para establecer el tono o establecer el contexto para el resto del formulario. Así que comenzamos con saltarse las partes comprensibles estándar e ir directamente a la pestaña del foro. El formulario aquí va a devolver ASB acción igual crea, equivale a calificaciones. Entonces eso significa que una vez que se envíe el formulario, intentará ir a la creación y por defecto hará un envío posterior, ¿verdad? Por supuesto que normalmente verías algo así como método es igual a post. ¿Está bien? Pero entonces eso está implícito. Entonces no necesitamos decir eso. Y sabe que cuando se envíe irá al Create. Y ya vimos que tenemos que crear el get, y luego tenemos el post. ¿Está bien? Entonces después de que haya hecho eso, después de que declaramos un formulario más bien, hay una sección aquí que dice, ¿deberíamos mostrar el resumen, el resumen de validación que viene bien cuando esto es falso? si la validación falla y devolvemos la vista con los datos, esta sección realmente imprimirá qué campos faltaban, qué datos, ¿verdad? Por lo que viene muy bien. Echemos un vistazo a algunos de los controles. Entonces este es un formulario de arranque estándar. Si querías ver más sobre los formularios Bootstrap, siempre puedes consultar la documentación y ver cómo te recomiendan que diseñes tus formularios. Entonces las partes clave aquí, tenemos la etiqueta y notamos que esto es ASP por nombre. ¿Cuál es su nombre? El nombre viene del modelo. Entonces esto es ASP o la etiqueta para la propiedad name del modelo que se especificó, que es similitud de curso para las entradas tenemos el ASP para Nim, que significa que cuando sea cual sea el valor que pongas aquí, automáticamente va a vincularse a la propiedad name para el objeto. Por supuesto, cuando nos sometemos, entonces ese nombre propiedad viene por aquí y podemos acceder a ella a través de nuestros objetos. Así que eso es todo fluye, ¿verdad? Soy más o menos ese es el caso de todas las otras propiedades. Tenemos el hueso de entrada para codificar, tenemos el hueso de entradas, dos créditos. Muy bien. Ahora esto también generará el mejor tipo de control, control HTML para el tipo de datos. Así que fíjate que no estamos especificando el tipo de entrada ni nada por el estilo. Solo estamos viendo entrada y ESP para el campo. Bien, así que si tenemos un booleano, entonces generaría automáticamente una casilla de verificación. Así de poderosos son estos, estos ayudantes HTML cuando estamos tratando con páginas de Ariza. ¿Está bien? Entonces tenemos nuestro botón de enviar. Una vez que se haga clic en eso, una vez más, se disparará un envío o ASP realmente crear. Y sabemos lo que pasa después de eso. Entonces una vez que hace eso, si es válido y todo, entonces recargamos la página de índice. Ahora, mientras en la página siguiente conmigo he hecho clic en los detalles. Entonces veamos la página de detalles. Así que recuerda que está en el controlador. Detalles va a tomar una identificación. Muy bien. Va a ir a buscar el registro y luego devolver la vista con esos datos. O página de detalles necesita saber uno, cuál es el tipo de datos que se espera. Entonces hará el mismo tipo de visualización, nombre y visualización para cada una de las propiedades. Entonces es por eso que en la página de detalles verás la palabra nombre y luego el valor que ese nombre tenía la palabra cord, y luego el valor que se puso en core, la palabra credits, y el valor que se puso en créditos. Entonces eso es todo los detalles que está haciendo. Entonces al final de eso, podemos optar por ir a la página de edición donde especificará una vez más el valor de ID de ruta y pasará en el ID de punto del modelo. O podemos volver al índice y las dosis exteriores volver a enumerar. Ahora bien, si elegimos el Edit, entonces ¿con qué nos encontramos? Se encontraron con una forma que en realidad es idéntica a nuestra forma Crear, ¿verdad? Es la misma forma realmente y verdaderamente, solo hay algunas diferencias. Entonces el modelo va a ser el mismo. Una vez más, controlador. Cuando intentamos editar, va a, déjame encontrarlo rápido. Cuando intentamos editar, va a ir a buscar el disco y luego devolver la vista con ese registro. Entonces es por eso que cuando se carga la página de edición, tenemos datos en el formulario. También notarás que tenemos una entrada aquí en la parte superior del formulario para la identificación y es una información oculta. ¿Por qué es eso? Bueno, necesitamos saber el id cuando se envía el formulario porque hay comprobaciones en el post que aseguran que el ID que se envía o el id que entra, el parámetro aquí coincide con el id que se envió en el formulario, ¿verdad? Entonces aquí está el enlace para ID y por supuesto que id. Bien, entonces coincide con eso. En términos generales, necesitas la identificación cuando puedas hacer una actualización. Porque cuando el Entity Framework realmente lleva toda la actualización, este objeto necesita tener un valor id para que sepa que se supone que debe hacer una actualización y no una inserción. Bien, para un inserto, realmente no necesitamos el ID, así que es seguro eliminar este enlace porque no deberíamos permitir que alguien pueda enviar una identificación cuando esté la creación de un registro. Así que en realidad podría borrar eso. Bien, sin embargo, para las ediciones, es absolutamente necesario porque la base de datos necesita saber ese ID para que pueda cumplir con esa actualización cuando estemos recibiendo el cambio. Bien, bien dentro de eso, todo lo demás es más o menos igual que lo que vimos con la creación. Entonces claro que la acción es diferente porque va a ir al Edit Post. Y debido al enlace y al hecho de que se enviaron datos, las etiquetas de entrada automáticamente tendrán los datos que corresponden con el objeto que se envió durante la operación get. ¿Está bien? Pero fuera de eso, es más o menos la misma forma que vimos para el Create. Después pasamos a la Delete. Ahora bien, las páginas de borrar, bastante simples. Ya sabemos cuáles son esos. Simplemente va a ir y tratar de encontrar el disco igual que lo que pasó con las ediciones y los detalles. Y luego va a devolver la vista con el registro. No. Bueno, estamos bajo borrar páginas preguntando ¿Estás seguro? Y luego en realidad es solo mostrar los detalles del registro que somos capaces de eliminar. Entonces es realmente casi idéntico al discurso detallado. No obstante, hay un minúsculo formado aquí que nos permite uno, atar el ID del registro que está a punto de ser eliminado. Y luego a podemos hacer clic en Eliminar para enviar el formulario, o podemos abrochar la inclinación y volver a la lista. Entonces, si elegimos enviar lo que sucede este valle de Heidi repasa con la carga útil de datos a nuestro método delete post. Entonces cuando bajamos al método delete post, está recibiendo ese ID. Y luego está realizando esa operación de eliminación como se esperaba, y luego vuelve al índice. Y eso es prácticamente todo lo que hacen nuestros puntos de vista. Y vimos, hicimos unas pruebas de crud completo. Vemos que todo está cableado, todo funciona, todas las navegaciones funcionan entre las páginas y eso es todo muy importante. Sin embargo, necesitamos la herramienta de navegación, al menos la página de índice. Alguien es un jumbo con el diseño y ya hemos hecho esto antes. Así que sólo voy a hacer eso otra vez. Habíamos introducido la página acerca de. Yo sólo voy a copiar toda esa pasta. Y entonces esta vez el control ASP va a ser caballos. La acción ASB es índice. Y entonces los textos que vamos a ver aquí serían cursos. Bien, entonces ahora tenemos un nuevo ítem que al hacer clic irá a la acción de índice de nuestra página de cursos. Bien, para que puedas hacer esa modificación. Adelante y le pegué a correr dotnet y solo los pensamientos y déjame ver. Para un aldol, validamos que todo funciona y vemos como todo está cableado. Entonces, cuando regresemos, vamos a seguir adelante y repetir las actividades de andamios para nuestros otros modelos en nuestra base de datos. 24. Vistas y controladores de andamios: parte 2: Muy bien chicos, sepan que vemos lo fácil que es generar realmente funcionalidad de crud para soportar nuestras tablas de base de datos. Sigamos adelante y lo hagamos por los demás, ¿verdad? Entonces ya hicimos curso. Hagamos lo mismo. Yo sólo voy a hacer Turno de Control y apóstrofe para lanzar la terminal. Voy a deshacerme de ciertas cosas en la pantalla, así que tengo más bienes raíces. Y entonces vamos a repetir el comando que ejecutamos antes, que es dotnet ASP NET guion code generator controller. Podemos simplemente hacer modificaciones aquí porque queremos el mismo tipo de ajustes. La única diferencia es que ahora sería que no estamos tratando con cursos. Estamos tratando con, digamos profesores. Y entonces el modelo aquí sería conferencista. Y tenemos el CMD, todos son contextos el mismo relativo desmoronamiento. Todo lo demás es prácticamente lo mismo. Entonces, si hago eso, presiono Enter y luego dale unos segundos, entonces veremos que funcionó con éxito, ¿no? Entonces ahora hemos peleado en los controladores y puntos de vista para nuestra mesa de conferencias. Y sólo voy a hacer eso una vez más. Y luego lo puedes hacer por nuestros alumnos. Entonces los estudiantes controlador y estudiantes es el modelo. Pulse Intro. Y ahí vamos. Entonces ahora podemos volver atrás y vemos que tenemos controladores y vistas adicionales. Entonces por supuesto está bien conferencias de alumnos. Y en nuestra carpeta para las vistas, tenemos cursos, tenemos conferencias web enteras, hemos compartido, y tenemos estudiantes que escriben. El código es prácticamente el mismo. Entonces, la única diferencia importante que puedes esperar ver aquí sería que en lugar de ver un nombre de tabla, vas a ver otro nombre de tabla, ¿verdad? Vas a ver la misma inyección del contexto DB, el mismo tipo de código repetitivo, excepto que está buscando clases magistrales en lugar de estudiantes, está buscando cursos en lugar de profesores, etc. Entonces todo es relativo al controlador real y al modelo que se utilizó. Ahora bien, si quiero la navegación a cada uno de estos entonces y seguir su ejemplo y se asegura de que lo ponga así tengo la navegación del curso. Sólo duplicaré eso dos veces. Y voy a poner en una navegación para los conferencistas. Entonces éste debería ir a acción indexada del controlador de profesores. Y luego aquí abajo lo haremos por los estudiantes. Y eso es todo. Hagamos la ejecución de dotnet y probemos nuestra aplicación. Bien, así que cuando se lance nuestra aplicación, veremos que tenemos todas las propiedades de navegación. Entonces, si hago clic en cursos, ya hemos validado cursos. Podemos crear un nuevo curso, especificar un nombre. Entonces introducción al desarrollo web. Podemos darle un código CS101, y ese es un curso de tres créditos. Y luego creamos, y luego tenemos nuestro primer curso en el sistema, o al menos en este punto, el segundo curso en el sistema, ¿verdad? Al hacer clic en estos botones de navegación, también puedes tomar nota de la URL que se genera o Agregar Cursos slash edit slash two, Ese es nuestro id. Y entonces sabemos lo que está sucediendo detrás de escena, por qué estamos viendo los datos en cada una de estas páginas. Si traté de ir a detalles para un registro 20, entonces ahí es donde obtenemos eso por cien por error. ¿Bien? Entonces ese es el estándar, el comportamiento estándar fuera de la caja. ¿Bien? Por lo que hemos validado el curso ya está abarrotado. Validemos la multitud de conferencias para que pueda crear la primera conferencia en el sistema. Y su nombre es Troy para Williams. Ahora note que nuestras etiquetas aquí se ven literalmente como las etiquetas que están en la clase, ahí mismo en realidad el nombre de las propiedades de la clase. Entonces más adelante vamos a querer embellecer eso un poco. No necesariamente quieres la carcasa de camello o la carcasa Pascal aquí en el nivel de la pantalla. Pero para no, esto es validar que funcione. Entonces no hemos trabajado. Y claro estoy seguro que puedes seguir adelante y probarlo. Liso y detalles. Pero saltemos a los estudiantes. Y los estudiantes y el sistema serían, digamos Tyrone Cooper. Y luego notar Fecha de nacimiento, donde obtener un picker de fecha automáticamente sé que sí vi que la etiqueta de entrada inferirá el mejor tipo de control basado en el tipo de datos. Entonces, si salto a la página Crear para el alumno, ves que no le dice que debería ser un tipo de fecha. Es sólo ver entrada para ese campo. No. ASP.net core, cuando va a renderizar la página, sabe que es un campo de fecha. Por lo que está generando automáticamente la etiqueta de entrada con el tipo de fecha, fecha y hora local. Entonces eso es lo que está pasando detrás de escena. ¿Bien? Ahora bien, si no aporto un valor que se necesita, se nota que la validación me está saltando casi de inmediato. Si intenté hacer clic en Crear, no podré ir a ningún lado hasta que proporcione un valor, ¿verdad? Así que sólo puedo decir Cooper una vez más. Y luego cuando creo la fecha de nacimiento era opcional. Así puedo crear un alumnado sin ese valor particular. Si vuelvo a intentarlo y luego intento hacer clic en Crear, validación se ilumina y me dice que estos campos son obligatorios. Así que eso es una especie de validación completa está incorporada. Podemos extender esto, pero por ahora, creo que esto es lo suficientemente bueno para que protejamos la integridad de nuestros datos. Y es suficiente para que empecemos a hacer demoing este software. Ahora podemos ir a la escuela para la que estaban construyendo el software y decir, Oye, ya sabes, esto es una prueba de concepto, avísame si esto está satisfaciendo tus necesidades. Así que cuando volvamos vamos a extender un poco más nuestra aplicación. 25. Añadir a GitHub: Todo bien. Entonces, antes de seguir adelante, vamos a hacer un check-in o a comprometernos. Entonces siempre es una buena práctica que cuando alcanzas un hito te comprometas. Así que simplemente saltaré a la sección de administración de control de fuentes y diré que agregé vistas y controladores de base de datos y andamios. Ese es el mensaje del pollo. Entonces podemos seguir adelante y aquí están viendo que tengo demasiada información y agregado base de datos y vistas y controladores. Entonces la base de datos está en los controladores. Ahí vamos. Y entonces podemos comprometernos y empujar. Bien, ahora podemos pasar a embellecer o aplicación. 26. Personalización de vistas y elementos - visión general: En esta lección, nos vamos a centrar en embellecer un poco nuestra aplicación. Y cuando digo embellecer, si saltamos a algunas de nuestras páginas andamiadas, veremos que, sí, está usando poco el bootstrap, pero puede haber margen de mejora o botón Crear o botón de edición. Estos botones, los botones axones, son solo estándar. Entonces lo que nos gustaría hacer es probablemente entrar y tipo de embellecerlos un poco y arreglar algunos de los formatos aquí, poner algo de espacio entre estas secciones. E incluso para la mesa de aquí, esta es una mesa Bootstrap estándar, pero probablemente podamos embellecer de ella. Entonces, para toda esta sección, vamos a estar enfocándonos en agregar algunos elementos de diseño. Entonces, en la siguiente lección, lo que haremos es agregar un poco de estilo Bootstrap en las páginas y simplemente formatearlas un poco para que podamos tener algo más de apariencia de un usuario de aspecto más cohesivo interfaz. 27. Incorporación de estilos de boostrap: Bien, así que comencemos con algunos de nuestros botones en la página del curso, voy a cambiar el aspecto de estos enlaces. Lo genial de Bootstrap es que puedo convertir una etiqueta de ancla regular de enlace en un botón con bastante facilidad. Si salto por encima, déjame cerrar todo lo que sea necesario y voy a estar lidiando con los cursos. Crear nieve. Empecemos con el índice. Lo siento. Bien, está en la página de índice. ¿Qué tenemos? Tenemos la etiqueta H1 que dice índice. Índice, ¿de acuerdo? Por supuesto es que estoy cambiando el índice de palabras los cursos porque el índice de palabras significa mucho menos para alguien que hacerle saber que está mirando la página con los cursos. Entonces esas son pequeñas cosas. Pero dije embellecimiento. Entonces para la etiqueta ancla que nos permite navegar hasta el Create, lo que puedo hacer es agregar algunas clases de Bootstrap. Si quieres saber que la clase es una vez más, siempre puedes ir a la documentación de Bootstrap y ellos pueden mirar los botones. Pero conozco algunas de ellas de memoria porque es muy consistente y muy fácil de usar. Entonces primero que puedo ver btn. Btn, vamos a transformar esto para que ese enlace parezca desaparecido, ¿verdad? Entonces puedo especificar qué tipo de bt y deseo la casa. Entonces para nuestras crea tal vez me gustaría algo así como botones verdes para poder decir BTN, Dash éxito. Y si recuerdas la paleta de colores, el éxito nos dará un botón verde. ¿Bien? Y entonces incluso puedo personalizarlo un poco. Poner ahí un signo más, emprende lo que sea. Eso depende de ti para la parte del texto, pero solo te estoy mostrando lo fácil que es transformar enlace de aspecto irregular en un bonito elemento visual que parece un botón. Y sigue funcionando porque si hago clic en él, todavía vamos a ir a esa página. Entonces hagamos lo mismo por los detalles y eliminemos. Ahora lo genial es que podemos hacerlo una vez porque siempre están repitiendo en base a eso por derecho. Entonces no tengo que hacerlo para todos los discos, solo hago bucle una vez. Entonces aquí, más es igual a btn. Eso es Edit vendido probablemente darle a eso una playa en advertencia holandesa. Yo solo escribiré estos para que después solo puedas mirarlos una vez. Entonces BTN dash warning, éste, le voy a dar un BTN primario. Déjame alejarme un poco. Y luego para eliminar, le voy a dar a éste un BT y peligro. Bien, ahora ¿qué significan estos? Cada uno de estos representa un color en la paleta de Bootstrap. Entonces no puedes volver a ir a mirar los colores, pero siempre va a ser, perdón, una advertencia siempre va a ser una especie de REM slash primarias Amber, pero para darnos ese tono de azul y delete nos va a dar ese rojo. ¿Bien? Y entonces puedo tomar todas esas pipas entre estas barras. Estas barras, las puedo sacar. Y si, eso se ve mucho mejor. Bien, entonces no, cada curso que se crea. Entonces si entro aquí y digo dame un nuevo curso, volvamos al desarrollo de código abierto. El código es CS1 o dos, y los créditos serán dos créditos. Y luego hago clic en Crear, entonces verás que tienen esa consistencia. Con todo el aspecto de los botones, cuantos más botones entren es más colorida y más atractiva esta interfaz de usuario comienza a volverse, verdad. Entonces eso es para la página de índice, al menos por ahora, ¿verdad? Puedes ponerte tus propias personalizaciones ya que sientes que incluso puedes usar colores diferentes a los que estoy usando aquí. Eso depende completamente de usted y mantenga su visión para sus cromosomas de aplicación. Pasemos a la playa de creación. De crear es él crea y cualquiera por supuesto, y entonces tenemos los cuadros de texto, ¿verdad? Así que saltemos para crear. Y lo que voy a hacer en primer lugar es fusionar estas herramientas. Así que crea curso y deshazte de esa edad para Todd, Deja el HR. Y luego para las entradas, voy a poner un poco de BR entre estos rojos. No los quiero tan cerca el uno del otro. Entonces en la forma, solo estoy poniendo ese puente entre cada div de grupo de formularios. Ella es ese div form-grupo, luego BR, y luego form-group div otra vez, BR, etc. Ahora después de hacer eso, el formulario parece un poco más de espacio aunque. Tenemos un line up top que es obvio. Crear curso, ¿verdad? Y luego para los botones, lo que voy a hacer es, lo que pasa es que esto no es un grupo de formulario. Ese es el botón Crear. Facilidad fácil de usar BTN primaria. Y luego volver a Lista es una etiqueta de anclaje por sí misma. Así que en realidad solo voy a tomar esta etiqueta de ancla, ponerla en el mismo grupo de forma, y luego puedo darle una clase. Y llamémoslo btn, btn dash, dark. Bien, entonces ahora cuando lo miro hacia atrás, mira eso. Entonces no, puedo crear un curso, rellenar el formulario, bien, y luego puedo o bien crear o puedo volver a Lista. Para que a mi me parezca un poco más limpio para esta forma. Bien, y si hago clic de nuevo a la lista, simplemente vuelve al formulario de edición es muy similar al formulario de creación, ¿verdad? Entonces creo que aquí podemos hacer el mismo tipo de modificación. Entonces solo voy a copiar esta modificación de etiqueta de anclaje, pasar a Editar. Voy a quitar este porque van a ir al mismo espacio de todos modos, a la misma URL. Entonces el mismo ancla. Volviendo a enumerar este, voy a hacer btn warning y voy a decir Guardar cambios. Entonces ese es el texto del botón que quiero en el formulario de edición. Y quiero que sepas que cuando eres un rayo para hacer eso, cuanto más corto, eso es lo que quieres hacer. Entonces estoy haciendo esa advertencia y tenemos ese mismo botón negro que vuelve a LR. Y luego para el formulario en sí, necesito editar aquí arriba. Entonces esto va a decir Editar Curso en una línea. Y podemos agregar algunas etiquetas break. Eso es lo que sucede cuando pierdes click. Así que agreguemos algunas etiquetas BR entre nuestras secciones de grupos de formularios. Bien, ahora después de hacer todo eso, ahí vamos. Editar Curso, llamado eso, ese uno más antes de la sección de botones. Bien, ahí vamos. Bien. Entonces ahora sabes que si guardas los cambios, asegúrate de que eso es lo que quieres hacer y podemos volver a esto. Muy bien, hasta ahora se ve bien. Entonces volvamos a Lista y luego tomemos todos los detalles discurso en la página de detalles, la interpretación de cómo quieres que se vean los detalles. Eso es más nuevo. Realmente me voy a centrar en el diseño aquí. Entonces solo voy a decir Detalles del Curso arriba. Y podemos quitar eso para el, así que esto es lo que llamaremos una tabla de datos en HTML. Y tienes básicamente a d t, y la d, o d d, ¿verdad? Entonces lista de datos, y luego tienes las filas de datos y las columnas de datos. Bastante. Esto sería lo que es la etiqueta y luego estos serían los datos reales. Si quieres modificar eso puedes. Su interpretación de esto, por supuesto, es relativa a cómo se siente acerca de esta página. No voy a modificar el diseño en sí. Lo que voy a hacer es enfocarme en los dos botones que vemos aquí que tenemos. Eddy retroceda la lista. Entonces sólo voy a reutilizar las clases que tenemos. Btn, btn dash advertencia si quieres ir al final. Y para buck para listar btn, btn dash dark. Bien, y quitará esa tubería de entre ellos. Y entonces esos son los detalles. Así que no estoy dispuesto a hacer demasiado aquí. Si volvemos a Lista y luego podemos hacer más con la eliminación. Eliminar nos mostrará algo al igual que la confirmación, la página de detalles, lo siento. Y luego o bien confirmamos o eliminamos o volvemos a la lista. No voy a modificar la página de eliminación porque más adelante en realidad vamos a modificar la funcionalidad de eliminación de tal manera que cuando una persona haga clic en eliminar desde aquí, le indiquemos. ¿Estás seguro? Y luego si lo confirman, y entonces nosotros simplemente seguimos adelante y lo hacemos. Entonces ese doble salto donde ves y luego borras, voy a estar quitando eso. Entonces no voy a gastar ninguna energía modificando esta página. Pero no, creo que tenemos mejor aspecto y sensación a nuestro sitio web, es más colorido. Y estos colores por supuesto, cuentan una historia. El color es informado usuario lo que podría Ofwat que podrían estar haciendo cuando eligen esta opción en particular. Si quieres otros colores, claro, puedes echar un vistazo a los palets bootstrap, ver qué otros colores hay y qué estudiosos son fáciles de usar y usarlos o personalizarlos en base su preferencia o necesidades de branding? No. Mientras tanto, te animaría a que sigas adelante y hagas la misma eutrofización para profesores y alumnos por los que acabamos de pasar juntos por cursos. Mi reto para ti es seguir adelante y agregar tus propios elementos de estilo a los profesores y estudiantes basándonos en nuestros puntos de vista. Ahora en la siguiente lección, lo que vamos a hacer es implementar esa funcionalidad de eliminación más dinámica. Y te veré entonces. 28. Eliminar el uso de jQuery: Bienvenidos de nuevo chicos. En esta lección, vamos a estar implementando una operación de eliminación más dinámica. Ahora la realidad es que para la eliminación, no necesariamente necesitamos eliminar y luego pasar a otra página. Por otra parte, a pesar de que es una buena medida para asegurarnos que estamos seguros que ambos estamos borra el registro del carrito. Pero lo que queremos hacer es permitir que el usuario simplemente confirme aquí mismo. Y luego una vez que confirman, seguimos adelante y hacemos la eliminación en segundo plano y luego recargaremos la página. Bien, entonces lo que vamos a hacer es implementar una pantalla de confirmación. Voy a estar usando esta biblioteca llamada suites alertas. La alerta de asientos es una biblioteca muy útil que nos permite crear unas bonitas indicaciones que en realidad tienen una muestra. Y sólo voy a ir directo a la muestra que vamos a estar usando, que es un diálogo confirmado con un botón de confirmación. Entonces cuando decimos Pruébame, lo verás aparecer y solo pregunta, ¿ Estás seguro de que no vas a poder revertir esto? Por supuesto, podemos personalizar y los mensajes que surjan. Y luego podemos permitir que el usuario confirme la eliminación o que cancele lo que estaba a punto de hacer. Entonces aquí está el código de muestra que necesitamos, ¿verdad? Entonces comencemos con la instalación. Así que sólo voy a saltar por encima a la página de instalación y nos van a esbozar que lo instalen. Podemos usar npm, pero no vamos a usar npm. Sólo vamos a usar el enlace CDN que nos ofrecieron. Un CDN es más o menos una versión alojada fuera del archivo script o activos que necesitarías para usar la biblioteca, ¿verdad? Entonces podemos usar una CDN. De lo contrario, podríamos ir a obtener los activos reales, los archivos J, S y así sucesivamente y ponerlo en el proyecto. Pero como dije, solo usaremos la CDN. Entonces, cuando copiemos esto, simplemente saltaremos de nuevo a nuestro Visual Studio. Código. Los proyectos que no se esquilan en las vistas van a maquetación. Y vamos a poner el enlace de CDN aquí mismo en el layout. Voy a ponerlo después del jQuery porque depende de jQuery. Entonces el orden importa. Tiene que venir después del jQuery. ¿Está bien? Entonces jQuery, luego esto, y luego los otros archivos de script que tenemos. Muy bien. Entonces después de que lo hayamos incluido, solo con ese simple copiar y pegar, porque esta URL realmente cederá. Déjame mostrarte que en realidad nos llevará a los ojos que se sienta ahí mismo. Ese es el archivo script al que siempre se hará referencia una vez que la CDN esté ahí. No, podemos seguir adelante y usar la muestra en nuestros sitios web. Entonces estoy dispuesto a pedir prestado este código. Voy a saltar de nuevo y comencemos con caballos, ¿verdad? Página de índice. Ahora bien, hay varias formas a lo largo del script Java en R se debe hacer en la aplicación principal, ¿verdad? Podemos escribir el JavaScript aquí mismo en el layout. En qué punto es más global porque, por supuesto , la página de diseño es para cada página, pero entonces no necesariamente queremos que el JavaScript active o esté disponible en cada página. Entonces, cuando queremos que esté disponible en cada página, colocamos aquí globalmente, ¿verdad? Ya sea que estemos listos para ir a nuestra propia sección de script, o estamos haciendo referencia a un archivo de script completo. Podemos hacerlo globalmente en esta sección. Pero también notarás que debajo de todo eso, tenemos esta cosa llamada sección render. Y a esta sección se le va a llamar guiones. Ahora, ¿qué significa esto? Significa que en cualquier vista que quiera que se ejecute un código JavaScript específico o script, puedo invocar la presencia de esta sección en esa vista específica y escribir el código JavaScript que sea específico de esa vista . Por ejemplo, si solo quiero que mi dulce alerta esté disponible en la página de índice de los cursos. Sí, el enlace CDN es, o todo el archivo script está disponible globalmente, pero estoy invocando su funcionalidad solo en esta vista. Puedo crear esta sección al final del archivo. Normalmente lo pongo al final del archivo, pero va a generar dinámicamente ranurado. O decimos que me haría sección de ciencias. Y entonces llamamos a lo sexual por su nombre, que recuerden, se llama guiones. Esto siempre ve aquí guiones, ¿bien? Entonces puedo invocarlo por su nombre. Y luego ahí dentro puedo poner en mi etiqueta script y luego comenzar a escribir los JavaScripts que pretendo tener ejecutados para esta sección. Bien, así que primero voy a crear una sección completa de jQuery. Invocamos función. Y luego voy a ver a ese impuro. Entonces, cuando se hace clic en este botón de borrar, eso es lo que realmente quería. ¿Cómo voy a identificar esa necesidad de botones? Entonces si quieres un repaso en JavaScript, nuevamente, consulta mi curso de desarrollo web donde pasa por JavaScript. Pero siempre que quiera un elemento específico, necesito hacer referencia a él ya sea por alguna forma de nombre o alguna, alguna clase que creo que simplemente voy a darle otra clase. Yo solo lo llamaré profundo btn. Entonces esta es mi clase. No servirá para el propósito de darle ningún estilo. Sólo le estoy dando un nombre de clase, ¿verdad? Entonces voy a decir cuando se hace clic en este botón, así que signo de dólar y solo voy a usar jQuery por supuesto, punto lo siento, comillas, pero borra btn, derecho, dice conseguir el elemento que tiene la cruz eliminar btn. Y luego fui a registrarme, hago clic en eventos. Entonces onClick, quiero disparar esta función y voy a usar E para el argumento del evento. Muy bien, así que el objeto jQuery bastante grande. Y luego dentro de eso, somos nuestra función más bien. Y luego dentro de eso estamos viendo los eventos click en cualquier elemento que tenga la clase delete btn, que en nuestro caso es nuestro botón Eliminar real. Cuando eso pasa, no, puedo pegar ese código de muestra que acabamos de sacar del sitio web swell y simplemente formatearlo para que se vea un poco más sensato. Muy bien. Así que más o menos, déjame ir. Bastante. Estamos viendo que cuando se hace clic en esto, dispara este swale alertas, ¿verdad? Título. ¿Estás seguro de que no vas a poder revertir esto? Y es un icono de advertencia. Después mostramos el botón Cancelar. Entonces podemos establecer el color de confirmación y el color del botón de cancelar. Vemos que están volviendo al hexágono aquí, pero eso está bien. Y entonces puedes decir que sí, eliminarlo. Y luego si confirman, así que noten que no, está disparando primero esta parte, ese es el aviso. Entonces dice entonces evaluar los resultados. Los resultados serían lo que hacen clic cancelar nuestro confirmar. No. Dirán si se confirma, si el resultado es confirmar, es decir, hiciste clic en el botón Confirmar, entonces ¿qué hacemos? Bien, entonces lo que hacemos va a tener diferentes partes para ello. Lo que queremos hacer es en realidad disparar la eliminación. Podemos mostrar la confirmación, sí, pero en realidad también queremos disparar la operación de eliminación en el back-end. Entonces para ese tipo de operación, lo que tiendo a hacer es crear un formulario porque ya tenemos la funcionalidad, ¿verdad? Ya tenemos la funcionalidad en nuestro, estamos en cursos. Entonces déjame saltar por encima de eso por supuesto que está controlado y mostrarte lo que eso significa. Ya tenemos la funcionalidad donde aceptamos el id, ¿verdad? Y luego lo pasamos necesario, y luego leerá Erich para indexar. Así que realmente no tengo que escribir nada demasiado especial. En cambio, lo que voy a hacer es crear un formulario que sea similar al formulario real que está aquí en el método delete. Bien, así que solo voy a copiar esto aunque, necesito de todo en él. Sólo tienes que copiarlo. No necesito un dólar para enumerar. Ni siquiera necesito un botón de envío porque quiero usar un jQuery para hacer el envío en mi nombre. Muy bien, aquí es donde se pone emocionante sin embargo. ¿Está bien? Entonces tenemos nuestra opción ASB Eliminar. Y luego tenemos esta entrada que tiene un enlace para ID. Ahora estoy consiguiendo todos estos errores no aquí porque está diciendo que el ojo innumerable curso no contiene una definición de identificación, ¿verdad? El ojo innumerable aquí arriba, que es una colección, no tiene ID, por lo que tuvimos que hacer el forEach para llegar al elemento ID. Entonces una serie de ajustes aquí. Uno, necesito transformar esta etiqueta de anclaje en un botón, porque los botones envían formularios, no etiquetas de anclaje, ¿verdad? Si miras a través de todos los formularios, notarás que todos esos son entradas con tipos de carne o etiquetas de botón reales. Así que sólo voy a crear el nuevo elemento en vez de destruir el que está ahí. Quería crear uno nuevo. Entonces voy a decir botón. Vamos a darle un atributo data. Esta es una forma genial que le permite asignar realmente un valor a un elemento en HTML para que el valor que estoy asignando sea cualquier valor que sea el ID del ítem. ¿Está bien? Quería darte la misma clase porque por supuesto tiene que ser el botón Eliminar. Entonces como tengo eso como el botón Eliminar, lo voy a quitar de la etiqueta de anclaje. Y entonces le voy a decir que es tipo es igual a botón. Así que todavía no está tratando de enviar ningún formulario. Se supone que se sienta y escuche, ¿verdad? Y entonces sólo podemos decir botón Eliminar, texto. Muy bien. Yo sólo voy a marcar esta. Eliminar viejo para que no nos falte click. Entonces ahora tenemos un botón que tiene la clase delete btn. Y va a estar disparando nuestra dulce alerta. Siempre que se haga clic, sepa cuándo se hace clic. ¿Qué queremos hacer? Queremos tomar el valor id de aquí, conectarlo al formulario, y luego enviar el formulario para que no pueda, pasar al controlador y hacer lo que hubiera hecho de forma natural. Así que básicamente estamos afilados cortándolo. Estamos usando JavaScript para ayudarnos con estos atajos. Muy bien, entonces, primero modifiquemos las entradas. Entonces no quiero que diga es antes, en cambio tengo que darle una identificación. Entonces lo que pasa es que ASB para creo que lo miramos antes, configura automáticamente los atributos de ID y nombre para el elemento que dice que es antes. ¿Está bien? Así que en realidad podemos anular eso. Podemos colocarlas manualmente. Entonces puedo ver que esta es la identificación del curso. Ese es el nombre o ID del elemento más bien. Y entonces el nombre aquí solo sería Id. ¿Está bien? Id, porque esto necesita coincidir con el parámetro esperado aquí. ¿Está bien? Entonces ahora lo que podemos hacer es cuando la persona confirme que está haciendo esta eliminación, ¿bien? Puedo decir que se borra. Pero realmente y verdaderamente, quiero decir que consígueme el botón en el que se hizo clic. Entonces var botón es igual a. Y luego solo usando el signo de dólar, esto me dará el objeto que disparó el evento, que fue el botón en el que se hizo clic. Entonces quiero conseguirme el ID del botón. Entonces voy a decir BTN dot data y conseguirme el Id. ¿Está bien? Así que cada vez que uses esos atributos de datos en tu HTML y quieres obtener lo que hay en esos atributos de datos como el valor. Entonces en JavaScript siempre se puede decir get the element dot data y luego la clave para esos datos. Entonces data dash ID convierte a la TI en esa clave. Bien, entonces ahora que tengo los datos del botón, voy a ver disparar el petróleo antes de que nuestro fuego salga del formulario. En realidad, necesito darle el valor a esto. Así que hay un número de pasos, pero vamos a simplemente desplazarnos hacia atrás por ellos para asegurarnos de que estamos en esto en el camino correcto. Entonces signo de dólar, abrir, subir, comillas. Y entonces este es el id del curso, hashtag, ID del curso, ¿verdad? Luego establecemos el valor de ese ID de curso de hashtag para que sea ese valor id desde el botón. Sólo lo estoy haciendo línea por línea. Todo esto podría hacerse en más o menos una línea, pero lo estoy rompiendo para que podamos ver todo con claridad. Entonces queremos enviar este formulario. Entonces lo que voy a hacer es darle a este formulario un valor de ID para que pueda llamarlo por su ID. Podemos llamar a esto un curso eliminar granja. ¿Todo bien? Y entonces lo que voy a hacer es decir que quiero presentar ese formulario o signo de dólar más bien. Y luego hashtag, el curso borra formulario de subredes de puntos. Bien, esta es una manera agradable y limpia y estamos aprovechando el código existente. Así que vamos a revisar exactamente lo que está pasando aquí. Uno, estoy cambiando esta etiqueta de ancla para que sea un botón. Cuando se hace clic en este botón, no intentará navegar por ningún lado. En cambio, disparará estos eventos de clic. Este evento de clic activará entonces un evento de alerta dulce donde avisaremos al usuario. ¿Estás seguro? Si dicen que sí, ¿ están seguros que esta parte es opcional? Para que podamos evaluar si realmente quisiéramos más adelante. Pero queremos obtener los datos, obtendremos el botón, luego obtendremos los datos del botón, que es el valor id en el que se imprimió. Muy bien, entonces data dash ID. Y luego queremos establecer ese valor id en el propio formulario y luego enviar el formulario. Aunque el comportamiento esperado es que una vez que establecemos este valor de ID aquí y luego enviemos el formulario completo, va a pasar a esa acción de eliminación con ese valor de ID. Y eso desencadenará esta operación de eliminación, que luego volverá al índice. Dará la ilusión de que se ha eliminado y se actualiza la página. No es una ilusión. Eso es en realidad lo que va a pasar. ¿Está bien? Así que he estado haciendo dotnet watch todo este tiempo. Vamos a saltar por encima y probar la sal. Entonces si vuelvo y creo eso, mira acabo de crear curso de galimatías, correcto. Y me está dando este desagradable error. Creo que eso es solo por el tipo de datos que se ponen. Entonces déjenme, creo que es éste porque limité el número de elementos en éste. Entonces déjame decir CBS, CW que creamos de nuevo. Ahí vamos. Muy bien. Entonces esas son las cosas a las que vamos a querer prestar atención a cómo manejamos esas excepciones, pero probemos nuestra nueva funcionalidad de eliminación. Entonces ahora tenemos este botón de borrar. Si hago clic en Eliminar, estamos recibiendo ese mensaje. Muy bien, entonces esa parte está funcionando. Si hago clic en Cancelar, no pasa nada. Déjame probar esto otra vez. Si borro y digo que sí, bérrelo. Nos dieron las indicaciones. Sí, se eliminó pero nos refrescaron de todos modos. Y ahí lo tenemos. No, no hay doble salto. Simplemente obtenemos una confirmación simple. Y luego de cualquier manera ya sea confirmar o cancelar. Muy bien. Entonces ahora mi reto para ti es modernizar la otra página de índice es tener un comportamiento similar, ¿verdad? Modificar ese botón de borrar de tal manera que utilice una alerta dulce te solicita, tienes que poner en el formulario, poniendo los diferentes botones, cosas que tienes esta muestra para salir de. Así que ahora puedo eliminar esto, esta etiqueta de anclaje, y este es ahora mi botón Eliminar. Y ya ves, aunque esto es un botón y estas son etiquetas de anclaje, si no te mostrara el código, no lo sabrías. No hay manera de saber cuál es cuál. Así que déjame reconstruir. Ahí vamos. Entonces no hay manera de saber cuál es una etiqueta de anclaje y cuál es un botón a menos que inspeccione elemento o haga algo muy intrusivo. Y si hacemos inspeccionar elemento, veremos aquí que el valor de id de datos aquí es tres. Al igual que whoa, la URL habría tenido un tres en ella. El elemento data ID tiene tres, así que agarra eso y luego lo coloca en esta forma, que sé que está en blanco, ¿verdad? No tiene valor en ello. Pero una vez que hacemos clic en eliminar, ese valor se coloca ahí y luego se envía. Y ven aquí, esa es la ficha anti falsificación de la que habíamos hablado antes en el curso. Entonces eso es muy importante para la seguridad porque no quieres que la gente pueda simplemente enviar solicitudes de eliminación para elemento con el ID tres. Bien, por lo que esto es muy importante para la protección donde este token anti falsificación se valida en el momento en que se realiza la solicitud antes de que se lleve a cabo la eliminación. Entonces por eso recomendaría que aprovecháramos esa forma para ese tipo de operación. Cada vez que vamos a aumentar los datos, siempre debemos usar un formulario. Entonces ahora que tenemos una operación de eliminación más interactiva, podemos pasar a crear más tablas interactivas. Entonces, cuando volvamos, veremos cómo podemos mejorar la visualización de ArrayLists usando tablas de datos. 29. Añadir ficables de datos: En esta lección, estaremos instalando tablas de datos, que es una biblioteca basada en jQuery que amplía la funcionalidad de nuestras tablas típicas. Ahora, aquí hay un ejemplo especialmente afinado para Bootstrap five. Bien, y puedes llegar ahí yendo a lidiar con datos tables.net slash ejemplo slush styling slash bootstrap file dot HTML. Entonces a partir de aquí verás que así es como va a transformar nuestra mesa para que se vea. Viene con paginación y viene con la capacidad de mostrar más o menos entradas a la vez y una búsqueda dinámica. Entonces si busqué algo con las letras TR, empezará a filtrar de inmediato. Desde una forma muy genial de hacer que nuestras tablas se vean más atractivas y más impulsadas por datos. A continuación, también muestran cómo podemos hacer la integración. Entonces tenemos que hacer esta línea de inicialización en JavaScript. Tenemos la muestra de la tabla en HTML, vamos a tener donde no me falten mesas, así que está bien. Y entonces tenemos los activos CSS que se necesitan, ¿verdad? Entonces comencemos con las partes de JavaScript. Nos dieron algunos enlaces de CDN. Entonces el primero que necesitamos es jQuery. Ya tenemos jQuery porque eso salió de la caja con nuestros proyectos y simplemente vuelven a saltar al layout. Podemos ver que ya tenemos jQuery. Eso está bien. ¿Qué más necesitamos? Necesitamos el enlace CDN al archivo de tablas de datos jQuery, y necesitamos un enlace CDN al archivo Bootstrap JS. Entonces lo que voy a hacer es duplicar estas dos líneas. Son esa línea para dulces alerta. Y luego sólo voy a copiar los nuevos enlaces de CDN en. Bien, entonces son dulces alerta. Entonces el siguiente, el primer duplicado, voy a reemplazarlo con el enlace CDN dos tablas de datos min. Y luego el segundo voy a sustituir igual. Bien. Así que ahora tenemos los archivos JavaScript para tablas de datos incluidos en nuestro archivo de diseño. A continuación necesitamos el CSS, y también nos están dando los enlaces de CDN. Y una vez más, es importante seguir el orden que los están listando en el CSS. Puedo ir todo el camino hasta la cima y simplemente duplicaré el bootstrap. Así que lubrica el de Bootstrap. Y luego tomaremos el primer enlace CDN para el archivo CSS y reemplazaremos la primera referencia CSS de Bootstrap duplicada. Y luego tomaremos este y volveremos a hacer lo mismo. Bien. Entonces, debido a que las tablas de datos requieren bootstrap fuera de curso, primero necesitamos la hoja de estilo Bootstrap. Y luego podemos poner en la muñeca. Y luego nuestro propio sitio, CSS viene último. Porque entonces si lo necesitamos para anular algo en los tres primeros, podríamos hacerlo en nuestro propio archivo CSS. Bien, y entonces éste viene incluso por debajo de ese archivo CSS. Entonces eso está bien. Entonces ahora que tenemos los activos incluidos, háganoslo saber, miren cómo lo inicializamos. Entonces, si salto de nuevo al ejemplo de JavaScript, mostrar que una vez que el documento esté listo, entonces podemos simplemente inicializar la tabla de datos. Así que voy a copiar eso y voy a saltar de nuevo a cursos que es como son cultivados 04 o funcionalidad innovadora. Y lo que tenemos aquí es una mesa con la mesa de clases. Entonces voy a usar la tabla de clases para identificar la tabla que ya está en la página. Bien, entonces lo que puedo hacer ya tengo este método jQuery o función ejecutándose. Entonces voy a colocar esa inicialización para la tabla de datos ahí mismo. Entonces tenemos el evento click, que es que está registrado cuando la página está lista. Aquí vamos a hacer lo mismo con una tabla de datos. Pero el elemento al que nos dirigimos es la tabla de puntos, es decir, cualquier elemento que tenga la tabla de clases, que sí tenemos un elemento con una tabla de clases. Bien, así que cuando lo haga, echemos un vistazo a la página de cursos después de esa modificación o derecho. Si lo miras, verás que no, estoy consiguiendo todos esos los elementos visuales que acabamos de ver. Y puedo hacer clasificación. Puedo ordenar por nombre, puedo ordenar por código, o puedo ordenar por el número de créditos. Yo puedo. Esta no toma ninguna búsqueda porque esas son todas iguales. Si quería filtrar, puedo ver abierto y se filtrará automáticamente, ¿verdad? Así que así, he transformado esto. Es decir, ya era una mesa guapa en virtud de ser un tema Bootstrap. Pero era algo sencillo. Bien, he transformado esta tabla de plano en una tabla de datos solo incluir una línea de código después de ponerla en los activos. El patrimonio. Esa es una actividad de una sola vez porque ¿adivina qué? Puedo hacer esto en cada página que tengo una tabla que quiero que se muestre como tabla de datos. Entonces tomemos, por ejemplo, los cursos. Veamos las conferencias de literatura. Sin modificación. Las conferencias siguen sonando. Si quería modificar eso, solo voy a la página de índice cuatro conferencias, y ya la he modificado para hacer las cosas de las alertas dulces. Así que voy a enchufar este nuevo código de tabla de datos en esa sección. Y luego voilá, Solo deja que se transforme. Ahora bien, la desventaja las tablas de datos fuera de la caja es que, bueno, la forma o aplicación está escrita, en realidad está haciendo una estrella selecta todo el tiempo. Entonces, si tenemos 1500500000 registros, no importa cuántos registros, siempre van a intentar cargarlos todos en la página una vez. Lo bueno de las tablas de datos es que automáticamente nos permite pasar páginas y limita el número de elementos que se muestran a la vez. No obstante, al final del día, todavía va a tener los 500 mil registros en la parte delantera. Entonces ahí es cuando empiezas a pensar en las actividades de paginación del lado del servidor y así sucesivamente. Para que en realidad solo traiga de vuelta el número X del número total de registros ya que nuestro sistema es tan pequeño, no me voy a preocupar por eso todavía. Pero esta es una buena actividad para simplemente limpiar todos nuestros elementos. Mira en nuestro p.sit. Entonces solo voy a agregar eso a la página de índice y luego podemos dejarlo en esta actividad. Una vez validamos esa transformación. En la siguiente lección, vamos a ver cómo podemos limpiar la visualización de nuestras etiquetas. 30. Incorporación de etiquetas personalizadas: Bienvenidos de nuevo chicos. En esta lección, vamos a estar viendo cómo podemos limpiar un poco la visualización de las etiquetas, ¿verdad? No, Las etiquetas nos están mostrando textos que idénticos al nombre de la propiedad, lo cual no es ideal porque no es realmente legible por humanos como programadores, nos parece bien porque eso es todo lo que tenemos para escribir el código. Pero a nuestros clientes y a los usuarios reales del sistema. Esto realmente no se ve muy bien, ¿verdad? Entonces lo que queremos hacer es arreglarlos de una manera que no tengamos que hacer esto manualmente en cada página porque tendremos que arreglarlo en el índice. Tendremos que arreglarlos en la creación y edición y detalles, etc. así que queremos arreglarlo una vez para que no tengamos que repetir eso. Ninguna solución sencilla a esto sería ir a la clase Data, correcto, para los estudiantes. Bien, comencemos con curso porque no somos estudiantes. Estudiantes porque en realidad tienen la carcasa Pascal, ¿verdad? Entonces usaré la clase del alumno para comenzar este ejemplo. La solución simple sería agregar anotaciones aquí, porque podemos ver fácilmente esta obra. Y luego establecer el nombre. Entonces solo incluimos que falta usando referencia qué anotaciones de datos hay al componente de punto del sistema es anotaciones. Y entonces podríamos ver que el nombre es igual a y establecemos el valor que queremos, que sería el nombre del primer espacio. Sólo con hacer esto. Bien, con solo hacer esto, si actualizo la interfaz de usuario, verás que no, tiene nombre de pila. Si voy a crear un nuevo nombre de primer espacio, bien, así que esa es una solución para cada raro que se muestre esto. Y eso es porque esta anotación de datos es lo que informará al real. Cuando teníamos nuestra mesa, teníamos nombre para mostrar para ello. Ahí vamos. Bien, así que eso son cursos. Déjame mostrarte eso en el índice para estudiantes. Bien, así que muestre el nombre para FirstName. Entonces a pesar de que ese es el elemento, el nombre para mostrar va a tomar sus instrucciones de esta anotación. Conoce esto funciona. La desventaja aquí, sin embargo, es que si la base de datos cambia y vamos a tener que correr fold o elementos, todo se restablecerá y entonces eso no es mantenible. Eso sería un esfuerzo desperdiciado porque cada vez que cambia la base de datos, tenemos que volver a regañar y cada vez que volvemos a regañar tendríamos que pasar por y hacer esto de nuevo. Y eso es literalmente una pérdida de tiempo. Ahora la solución a esto es crear una clase extendida de esta clase. Bien, entonces uno, todos los elementos que se generaron a partir de la actividad de andamiaje donde parcial, escriben los modelos son todos parciales, incluso el contexto DB es un parcial. En C-Sharp, un parcial significa que puedo tener múltiples planos del mismo archivo. Bien, así que aquí están los planos que nos dio EF Core. Pero entonces puedo crear otro plano que complemente a este. Y eso es lo que vamos a hacer para remediar la situación. Entonces voy a crear una nueva clase y la voy a crear en la carpeta models. Y usted presenta, quiero llamarlo datos de estudiante. Y entonces necesito mi espacio de nombres, que va a ser, y soy muy vago. A veces solo voy a pedir prestado todo eso y decir namespace, nombra modelos de puntos. ¿Bien? Entonces tenemos nuestra clase, que son datos de estudiantes. ¿Bien? No, claro que esto es público, clase pública. ¿Verdad? Ahora bien, en nuestra clase pública, datos de mentores de estudiantes, en realidad puedo definir propiedades que coincidan con el alumno original, ¿verdad? Entonces digamos que quería estos tres elementos y estoy usando estos tres porque id, realmente no necesito anular nada con ID. ¿Bien? Entonces voy a usar estos tres y colocarlos aquí. Entonces puedo sentar mis anotaciones para poder decir display. Y el nombre es igual a. El nombre es igual a. Y por supuesto necesito mi falta usando declaraciones. Ahí vamos. Y entonces este va a ser el primer espacio de nombres. Y luego solo voy a copiar esto y reutilizarlo para apellido y fecha de nacimiento, arreglar el formato por supuesto, y luego ajustar el texto que se está visualizando. Por lo que la fecha de nacimiento obtiene fecha de nacimiento, las especies alimenticias y el apellido se pierde el nombre del espacio. Bien. Entonces ahora los hemos definido y también podemos hacer otras cosas como validaciones específicas, ¿ verdad? Entonces si yo quisiera. Para poner en eso, bueno, esto nunca debería ser más de 50 caracteres cuando se ingresa en la interfaz de usuario, puedo poner en longitud de cadena 50, ¿verdad? podría afirmarlo. Bien, en la interfaz de usuario, lo mejor no está en la base de datos, tanto en la interfaz de usuario. Quiero cumplir con esto requerido, ¿verdad? Entonces esas son cosas que podemos hacer para forzar validaciones y pantallas en el lado del cliente o en la interfaz de usuario, ¿verdad? No voy a hacer que sea necesario que solo estoy mostrando y no necesito que esto sea una longitud de cuerda 50, así que está bien. Entonces ahora que tenemos ese archivo de metadatos, ¿Cómo asociamos esto con el modelo de datos real? Bueno, justo debajo de él, en el mismo expediente, sólo voy a tener una declaración de alumnos públicos de clase parcial. Así que recuerda, un parcial me permite tener el, las implementaciones son los planos más bien en múltiples lugares. Entonces esto va a estar en un plano vacío, ¿verdad? Pero cuando todo esté compilado, lo que ponga en este plano se compilará con lo que ponga en este plano. Y entonces todo va a ser solo uno grandes planos al final del día. Entonces no, necesito asociar este plano con los Meta datos del estudiante. Entonces voy a dar la clase parcial y anotación, ese es su modelo tipo de datos Meta. Es posible que deba incluir una referencia de uso. Entonces si obtienes un error, cuando empatas este modelo cumple con un tipo de datos, solo controlamos puntos y en las declaraciones de uso, ¿verdad? Entonces estamos viendo el tipo de metadatos de los estudiantes. Entonces este es el asociado, esta clase de metadatos con el parcial saber cuando voy a repasar y refrescar o páginas, no está funcionando. No está funcionando. Eso es porque estoy en el espacio de nombres equivocado. Bien, entonces puse el espacio de nombres basado en la carpeta. Quiero decir, obviamente, pero la clase parcial real está en un espacio de nombres diferente. Entonces para que este parcial sepa que es parcial al otro. Manera fácil de saber que es si yo Control haga clic en esto, va a decir que no hay referencias telefono, ¿verdad? Pero entonces si cambio estos datos, cambio el espacio de nombres a datos, y luego permito que se refresque cuando haga clic en él, ningún clic de control va a saber que, bien, hay un parcial de estudiantes aquí, y también hay un estudiante parcial aquí, ¿verdad? Entonces el espacio de nombres es muy importante. Podría decirse que podrías poner esos metadatos dentro de la carpeta de datos. La actividad de andamios realmente solo anulará los archivos, ignora un perno. Cualquier cosa que esté ahí ya no se eliminará, pero eso depende de ti. Simplemente dejaré esto como está y vamos a intentarlo de nuevo. Entonces cuando me refresque, ahí vamos. Entonces nombre, apellido, fecha de nacimiento. Y eso parece mucho más fácil de leer. Mucho más fácil de usar si voy a los detalles, También es hilo fijo. Si voy a Editar, También está arreglado. Así que no tengo que pasar por todas las páginas e hice ese cambio en HTML, haciendo un solo lugar y tendrá valor en todas partes. Entonces esa es una manera agradable y fácil de modificar la pantalla y las secciones de etiquetas de nuestra, bueno, la visualización en nuestra interfaz de usuario desde nuestras clases. Para que puedas probar lo mismo con la conferencia. Sigue adelante y crea esa conferencia y clase de MetaData. El parcial que recuerdo el espacio de nombres necesita coincidir. Y luego puedes agregar en tus propios nombres para mostrar y validaciones si es necesario. 31. Gestionar los cambios de base de datos: Bien chicos, así que recibimos comentarios de lo que hemos estado haciendo a través de la interfaz de usuario, funcionalidad, todo, y obtuvimos excelentes comentarios. A ellos les encanta. El cliente se muere por usar el sistema. Pero dijeron que, bien, antes de que podamos usar completamente el sistema, necesitamos dos características más. ¿Bien? Entonces, las dos características que están solicitando requerirán cambios en la base de datos. En este caso, quieren poder dar seguimiento a las clases. Y una clase la define un profesor que imparte un curso en un momento específico. Y luego quieren poder rastrear las inscripciones de estudiantes, lo que significa que un estudiante esté inscrito en una clase. Bien, entonces eso significa que necesitamos dos tablas adicionales. Ahora, tengo el Data Studio y ya estoy conectado a mi instancia ejecutándose en más oscuro. Así que puedes presionar pausa, traer tu Data Studio, encender tu oscuridad si es necesario. Si necesitas un repaso sobre eso, deberías tener una interfaz de usuario más oscura donde solo puedas ir a la lista de contenedores y puedes buscar tu Microsoft Container y que configuraste, solo puedo haga clic en el botón Reproducir. Y luego una vez que eso esté en funcionamiento, puedes seguir adelante y conectarte usando Data Studio. Y Data Studio generalmente hace un buen trabajo al retener los detalles de la conexión. Entonces ahora lo que tenemos que hacer es escribir un nuevo guión. Así que voy a sacar un guión nuevo y luego ya pueden ver estoy retomando donde lo dejé la última vez aquí. Pero en esta ventana de script, voy a empezar con unas declaraciones de uso, así que sabemos que necesitamos usar db de gestión escolar. Ahora lo genial de Data Studio es que puedes hacer esta declaración de uso, pero también puedes seleccionar la base de datos de esta lista desplegable de top. Tiendo a hacer esto independientemente porque a veces podrías olvidarte hacer esta parte y luego podrías terminar ejecutando un script contra la base de datos. Así que empieza siempre con tus declaraciones de uso. No, necesito crear dos tablas nuevas. Entonces voy a crear tabla y me vas a ver como romper la disciplina porque SQL no distingue mayúsculas y minúsculas. Entonces inicialmente hice todo lo posible para capitalizar las palabras clave. Va a holgazanear esta vez y no tener tanto cuidado. ¿Bien? Así que estamos creando una tabla llamada classes y va a obtener un ID que es int, clave primaria e identidad que siempre se supone que debe estar ahí. Y fuera de mí solo sugiriendo que siempre debería estar ahí, a Entity Framework le encanta ver cuando hay una clave primaria. Bien, para que ese espíritu tenga mucho dolor de cabeza a la hora de usar EF Core. Sostenga la caja de una manera muy poderosa. Entonces, ¿qué más tiene la clase de la clase va a tener nuestra referencia, el ID de conferencia? Entonces esta es la primera vez que vamos a estar haciendo una clave externa aquí, el ID de conferencia, que es integer, es una clave externa que hace referencia a la tabla de conferencias y a la columna id. Entonces una vez más, si no estás tan familiarizado con las claves foráneas y las relaciones para cubrir mi curso de desarrollo de bases de datos, Microsoft SQL Server para todos. No obstante, si lo eres, entonces esto debería parecerte muy familiar porque obviamente necesitamos asociar la clase con la conferencia. Y la clase también necesita estar asociada a un curso. Entonces tenemos que hacer lo mismo e introducir, introducir un ID de curso, que también es un entero y una clave foránea que hace referencia al curso es estable y la columna id. Bueno, para No, dijeron que solo quieren el tiempo. Entonces supongamos que eso, una vez que ese tiempo esté en el sistema, significa que esta conferencia estará impartiendo este curso en este momento, todos los días de la semana. Y eso es lo que constituirá nuestra clase. Y lo que hacemos aquí o las decisiones aquí se basan en las reglas negocio y los requisitos comerciales del cliente. Todo bien. Entonces solo estoy tratando de mantenerlo de manera muy simple. Puede que no sea el sistema más realista en el gran esquema del sistema de gestión de escuelas de agua que es. Pero solo lo estoy manteniendo simple para que podamos pasar por algunos de estos conceptos. ¿Bien? La siguiente tabla sería la tabla de inscripciones, y sólo voy a poner esa aquí. Contamos con inscripciones Create Table. Todavía tenemos nuestro ID de clave principal. Y luego una inscripción es definida por un estudiante. Entonces necesitamos el id de estudiante, clave foránea que hace referencia a la columna ID en la tabla de estudiantes. Y luego la clase que está tomando el alumno. Esta ID de clase, haciendo referencia a la clase es estable. Entonces por eso tenemos que asegurarnos de crear la clase antes de crear las inscripciones, porque hay una dependencia ahí mismo en la, en la mesa de clásicos. Ahora tenemos que podemos correr. Y eso se completó con éxito. Entonces si me bajé, veré que ahora tengo clases y se han creado inscripciones por dos nuevas mesas. Ahora bien, ¿cómo incorporamos estas dos nuevas tablas a nuestra aplicación, verdad? Entonces ya tenemos profesor de curso, estudiante sabe que necesitamos nuevos cursos. Entonces voy a detener mi reloj dotnet. Y vamos a hacer brotar estos bits de terminología. Así que lo estoy sacando a colación y déjame aumentar nuestro tamaño de fuente. Entonces voy a ir y crear el mismo comando que usamos la primera vez para traer todos estos elementos. Entonces tengo el comando aquí y podemos pasar por refrescar tu memoria en cuanto a lo que construye cada sección. Pero solo en uno o dos, lo que he hecho en el pasado es en realidad crear un archivo parcial en el que viviría este comando, porque este comando nunca lo cambiaría de tratar con una base de datos todos la hora, ¿verdad? Entonces en vez de intentar reescribirlo de memoria o ponerlo en alguna parte y olvidarme de donde lo puse. Lo puse en un archivo parcial y lo tenía en el proyecto. Entonces lo que haría es simplemente ejecutar ese archivo Porsche que ejecutaría este comando. Y eso solo me dará ese nivel de consistencia que necesito. Eso es algo que probablemente podamos ver en la sección de bonos de este curso. Pero por ahora solo reordenemos el comando. Entonces tenemos dotnet, EF, EV, context scuffled, y luego tenemos nuestra cadena de conexión. Y recuerda que si tienes caracteres especiales en tu cadena de conexión, especialmente como en la contraseña que tenía con estos dos signos de dólar, entonces tendrías que usar una sola comilla, ¿bien? Para obtener recuperada la cadena de conexión, por supuesto, puede simplemente pasar a las cosas opuestas como el archivo JSON. Puedes copiarlo y pegarlo ahí. Entonces tenemos el proveedor, que en nuestro caso es SQL Server, estamos forzando para que estemos forzando el andamio para que anule todos los archivos del teléfono en el directorio de salida, que son datos. Y no queremos ninguno en configuración porque no queremos que lo haga, no queremos que el contexto DB intente tener su propia copia de la cadena de conexión en core. Bien, entonces después de hacer todo eso, presionamos Enter y permitimos que se ejecute, y construye un proyecto con éxito. Cuando volvamos a nuestro Explorador de archivos, veremos que ahora tenemos estos nuevos archivos. Déjame alejarme un poco. Bien, entonces ahora tenemos conferencia I, el ID del curso. Tienes tiempo con las propiedades de navegación, el curso y las inscripciones, ¿verdad? Entonces eso es lo que la clase trae a la mesa. La inscripción tiene matrícula, identificación de estudiante, identificación clase, alumnos de clase de grado. Bien. Entonces ahora tenemos tabla adicional. Entonces, lo que te desafiaría a hacer es en realidad pasar por y regañar las páginas de la multitud para estas dos mesas. También notarás que mientras probabas tu interfaz de usuario, porque hicimos las clases de metadatos, no perdimos nuestras etiquetas, así que eso es bueno. Bien, así que ahora puedes hacer el mismo tipo de extensión de metadatos para estos. Si es necesario. Puede mirar la interfaz de usuario y ver qué tan básico y modificarlos para capturar con precisión los datos que deben capturarse. 32. Corregir errores de sintaxis: Muy bien chicos. Así que estaba en medio de andamiar los controladores para los nuevos, los nuevos modelos de datos. Y empecé con clase y me encontré con un montón de errores. Entonces no les estoy ocultando la Tierra chicos porque si tengo los errores, ustedes tienen flechas, quiero que los resolvamos juntos. Yo quería ayudarte a entender por qué estamos recibiendo esos errores. Ahora bien, la palabra clase es una palabra clave en C Sharp en la mayoría de los idiomas clase, ¿verdad? Entonces el problema aquí es que tenemos el, lo que llamaremos el lenguaje del dominio, lenguaje específico del dominio, que en este caso sería donde construir un sistema de gestión escolar. Entonces la palabra clase significa algo diferente para una escuela que para un lenguaje de programación. Es simplemente irónico que la palabra clave sea tan clave en el lenguaje de programación que está provocando un choque con ciertas cosas. Así que aquí en el controlador de clases, te darías cuenta de que los elementos que estoy desplazando más allá de errores para nosotros para que podamos entender la diferente sintaxis que podríamos estar viendo. Aquí vas a ver en clase de letreros ese anuncio diciendo es como, es como un asesino de palabras clave. Entonces, si dijéramos la palabra clase por sí misma, eso provocaría un error porque class, una vez más, es una palabra clave utilizada al definir una clase real en código. Entonces no podemos usar esa palabra clave como variable. Si terminas necesitando usar una palabra clave como variable, puedes poner el signo add delante de ella. Y entonces eso activará su estado de palabra clave. En C-Sharp. Conoce los errores que estamos recibiendo están rodeando eso en la señal. Y estaba tratando generar creo que solo estaba tratando ser inteligente y se perdió en el camino, ¿verdad? Entonces todos estos signos aquí, en lugar de las expresiones lambda, no son caracteres ilegales porque no puede simplemente tener una capa de óxido que podamos intercambiar fácilmente todos estos signos con un lambda token de expresión. Yo siempre uso Q. Puedes usar C si quieres. Realmente no importa, pero solo quería asegurarme de señalar qué es lo que está causando esos errores, cuáles son esos signos. Entonces no sentiste que hiciste algo mal porque probablemente sea más culpa mía y es tuya en términos de usar una palabra clave como esa sin señalar los peligros, ¿verdad? Entonces, una vez que hagamos todo eso, deberíamos poder hacer una compilación de dotnet. Entonces déjame volver a hacer una compilación de dotnet. Bien, y tengo algunas advertencias pero nada que escribir a casa sobre barcos. Eso es algo sobre la referencia nula. discutiremos un poco más tarde. En realidad estaba en el proceso de andamiar las inscripciones. Bien. Se trata de unas pequeñas embarcaciones. Estoy seguro de que ustedes ya lo están. Yo estoy encima. Pero si hago un CLS y luego lo traigo de nuevo ese comando para las inscripciones. Entonces tratemos de andamiar las inscripciones juntas. Y después de unos segundos, ahora tenemos el controlador de inscripciones y vistas andamios. Bien, así que solo quería entrar y en caso de que estés compartiendo esa dificultad, mostrarte que también tuve una dificultad y hay una salida gráfica. Entonces nos vemos en la siguiente lección. 33. Añadir a GitHub: Bien, entonces este módulo nos trajo a través de silenciosas algunas actividades. Nos fijamos en limpiar la interfaz de usuario usando Bootstrap Styling whole para agregar algunas bibliotecas de terceros jQuery a nuestro flujo de trabajo. Cómo personalizar las etiquetas de una manera que no se sobrescriba cada vez hacemos una actividad de andamios y alguna vez nos encontramos algunos errores de sintaxis juntos y encontramos la salida. Eso es lo que realmente es la programación. Vamos a entrar en errores, pero no se trata de evitar errores. Se trata de arreglar los errores y triunfar sobre las áreas, ¿verdad? En este punto, hemos llegado a otro importante punto de control. Y lo que vamos a hacer es configurar nuestro mensaje de check in o commit. Entonces digamos terminado de personalizar vistas y elementos. Sí, creo que eso es bueno. Probablemente también podrías agregar eso. Agregaste clases e inscripciones. Eso está bien, pero vamos a seguir adelante y comprometernos y empujar esto. Nos vemos en la siguiente lección. 34. Comprensión de la autenticación: Bien chicos, entonces en esta sección del curso, vamos a estar viendo la autenticación y por qué es importante y cuáles son nuestras opciones. No, la autenticación es importante cuando queremos controlar acceso a nuestra aplicación son partes de nuestra aplicación. Bueno, predominantemente la autenticación gobierna toda la aplicación. Entonces es o partes de su necesidad de autenticación o los dormitorios. ¿Bien? Entonces, por ejemplo, alguien podría venir a la página principal, ¿verdad? Y mira y di sin abrir lo que sea. Sin embargo, solo los usuarios que hayan iniciado sesión deberían poder ver tal vez estos enlaces. Y aunque puedan memorizar el enlace, sé que pueden ver los cursos de slash slash, y luego tratar de navegar por ahí. Se les debe exigir que inicien sesión o se autentiquen antes de que puedan ir más lejos. Entonces esas son cosas que autenticación trae a la mesa, ¿verdad? La autenticación trae ese requisito de que identifiques quién eres y nosotros verificamos quién eres. Luego hay otra parte de ella llamada autorización, que significa que alguien podría estar autorizado para crear un curso, pero tal vez no esté autorizado a eliminar el curso. Puede que no se autorice el final del curso, pero están autorizados a mirar la lista y mirar los detalles, ¿verdad? Autorización significa ¿qué vas a hacer en mi solicitud? Ahora, en términos de nuestras opciones, sí tenemos la opción de tener nuestro propio sistema de autenticación. ASP.net Core viene con su propia biblioteca, identity core, que nos permite integrar fácil y sin problemas servicios de autenticación en nuestro sitio web. Ahora, con algunos comandos, en realidad podríamos poner en marcha toda la, o al menos el 90% de la funcionalidad necesaria para lograrlo. Pero luego van a haber algunas limitaciones porque se trata de una aplicación web. Pero entonces tal vez al cliente en el futuro le gustaría tener una aplicación móvil. O tal vez lo hubieran hecho, les gustaría tener múltiples aplicaciones que usen el mismo nombre de usuario, contraseña, credenciales. Entonces en ese punto hay que pensar en grande. Tienes que pensar fuera de la caja, ¿verdad? ¿Creo diferentes sistemas de autenticación para todos estos diferentes escenarios y luego trato de hacer que todo funcione? O trato de centralizarlo, pero aún tengo que mantenerlo? O simplemente subcontrato esto a un proveedor externo que brinda todos estos servicios. En fin, para este curso, vamos a tomar la última opción, que es, usemos una plataforma de terceros que haga todo esto de todos modos. Entonces la plataforma que vamos a usar está apagada. 0.0 proporciona autenticación segura y características de seguridad de usuario. Es en forma de SaaS. Entonces eso significa que no tenemos que alojar nuestros propios datos si nuestra base de datos se bloquea, todavía tenemos todos los datos de usuario alojados por esta plataforma ahí es fácil de integrar porque tienen muchos preestablecidos las integraciones son muchas consideraciones que tomaríamos para asegurar realmente o hasta que ya se han ocupado y es muy fácil de integrar con. Así que puedes seguir adelante y registrarte para obtener una cuenta usando off zero, así zero.com, y luego solo puedes iniciar sesión con tu cuenta de GitHub porque deberías, en este punto ya tener una cuenta de GitHub y es gratis para comenzar. Y en la siguiente lección veremos cuál es el siguiente paso. 35. Inscribirse para Auth0: Bien chicos, así que estoy asumiendo que ya se adelantaron y se inscribieron. Si usas tu cuenta de GitHub o uno de los otros íconos sociales ya creaste tus columnas manualmente. Todos deberíamos terminar en una pantalla como esta. Esto no está empezando. Entonces lo primero que ven es integrado de cero en tu aplicación. Y luego podemos seguir adelante y crear aplicación. Ahora van a preguntar, ¿qué tipo de aplicación vas a estar construyendo? Entonces esto solo va a mostrar la gama de apoyos que ofrecen, ¿verdad? Porque si no se suponía que construyéramos nuestra propia autenticación para todos estos dispositivos eso podría llevar a una gran cantidad de gastos de mantenimiento. Así que siempre quieres escoger tus batallas. Siempre quieres asegurarte de que estás tomando la mejor decisión tanto para tu cliente como para el proyecto que está a la mano. Entonces, desde esta perspectiva, podríamos seguir adelante y ver que estamos haciendo un escritorio móvil o una interfaz de línea de comandos basada en arriba, estamos haciendo aplicaciones de una sola página usando uno de esos frameworks de spa. ¿Estamos haciendo nuestra aplicación web regular utilizando un marco de desarrollo tradicional para web? ¿O estamos haciendo un CLI o demonios? Entonces creo que para este definitivamente querríamos usar web regular porque vemos asp.net en la lista. Y entonces podemos darle el nombre. Sólo llamémoslo una gestión escolar arriba. Bien. Y entonces podemos seguir adelante y crear. Ahora, lo siguiente que me preguntan es decirme qué tecnología o usar, ¿verdad? Así que aquí hay una lista más grande de todas las tecnologías posibles que podrían estar usando en función de nuestra selección. Pero claro que estamos usando asp.net Core. Y elegiremos la versión herramienta de tres puntos porque de tres en adelante todo estaba un poco estandarizado. Para que podamos seguir adelante y seleccionar esa. Y no, nos están dando este ID de cliente y podemos pasar por diferentes configuraciones e incluso nos muestran cómo podemos seguir adelante integrándonos, bien, y aquí está el soporte. 3.1. 565 también es soporte 6.7, trabajar sin problemas juntos para que definitivamente podamos continuar con lo que estamos haciendo aquí. Entonces, si solo nos desplazamos por el recorrido por exactamente lo que tenemos que hacer, obtenga sus claves de aplicación. Una vez que te hayas registrado, debes ir a Configuración de Aplicaciones, y luego puedes continuar y configurar ciertas cosas. Bien, así que comencemos por repasar a la configuración de la aplicación y necesitamos establecer algunas URL, ¿verdad? Así que sólo voy a abrir eso en una nueva pestaña. Y luego de la lista, probablemente ya tengas la app predeterminada y tendrás tu actualización recién creada para que puedas seleccionar esa. Y así ese es nuestro dominio, ese es nuestro ID de cliente. Necesitamos esas configuraciones para más adelante, pero por ahora, lo que tenemos que hacer es configurar nuestra URL. Tenemos lo que llamaremos una URL de devolución de llamada de carga y luego un logotipo de carga mañana, así sucesivamente. Estas URL necesitamos para usar la URL de la aplicación. Déjame volver a nuestro proyecto desde nuestra carpeta de propiedades, lawn settings.js en vamos a tomar prestada esa URL. Y el formato de URL tiene que ser esa URL corta la palabra callback. Y luego para el logo mañana podemos simplemente dejar la URL estándar. Ahora bien, si necesitábamos facilitar múltiples URLs de devolución de llamada como indica dónde estamos en desarrollo. Y entonces tendremos tal vez un ambiente de puesta en escena, entorno de agudeza y el entorno de producción real. Vamos a tener varias de estas URLs para la misma aplicación, ¿verdad? Entonces solo podemos comma, separarlos y cada uno solo representará la URL según sea necesario. Así que mientras estamos ahí, podemos dejarlo así. Después de sentar esos valores, asegurémonos de bajar aquí y hacer clic en Guardar cambios. Ahora, una vez que lo hayamos hecho, queremos seguir adelante y agregar los archivos de configuración o estos archivos clave específicos a nuestra aplicación. Así que vamos a saltar de nuevo al código de Visual Studio esta vez vamos a entrar en la configuración de nuestra aplicación y luego podemos crear una nueva sección. Y solo voy a hacer eso en una carga de hosts y vamos a llamar a esto de cero. Y entonces esta sección va a tener dos claves, va a tener dominio. Déjame obtener mi mecanografía dominio rojo. Ahí vamos. Y eso va a tener un valor. Y luego vamos a hacer de ID de cliente. Entonces estos son valores que ayudarán a cero para saber qué aplicación está haciendo una solicitud. Por lo que aquí se nos dan estos valores. Bien, así que ese es nuestro dominio, ese es nuestro ID de cliente. Entonces voy a pedir prestado este valor de dominio y pegarlo ahí. Y voy a tomar prestado este valor de centralidad, pégalo aquí. Ahora que tenemos eso, necesitamos integrarnos con el paquete NuGet, ¿verdad? Entonces déjame detener la aplicación en ejecución aquí y déjame borrar todo. Entonces necesitamos dotnet add package, y estamos agregando. Autenticación de punto cero ASP NET Core dot. Entonces cuando hacemos eso, le damos unos segundos y sabemos que está instalado, podemos pasar al siguiente paso. Entonces, antes de pasar a la siguiente diapositiva, solo quería señalar que todo lo que estoy viendo en realidad está documentado aquí mismo. Entonces, entre lo que estoy viendo y lo que está viendo este documento real, estamos haciendo lo mismo, ¿verdad? Entonces este es un paso que acabamos de dar. El paquete instalado sería si estás usando Visual Studio y usando el administrador de paquetes NuGet, donde no. Entonces usamos el paquete dotnet add, parece, parece viejo com, ¿verdad? Lo siguiente que queremos hacer es agregar a nuestros servicios las configuraciones que sabemos que vamos a estar usando off zero. No. La sintaxis aquí es un poco diferente, y eso es principalmente porque esto es realmente para dotnet Core 3.1, 56.7 todos tienen un program.cs de aspecto diferente, Pero es el mismo concepto, ¿verdad? Para que podamos tomar prestado esto, saltar a nuestro proyecto goto en nuestro archivo program.cs. Y déjame alejarme un poco para que puedas verlo un poco mejor. Ahí vamos. Permítanme cerrar esta terminal dentro de los servicios justo encima los controladores AD con vistas que quiero agregar que sacaron de la muestra. Ahora, obviamente aquí hay un error porque ya no se trata de servicios. Ahora se trata de servicios de punto constructor, pero como la única diferencia importante. Y luego podemos agregar las instrucciones using para esa biblioteca faltante donde tenemos configuración y no va a decir builder dot configuration, así que solo puedo reemplazar esos dos referencias de cotización de configuración. Ahí vamos. Entonces ahora lo que va a hacer es buscar en la configuración y encontrar, encontrar la sección cero, y luego usar el valor booleano. Y luego lo mismo para la clave del cliente. Por último, queremos agregar autenticación. Entonces queremos agregar el, el middleware que soporta la autenticación. Entonces ya tenemos uno que respalda la autorización. Sólo voy a duplicarlo y usar el de arriba para decir usar autenticación y todo. Esto es muy importante. orden importa porque en la tubería, necesitamos autenticarnos antes de buscar autorizar. Recuerda, esto significa decirme quién eres, entonces este significa bien, ¿qué puedes y puedes hacer? No queremos empezar a determinar lo que puedes y qué no hacer antes de determinar quién eres, ¿verdad? Entonces eso es muy importante para el piso. Bien, así que ahora que hemos completado el registro del servicio y conocemos la configuración del middleware de autenticación. Pasemos al inicio de sesión. Ahora nos están dando una muestra de un controlador de cuenta, ¿verdad? Así que sólo voy a copiar este bloque de código, saltar de nuevo a nuestro Visual Studio Code. Y en la carpeta de controladores voy a crear un nuevo archivo que no quiera llamarlo cono controlador punto cs. Y luego sólo voy a pegar. Bien, también le voy a dar un espacio de nombres solo para asegurarme de que tenemos algo de uniformidad dice School of Management app dot MVC controllers, ¿ verdad? Y luego punto y coma. Y el controlador necesita eso usando la declaración para eso. Bien, entonces ahora tenemos o un controlador de cono y este controlador de iconos será desde donde se invocará el inicio de sesión. La URL de retorno básicamente significa que cada vez que inicias sesión, vuelve a lo que las barras, que es el hogar. Pero aquí abajo decimos que las propiedades de autenticación var son iguales a la nueva autenticación de inicio de sesión en el constructor de propiedades. Y entonces esto es indica aquí nos vamos a un usuario lector astuto después iniciar sesión y tal y tal y tal, ¿verdad? Entonces esa es esa URL de retorno. Entonces, si quisieras que fueran a otro lado, podrías hacerlo. Muchas veces cuando las personas hacen clic en los botones de inicio de sesión de una determinada página, esa página es URL es lo que entra aquí. Entonces este es el valor predeterminado en caso se haya dado ninguna URL de retorno, entonces solo redireccionará a esto. De lo contrario, siempre redireccionaremos a esa URL de retorno. Entonces vamos a ver temas UP contextos que desafían frente a este reto, asincrónico viene cortesía off o off zero dot ASP NET Core dot autenticación, referencia de biblioteca. Y luego más o menos es solo configurar el esquema de autenticación, que viene de esta clase de constantes, que también va desde ese espacio de nombres. Y estamos pasando en las propiedades en consecuencia. Bien, una vez que esto suceda, en realidad nos redirigirá a un melocotón off zero. Así que va a navegar lejos de nuestra aplicación a esa aplicación, que es todo cero, cargar al usuario para autenticarse y luego enviar de vuelta. Y luego serán horarios lector a esta URL de retorno. La siguiente parte de la aplicación o esta configuración a la que quiero prestar atención, podemos hacer el, el perfil de usuario. Creo que esa también sería una buena. Entonces podemos copiar esto porque está en el mismo controlador de iconos. Observe aunque tenga esa autorización sobre la notación. Déjame copiar eso y déjame pegarlo en nuestro controlador de iconos existente. Y luego solo voy a ir por el cierre de sesión y copiarlo también. Y entonces podemos pasar exactamente por lo que estamos viendo. Aquí. Autoriza una anotación que básicamente le dice a esta acción que requiere de un usuario autenticado para poder acceder a ella. No, está faltando están usando declaraciones desde la Tierra, entonces Control de puntos y luego lo conseguimos usando declaración. Para los tipos 3M, también tenemos un faltante usando declaraciones. Entonces las reclamaciones, ¿qué son las reclamaciones? Las reclamaciones son bits de información que se incluyen con lo que llamamos un token. Bien, entonces déjame desglosar eso por ti. Cuando pasamos a off zero y nos autenticamos, van a devolver un token. Este token va a ser solo un bloque de cadena codificada que tiene toda la información sobre ti. Bueno, todos los bits de información relevantes , ojalá nada sensible. Y por eso es importante utilizar a estas autoridades en el tema. Incluso solo para entender cómo harías para configurar el tuyo propio. Porque cualquier cosa que no hayas considerado, ya lo han hecho. Entonces todos los ceros es una de las principales autoridades en materia de seguridad de los usuarios, ¿verdad? Entonces lo que estoy viendo aquí es que el token que se devuelve es utilizado por nuestra aplicación para indicar que estás autenticado. Entonces la presencia de un token significa que estás autenticado. Conoce el contenido de este token incluiría tu nombre en función de lo que proporcionaste cuando registraste tu dirección de correo electrónico, incluso una imagen de perfil si la subes en cosas así. Entonces estas afirmaciones vienen todas de los Tolkien, y todas son bits de información para indicar quién eres, qué propósito sirves, qué puedes y qué no puedes hacer. Así que incluso los roles y el yo se pueden enrollar en ese kit de herramientas. No, el autorizado, una vez más significa que no puedes llegar a este punto final a menos que tengas un token. que significa que si intenté navegar para iniciar sesión, está bien. Si traté de navegar a cualquier otra parte de mi set, está bien. Si traté de navegar aquí con autorización habilitada, entonces no puedo. Me obligará a iniciar sesión. Lo mismo para cerrar sesión. Me obligará a iniciar sesión o a iniciar sesión para que pueda cerrar la sesión si no estoy logueado. Y luego una vez que ese logo esté hecho, los redireccionaremos a la página principal. Todo bien. Entonces el letrero en la parte superior termina en dos partes. Tenemos las sandalias asíncronas, lo que realmente está enviando los contextos de estemos iniciando sesión por cero. Entonces por eso, ese es el esquema de autenticación que se está utilizando con el mismo viejo. Se ve muy similar al reto es ver dónde estamos usando el mismo esquema de autenticación, ¿verdad? El siguiente supernodo está fuera de la cookie apagada. Porque lo que sucede es que cuando el token se pasa de cero, se va a almacenar en una cookie localmente en nuestro sitio web, ¿verdad? Entonces esa va a ser la forma establecida en que la aplicación sepa que hay alguien autenticado. Entonces es por eso que estamos usando la autenticación de cookies por defecto. Entonces, cuando cierre la sesión, necesitamos asignarle u como en. Deje que asp.net Core maneje cualquier inicio de sesión en Esopo para el esquema de autenticación de cookies. Bien, así que eso es más o menos lo que están haciendo estas dos líneas. Pero la combinación o el resultado combinado es que ya no tendrás un token válido, son válidos sesión RBC y como usuario autenticado, y serás redirigido a la parte de inicio de sesión, perdón a la página de índice. Ahora si vuelvo a la documentación, verás que ya estamos al final. No hay dicho, Bien, ¿qué sigue? Para que puedas empezar a buscar cosas como agregar una autorización basada en roles. Así que tendrán muchas muestras que puedes mirar para averiguar cómo puedes integrarlas en tu, en tu aplicación para nodo. O queremos probar y asegurarnos de que podemos obligar a los usuarios a iniciar sesión. Entonces voy a decir que para el controlador del curso, hay que estar autorizado para, digamos, crear el índice. Tenemos los detalles, pero voy a colocar una bandera de autorización o una notación justo encima de la creación. Tienes que estar autorizado. Y entonces podemos controlar los puntos incluyen faltantes usando referencia. Y luego en la siguiente lección vamos a probar eso y ver cómo funciona. 36. Autenticación de prueba: Bien, así que ahora tengo mi aplicación ejecutándose. Y lo que queremos hacer es probar para ver si nuestra autenticación va a funcionar como esperamos que funcione y cómo será toda la experiencia de usuario. Para que pueda navegar por el sitio web. Quiero decir, solo encerrar algunos lugares y un lugar en el que me aseguré sea mucho hacer esto en una lección anterior fue la creación de cuatro cursos. Entonces, cuando haga clic en Crear, no va a navegar lejos de mi sitio web. Entonces ese es ese dominio que me fue dado, ¿verdad? Ese es el dominio, claro, cuando pagamos y nos inscribimos en un plan pago con osteo weekend personalizamos estas cosas. Pero por ahora, esto está bien. Esto ahora permite a un usuario proporcionar su dirección de correo electrónico, contraseña o continuar con Google. Incluso pueden inscribirse. Entonces déjame ver cómo se ve cuando se inscriben . Para inscribirse. Y una vez más, todo esto se puede personalizar. Puedes cambiar el logo, nosotros podemos extender ese formulario de registro. Pero la mayoría de esas cosas vienen con el pago del servicio. Pero en términos generales, todo lo que realmente necesitas es una dirección de correo electrónico y una contraseña. Y una vez más, es muy conveniente porque tiene la autorización Social o autenticación social más bien tipo de lata grande. O podemos poner en otras plataformas sociales, microsoft, LinkedIn, GitHub, etc, todo en esta pantalla. Y podemos hacerlo sin escribir demasiadas líneas de código más. Entonces es muy conveniente. Así que sigamos adelante y voy a usar una de estas pruebas, las direcciones de correo electrónico que tengo. Yo sólo diré SEM. Sem y mi contraseña especial, Aquí está gana, VP, esencia W o d uno. Puedes ver aquí toda esa validación está siendo atendida por mí. Puedo hacer clic en Continuar, y luego solo se asegurarán probar y ver si quieres otorgar el consentimiento para que esa aplicación acceda a tu perfil. Voy a decir que sí. Y estoy recibiendo esta excepción. Lo sé, ya me conoces, no voy a ocultar las excepciones porque es importante que hagamos esto y entendamos por qué obtenemos ciertas cosas. Ahora lo que está pasando aquí es que se está diciendo ese campo de correlación. Y solo sospecho que es principalmente porque estamos usando el protocolo HTTP. Se prefiere Https cuando estamos haciendo este tipo de cosas. ¿Bien? Entonces, lo que vamos a hacer es saltar de nuevo a nuestra configuración de cero de autenticación para arriba. Y por si acaso no recuerdas cómo llegar aquí desde tu panel de Primeros pasos. De hecho, puedes, bueno, en realidad solo puedes ir a Aplicaciones y luego ir a Aplicaciones aquí. Ahí vamos. Y luego eliges tu arriba. ¿Bien? Entonces lo que vamos a hacer es agregar las URL HTTPS a nuestro inicio de sesión y devolver la llamada. Bien, entonces la URL HTTPS, si vuelves a la configuración de tus pulmones, está debajo del perfil HTTPS , encontrarás las dos URL , encontrarás una HTTPS y la HTTP. Así que en realidad puedes simplemente copiar ambos y pegar. Asegúrate de poner el dólar de llamada de barra diagonal. Y en lugar de un punto y coma, ponga una coma según las instrucciones justo después que el usuario se autentica solo utilizará una de las URL. Y están viendo que prefieren HTTPS. ¿Bien? Así que voy a poner ambos, pero de verdad y de verdad, queremos que se utilice el HTTP S1. Y lo mismo para el logo. ¿Bien? Y entonces recuerda, una vez que conozcas esos cambios, guardes los cambios, la notificación le diría que espere unos 30 s. Lo que voy a hacer es en nuestra dotnet, en nuestro VS Code, vamos a correr con el perfil HTTPS. Entonces creo que lo hicimos antes donde dijimos dotnet run y luego decimos guión, guión. Déjame solo borrar la pantalla para que quede un poco más clara. Vemos dotnet ejecutar guión, perfil de lanzamiento de guión. Sé que estamos haciendo HTTPS. Entonces, una vez que hagamos eso, presione Enter. Ahora podemos ejecutar nuestra aplicación desde cualquiera de ellas. Pero el middleware que está en el program.cs siempre va a forzar la redirección HTTPS de todos modos. Así que sigamos adelante y volvamos a hacer la misma prueba usando el HTTPS. También notarás que aunque tengas ese error, en realidad ya estás autenticado porque si intentas volver a esa página, podrás ir a la página. Entonces eso significa que estás hablando está presente. Y si estabas viendo la consola o la ventana de la terminal, verás que el Tolkien vino Buck y todo ese apretón de manos OpenID. Por lo que todos los ceros brinda los servicios de OpenID Connect. Y eso es como un apretón de manos entre tu sitio web. Y entonces el resultado final de ese apretón de manos es tu aplicación obtiene un token y no hay nodos, está autenticada. Desafortunadamente, todavía no hemos configurado el botón de cierre de sesión, así que estamos autenticados sin forma de autenticarnos. Entonces lo que voy a hacer es tomar esta URL y probar de nuevo, estamos usando nuestra ventana privada, así que técnicamente estamos llegando frescos, sin autenticación como ocurrió. Vamos a cursos, podemos ver los cursos que podríamos crear nuevos. Y luego nos vemos obligados a iniciar sesión o registrarnos. Yo solo voy a usar los mismos, uh, conos que acabamos de crear admin en SEM con una contraseña y dar clic en Continuar. Y he aquí, no hay error y estamos autenticados y redirigidos a nuestro pH asegurado. Entonces es bueno ver qué puede salir mal y entender porque OpenID Connect puede tomar algo de delicadeza para acostumbrarse. Pero con servicios como auth zero abstrayendo muchas de las complicaciones que hay ahí. Es bastante fácil ponerse marcha con la autenticación. Ahora lo que tenemos que hacer es terminar nuestra funcionalidad. Vamos a poner en esa página de perfil o un poco parcial por aquí que dice que cuando estás conectado, entonces estás usando tu dirección de correo electrónico y mostrar un botón de logotipo. Y la dirección de correo electrónico va a esa página de perfil que configuramos. Entonces eso es lo que vamos a hacer a continuación. 37. Configuración de páginas relacionadas con el usuario: Hola chicos. En esta lección, lo que queremos hacer es modificar u otra barra para que podamos tener nuestros botones adicionales. Entonces queremos un botón por aquí que diga inicio de sesión, cierre de sesión, y uno que nos permita ver qué usuario está conectado en ese momento, ¿verdad? Así que saltemos de nuevo a nuestro proyecto. Y lo que voy a hacer es crear una nueva vista parcial. Y lo genial de los parciales es que se pueden compartir a través de múltiples tesis se inyectan, ¿verdad? Entonces crearemos nuestro primer parcial juntos. Así que voy a hacer clic derecho y crear subrayado login, punto parcial CSS HTML. Y en este archivo vamos a hacer algo sencillo como esto. Entonces todo lo que tengo aquí es una lista desordenada que tiene una barra de navegación de clase, ¿verdad? Así que con Bootstrap cuando queremos tener barra de navegación a la izquierda y una sección a la derecha, y se ven muy claramente diferentes. Lo que puede pasar es que podamos establecer otra UL y luego darle la misma clase, navbar-nav. Pero claro que no a todas las otras clases les gustan las películas y el grow y cosas que tendrían los conjuntos originales de artículos navbar. Esto en realidad le permitiría estar bien alineado a lo largo de esa barra de navegación. Entonces dentro de esta nueva lista desordenada, voy a tener una declaración if. Estoy comprobando si la identidad de punto de usuario que es usuario autenticado es como un súper objeto que representa lo que llamaremos un principio de reclamaciones. Así que las aplicaciones asp.net Core tienen el concepto de un principio de usuario principal o de reclamaciones, que es una combinación de todas esas afirmaciones que discutimos. La presencia de todos ellos se puede combinar para darnos un limpio sprints IPL, y luego renuncia principio puede ser desglosado por los diferentes bits de información. Entonces aquí estamos viendo es la persona es el objeto que reclama principio. ¿Tiene una persona autenticada? ¿Representa a una persona autenticada? Siempre está presente pero sin reclamo inflamación, sería como un objeto vacío. Pero eso significaría que la persona probablemente no esté autenticada si no tenemos información. Así que podemos confiar en esta declaración if porque todo eso se configura durante el flujo de autenticación que ya hemos experimentado. Si la persona está autenticada, quiero hacer navegación de artículos. El primero es, y por supuesto recordemos que tenemos que ver otro enlace primero será elemento de navegación de los LaS y luego la clase es el enlace de navegación y la luz del guión de texto. Debido a que estamos usando una barra de navegación negra, entonces en realidad ni siquiera necesitamos especificar el área. Simplemente copiado y pegado, pero eso está bien. Vamos a ver que vamos a ir a cuenta y perfil. Y lo que estamos mostrando es la identidad del usuario, el nombre del punto. Este nombre es el reclamo proveniente de. La herramienta puede apartar a las mujeres del principio de reclamos que se habría configurado cuando nos autenticamos. Bien, así que esa es una manera agradable y fácil de conocer el nombre de usuario. Bueno, en este caso, utilizándolos como los mismos que la dirección de correo electrónico del usuario autenticado. Así que estamos mostrando eso y cuando se hace clic, debemos navegar a la página de perfil, que todavía estamos por crear realmente. Entonces tenemos el siguiente, que es el botón del logotipo. Entonces, si la persona está autenticada y queremos permitirle que pueda cerrar sesión. De lo contrario, siga adelante y muestre un botón de inicio de sesión, que va a ir a su controlador de cono y a la acción de inicio de sesión. Y entonces claro, eso los redirigiría al servicio de autenticación de terceros. Así que ahora que tenemos esta configuración parcial de inicio de sesión, lo que tenemos que hacer es agregarlo a la barra de navegación en el punto de diseño CSS, HTML. Css. Podemos agregar que usamos en esta línea y eso es lo que hace parcial. Tan genial. Puedes crear esa sección estática de los sitios, la vista estática, estática demasiado y puedes simplemente inyectarla en cualquier lugar que necesites. Solo esa línea aquí mismo, solo estamos viendo que el nombre parcial es igual a iniciar sesión parcial, esa obligación sabrá que debe ir y buscar asegurado cualquier archivo con ese nombre, y luego se renderizará esa sección ahí mismo. Observe que aquí es donde termina la barra de navegación original. Y luego después de eso, estaremos iniciando nuestro parcial en el que definimos otra sección Navbar. Así que revisemos esto. Entonces así es como se ve la aplicación. Así que tenemos las cuatro URL originales. Sé que tenemos login a la derecha. Bien, eso se ve bien. Si hacemos clic en iniciar sesión vamos a navegar por los que están aquí. Y luego podemos seguir adelante y autenticarnos usando el usuario con el que ya nos registramos. Y entonces no, me mostrará que estoy conectado como administrador en SCM y puedo cerrar sesión si hago clic en cerrar sesión, ¿qué hace eso? Me da la cuenta ahí fuera. Todos lo sabemos. Lo que tenemos que hacer es configurar esa página de perfil para que realmente vaya a alguna parte. Porque si hago clic en esa URL, me va a dar ese mismo error que vimos la primera vez cuando no teníamos una vista. Entonces, sigamos adelante. Y configúralo. Bien, así que de vuelta en nuestro controlador de iconos, tenemos nuestra opción de perfil. Y lo que estamos haciendo es que estamos devolviendo el punto de vista que debería existir en algún momento con un nuevo y lo que llamaremos tipo anónimo. Entonces este es un tipo anónimo u objeto anónimo. No hay manera real de determinar qué tipo de datos se están enviando. Puedes ver aquí es solo una, es solo que es anónima. ¿Qué es un? Entonces ahora vamos a ver el concepto de un modelo de vista, ¿verdad? Entonces lo que voy a empezar es crear una clase y ya tenemos algo más de un concepto de un modelo de vista con el modelo de vista de error, voy a crear un nuevo archivo. Voy a llamar a este usuario perfil ver modelo. En algunas convenciones de nomenclatura verías que la gente solo dice VM y es un nuevo archivo de clase. Entonces punto cs, comenzamos con nuestro espacio de nombres. Y esa es la app de gestión escolar dot MVC dot models, ¿verdad? Punto y coma. Entonces tenemos una clase pública y la estamos llamando Modelo de vista de perfil de usuario. Ahora bien, esta clase va a tener los diferentes puntos de datos que pretendemos mostrar. Y lo genial los modelos de vista es que realmente están acostumbrados a controlar lo que mostramos en el, en la pantalla. Este es un concepto poderoso, especialmente cuando queremos dejar de mostrar todos los campos de nuestras clases de datos en esta pantalla, realidad crearíamos modelos de vista específicos para cada vista y entonces tienen lógica que convierte del modelo de vista a la clase de datos y viceversa. No me estoy metiendo en todo eso en este curso, puedes revisar mi curso, completar asp.net y desarrollo de Entity Framework Core, donde te enseño todas esas dinámicas y abstracciones para esto, solo queremos ponernos en marcha y entender cómo podemos construir una aplicación simple con el mínimo esfuerzo, ¿verdad? Para este modelo de perfil de usuario, lo que voy a hacer es definir propiedades que volverán a lo que espero enviar desde el perfil. Y déjame probar esto de verdad. Quería tratar de engañar al sistema. Voy a decir Usuario Perfil Ver Modelo aquí. Bien, incluya la referencia faltante. Y entonces claro que ninguno de estos existe. Entonces voy a ver esto. Solo puedo ver generar nombre de variable, nuestro nombre de propiedad dentro de la clase en la que desearía que estuviera. Yo quería hacer eso. Y luego vamos a revisar la clase. Y ahí vamos. Así es como haces trampa, ¿verdad? En vez de tratar de teclearlos todos manualmente, sólo voy a aprovechar la situación que se obtiene. Entonces quiero devolver un nuevo modelo de vista. Entonces es un tipo fuerte. Ahora sé exactamente el tipo de datos que se está devolviendo. Y entonces estas son las propiedades que están ahí dentro. Antes no estaban ahí. Por lo que permití que Visual Studio Code los generara para mí. Muy bien, así que una vez hecho esto, notarás que también se están generando notarás que también se están generando con estos conjuntos internos de anotación, lo que significa que esto no se puede establecer desde ningún lugar fuera de la inicialización, lo cual está bien por mí. ¿Bien? Por lo que en ese punto volveremos este modelo de visión a este punto de vista. Esta visión no existe y no vamos a ser andamios. Tenemos que hacer esto de forma manual. Así que bajemos a las vistas. Y lo primero que necesitamos es una carpeta que vuelva a mapear a nuestro controlador, ¿verdad? Entonces, las vistas hacen clic con el botón derecho, haga clic en Nuevo archivo , y luego vemos, lo siento no Nuevo archivo, carpeta nueva, carpeta. Ahí vamos. Y entonces lo llamamos cono porque ese es el nombre del controlador. Entonces dentro de un cono, dentro de esa carpeta, ahora podemos crear un nuevo archivo y lo llamaré Profile dot CSS HTML. ¿Por qué perfil? Porque el perfil necesita mapear de nuevo a la acción llamada perfil. Entonces hemos pasado por esto, lo hicimos con quien y sobre ya. Sin embargo, lo único es que también estamos creando nuestra propia carpeta. Ahora para los contenidos de esa página, no voy a intentar llegar a ser creativo. Sólo voy a mirar hacia atrás a la muestra. Entonces, si vuelvo al dashboard de gestión todo cero, recuerda que cuando empezamos, podríamos haber ido y descargarlo como sampler vio la muestra en GitHub, ¿verdad? Alguien que te guarde en GitHub, eso va a lanzar el proyecto en GitHub. Y luego, cuando navego hasta la semana comienza gran muestra de barra diagonal vista barra, perfil de barra de inicio que CSS HTML. Vamos a ver la vista que usaron en la muestra. Creo que eso es lo suficientemente bueno para que empecemos. ¿Bien? Entonces queremos esto sexual, quiero decir, puedes llevarte todo para que podamos simplemente copiar todos los contenidos. Y entonces por supuesto tenemos que cambiar la referencia del espacio de nombres aquí porque ese es el modelo de vista de perfil de usuario está en un espacio de nombres diferente, pero entonces todo lo demás puede permanecer igual. Entonces, cuando se hace esa operación, esto es con lo que terminamos, ¿verdad? Entonces en ese archivo HTML CSS de punto de perfil, tengo model y luego namespace relativo a donde está realmente mi modelo de vista. Y entonces tengo ese mismo título, entonces todo lo demás es igual. Con todo eso hecho, voy a refrescar mi aplicación y echarle un vistazo y eso es lo que obtengo. Bien, entonces ese es el perfil de usuario admin en SCM, esa es la dirección de correo electrónico. Y esta sería la foto de perfil que viene de auth zero. Entonces eso es lo que queremos decir con limpia. Esta inflamación fue a la vez, pero cada vez que el usuario se autentica, esta inflamación estará presente en la información de sus reclamos. Bien, así que ahora puedes seguir adelante y experimentar con cierre de diferentes partes de tu aplicación porque se trata de seguridad. Y se trata de quién puede hacer qué y por qué. 38. Retoques finales: Bien chicos, entonces en esta lección vamos a limpiar un poco nuestra interfaz de usuario. Y voy a empezar con la maquetación para pagar. Entonces en nuestro layout, que está en el compartido, ahí vamos, no quiero que nadie que no esté autenticado esté viendo ninguno de estos enlaces. En primer lugar, no creo que el enlace de privacidad tenga que estar más en la barra de navegación. Yo probablemente más quisiera poner eso. Ya está hecho aquí en el pie de página. Alguien lo quita de la navegación superior. Bien, y se elimina que entonces no quiero ningún usuario autenticado pueda ver la sección de Gestión de cursos, profesores y alumnos. ¿Adivina qué? Puedo usar las declaraciones if que tenemos en el inicio de sesión parcial aquí. Puedo ver si el punto de identidad de usuario está autenticado. Entonces quiero esa sección. Así que voy a poner todas estas etiquetas LI dentro de esa declaración if. Así que eso solo demuestra lo fácil que es hacer que nuestro display sea dinámico basado en el estado autenticado de la persona. Podemos ocultar las opciones del menú y podemos manipularlo en función de si esta persona está o no logueado. Y también podemos seguir adelante y bloquear algunos de nuestros controladores. Entonces, por ejemplo, si realmente no queremos que nadie lo vea, pero aún así podrían navegar si supieran la URL ahí mismo, todavía podrían decir una barra diagonal del sitio web cursos slash index y llegar allí. Entonces queremos no solo encerrar el get, perdón por la cre, está abajo para encerrar todo aquí. Para el controlador del curso, podemos simplemente poner un autor. Empecé en la parte superior de todo ese controlador. No, nadie puede acercarse a aquí a menos que estén autorizados. Bien, así podemos hacer eso con todos los controladores en los que queremos ese tipo de restricción de bola azul. Entonces voy a hacer eso para la gestión de clases, y lo puedo hacer para la matrícula. Y claro que tenemos que agregar faltan usando declaraciones. Entonces déjame volver a clases y hacer eso. Ahí vamos, podemos salir de casa. Y entonces a veces lo que quieres hacer es ser muy explícito que este controlador en particular puede permitir anónimo. Entonces en realidad hay una anotación aquí que dice permitir anónimo, lo que significa que cualquier cosa que esté dentro de este controlador, o si lo pones por encima de una acción, significa que cualquiera puede llegar a esa dirección en particular sin necesidad de autorización. Esa es la configuración predeterminada, pero a veces quieres ser aún más explícito. Bien, por lo que vamos a autorizar y estudiantes, también vamos a autorizar no, no se permite el acceso no autorizado a ninguna de esas rutas en esos controladores. E incluso entonces, aunque bloqueemos todo el controlador, pero queríamos que tal vez solo uno accesible de lo que fácilmente podríamos ir por encima de él y decir, hola, Anónimo, me encanta por encima la acción es decir, y permitir anónimo. ¿Entonces esos artistas son cosas que puedes hacer para controlar el acceso? No puse en los enlaces adicionales. Probablemente ya lo hiciste, así que no tienes que hacer esto. Pero no me metí en la clase. Déjame ver el manejo del pasto aquí. Eso es para el controlador de clases. Bien. Y no puse inscripciones, y probablemente ni siquiera tenga que poner las inscripciones directamente porque vamos a estar escribiendo algunos métodos personalizados para las tablas de inscripciones porque eso es un poco relativo a la gestión de clases. Entonces creo que esto es un buen legal para tener. Y así cuando volvamos, solo comprobaremos que estamos en otro hito. 39. Añadir a GitHub: Muy bien chicos, así que ahora que hemos golpeado a otro musulmán, sigamos adelante y cometamos todos nuestros cambios. Podemos ver cero agregado y la interfaz de usuario. ¿Está bien? Y entonces podemos comprometernos y empujar. Y te veré en la siguiente sección.