Para finalizar con las fases y dedicarnos solamente a la construcción del modulo de seguridad haciendo uso del ORM Dapper.Net (terceros), cerramos con la fase de Bootstrap (Qué es Twitter Bootstrap) y ASP.NET MVC:
Básicamente lo que se hará sera agrega el archivo .js y .css de dicho framework en nuestro proyecto que ya venimos implementando, para lograr la siguiente vista:
1. Para esto iniciamos eliminando los archivos jQuery que por defecto nos trae al crear la aplicación.
1.1. Luego agregamos en el directorio Scripts, elemento existente (bootstrap.js y bootstrap.min.js).
1.2. Verificamos que los archivos bootstrap.js y bootstrap.min.js deben estar ya agregados.
Nota: El archivos bootstrap.js es el .js que sí deseásemos podemos hacer nuestras propias modificaciones, ya que el archivo bootstrap.min.js es el archivo .js compilado. Te recomiendo leer esta publicación.
Ubicamos los archivos y clic en agregar.
1.2. Verificamos que los archivos bootstrap.js y bootstrap.min.js deben estar ya agregados.
Nota: El archivos bootstrap.js es el .js que sí deseásemos podemos hacer nuestras propias modificaciones, ya que el archivo bootstrap.min.js es el archivo .js compilado. Te recomiendo leer esta publicación.
2. Ahora debemos eliminar el sub directorio Themes que esta en el dirección Content, valga la redundancia, también es creado por defecto al crear la aplicación.
4. Luego agregamos la carpeta images en el directorio Content:
4.1. Y agregamos los archivos de imágenes del bootstrap o en nuestro propios archivos css.
4.2. Como resultado verificamos que nuestro archivos ya fueron agregados:
5. Comentar o eliminar la sección bundles del archivo BundleConfig.cs, puedes revisar acerca de los archivos del directorio App_Start:
5.1. Luego hacemos referencia a todos nuestro archivos que fueron agregados a nuestra proyecto (considera el color de cada uno de ellos):
6. Comentamos y agregamos las nuevas referencia en nuestro archivo (vista) _Layout.cshtml que se encuentra en el directorio ..\Views\Shared:
7. Cambiamos la sección de nuestro div de nuestro archivo (vista) Login.cshtml que se encuentra en el directorio ..\Views\Login:
8. Agregamos nuestro css (style-login.css) relacionado a nuestra vista login, puede revisar preparando template login - ASP.Net MVC:
9. Ejecutamos (presionar F5) nuestro aplicación, y tendremos nuestro primera vista que todo esto es gracias al FRAMEWORK DE BOOTSTRAP y algunos agregaciones propias en nuestro archivo de style-login.css.
10. Ahora clic en el botón login para ver las mismas acciones de validaciones que se mostraron en la anterior fase Agregar vistas ASP.NET MVC - Fase IV.
10.1. Ingresamos el usuario y clic en login y aun nos pide el password (validación).
11. Para finalizar ingresamos todos los datos y veremos como resultado la siguiente pantalla del administrador, recuerda que en la fase anterior los loguemos con los roles de administrador y usuario, así mismo puede loguearte con el usuario invitado.
Pueden descargar la fuente desde:
Con todos esto pasos doy por finalizados las fases, construyendo una aplicación ASP.Net MVC desde cero. Lo que ahora sigue es implementar toda la solución del modulo de seguridad y a futuro publicarlo.
0 Comentarios