Tema 7.2 - Conociendo las bibliotecas y paquetes en .NET NVC

Una vez hemos creado nuestro proyecto de ASP.NET, encontraremos una ventana de inicio en donde tendremos lo siguiente:

Dentro de nuestro proyecto de Visual Studio, encontraremos una barra de herramientas similar a la imagen 1, en donde podemos administrar y gestionar todo nuestro proyecto de desarrollo de software.

Imagen 1.

Nota: Para una mejor visualización, dar clic sobre la imagen.

También es importante saber que contamos con un área muy valiosa para los desarrollos, que es el explorador de soluciones o solution explorer que se muestra en la imagen 2.

Imagen 2.

Nota: Para una mejor visualización, dar clic sobre la imagen.

En caso de no encontrar el explorador de soluciones, podremos dirigirnos a la derecha de nuestro entorno desarrollo, ya que lo podemos ubicar en la barra de herramientas llamada “ver” en donde aparecerá explorador de soluciones.

Para finalizar, tenemos nuestra área de trabajo, que será nuestro lugar de desarrollo y nuestro entorno a trabajar.

¿Qué vamos a encontrar dentro de nuestro solution explorer o explorador de soluciones?

Primero encontraremos la solución en la cual fue creado nuestro proyecto izytechnology. Dentro del proyecto de izytechnology, encontraremos algunas carpetas, por ejemplo, si miramos nuestro explorador de soluciones tenemos la carpeta de servicios conectados y si la abrimos no encontraremos nada, ya que no hemos conectado ningún servicio, también tenemos la carpeta dependencias, que es cuando utilizamos proyectos externos para que nuestro desarrollo funcione. En este caso, no tenemos ninguna dependencia en nuestro proyecto, como se puede observar en la imagen 3.

Imagen 3.

Nota: Para una mejor visualización, dar clic sobre la imagen.

También encontraremos la carpeta de Properties, la cual nos indica cómo inicializar nuestro proyecto, el cual es un archivo de tipo Json, que nos indica por dónde iniciará nuestro IIS, los perfiles y nuestro IIS express. Por otra parte, encontraremos la carpeta wwwroot dentro de la cual encontraremos todas nuestras hojas de estilo de cascadas (CSS), los JS que sean necesarios para ejecutar nuestro sitio, nuestras bibliotecas o en este caso, podríamos encontrar Boostrap, jQuery, entre otros. También podemos agregar las carpetas que sean necesarias para nuestro proyecto.

Además, encontraremos las carpetas de los controllers, models y las vistas. Dentro de las controllers encontraremos la HomeController.cs, en models podemos encontrar a ErrorViewModel.cs, también encontraremos las vistas predefinidas para Home y para chared, las cuales son las vistas compartidas, además de una vista de arranque y encontraremos también las appsettings, que es un archivo Json donde nosotros podemos realizar las configuraciones o conexiones hacia algunas APIS o hacia algunos webs service de los cuales estaremos hablando más adelante. Para finalizar, tenemos una MapControllerRoute, la cual nos dice que vamos a iniciar desde la controladora Home y en la acción index pasa una variable id, como se muestra en la imagen 4.

Imagen 4.

Nota: Para una mejor visualización, dar clic sobre la imagen.

¿Por dónde podemos empezar?

Lo primero es ubicar la carpeta vistas o Views, al igual que la carpeta Home y el archivo Index, este archivo es el primero que se ejecutará cuando nosotros compilemos nuestro proyecto, como se muestra en la imagen 5.

Imagen 5.

Nota: Para una mejor visualización, dar clic sobre la imagen.

Si damos clic en compilar, vemos que se comenzará a ejecutar nuestro proyecto y nos cargará dentro del explorador el título del proyecto Izytechnology con una layout de home, privacy y el mensaje de bienvenida, ya que es lo que tenemos dentro de nuestro archivo de Izytechnology, similar a la Imagen 6.

Imagen 6.

Nota: Para una mejor visualización, dar clic sobre la imagen.

Una vez hemos compilado y ejecutado nuestro proyecto, podemos entender que para que nuestro desarrollo de software funcione, necesita de algunas bibliotecas o de algunos proyectos, en este caso tenemos las bibliotecas de Boostrap, Jquery, Jquery-validation y Jquery-validation-unobtrusive. Si abrimos la carpeta de Jquery, podemos tener la librería o biblioteca completa de Jquery, la cual normalmente nosotros no estaremos modificando. Por otra parte, tenemos también los archivos de Boostrap en donde tenemos los CSS y JavaScripts pertenecientes a Boostrap en una versión 5.0.

Si necesitamos instalar a nuestro proyecto o agregar alguna biblioteca adicional, lo podemos hacer a través de NuGet, pero ¿Cómo lo encontramos?, simplemente tenemos que dirigirnos hacia la raíz o hacia la cabeza de nuestro proyecto, damos clic derecho en donde saldrá la opción de administrador de paquetes de NuGet al cual le daremos clic, y esperamos a que se descargue nuestro paquete, podemos examinar o buscar algún paquete que necesitemos, para este caso buscaremos el paquete Áyax, como se muestra en la imagen 7.

Imagen 7.

Nota: Para una mejor visualización, dar clic sobre la imagen.

Este nos arrojará las versiones que están disponibles para descargas de Áyax, pero como en este ejercicio aún no lo estaremos utilizando, entonces no lo vamos a instalar.