Ticker

6/recent/ticker-posts

Integrando Plantillas Responsivas a ASP.NET Core 3.1

Hadsonpar marzo 20, 2021

En anteriores tutoriales vimos como construye una aplicación web desde cero con ASP.Net MVC y en la ultima fase vimos como agregar Bootstrap y ASP.NET MVC a nuestro proyecto web con el fin de mejorar nuestra interfaz.

Ahora integraremos un plantilla responsiva o templates HTML5 a nuestro proyecto de ASP.NET Core 3.1 - LOGIN en MVC con C# y ADO.Net, es decir la funcionalidad a nivel de Back-End no se vera afectado. La plantilla a utilizar es el SB Admin 2 - el tema presenta una variedad de complementos jQuery personalizados para agregar una funcionalidad extendida más allá de las características integradas de la interfaz de usuario de Bootstrap.


Requisitos:

  • Microsoft Visual Studio Community 2019
  • Microsoft .NET Core, ASP.NET Core 3.1
  • Template - SB Admin 2 (Bootstrap 4 creado con HTML / CSS)

Lo que se vera en este artículo:

  1. Ventajas de usar plantilla web
  2. Descargar la Template - SB Admin 2.
  3. Copiar archivos del template al proyecto ASP.NET Core.
  4. Modificar la vista _Login.cshtml.
  5. Modificar la vista Compartido _Layout.cshtml.

1. Ventajas de usar plantilla web

Algunos beneficios de las plantillas al hacer uso son:
  • Se pueden personalizar.
  • Diseños completos y adaptados a un estilo funcional.
  • Diseños respaldados por una comunidad.
  • Son más económicas y rentables.
  • Son más eficiente.
  • Fácil de gestionar y manipular.
  • Refrescamiento de páginas más rápido.

2. Descargar la Template - SB Admin 2:

Para este ejemplo práctico hare uso de la plantilla o template - SB Admin 2 que esta elaborado haciendo uso de Bootstrap 4 creado con HTML / CSS que esta listo para uso, y lo más importante bajo MIT License. Con todos los siguientes pasos estarás listo en la capacidad de integrar cualquier plantillas a tu proyecto de ASP.NET Core, incluyendo las de pago.


3. Copiar archivos del template al proyecto ASP.NET Core:

Los archivos como *.css y *.js serán copiados a nuestro proyecto principal de ASP.NET Core, primeramente seleccione y copia el archivo sb-admin-2.css del directorio css hacia el wwwroot\lib\ (ASP.NET Core) seguidamente seleccione y copia el archivos el sb-admin-2.js del directorio js hacia el wwwroot\lib\jquery\ y para finalizar seleccione y copia el directorio vendor hacia el wwwroot\lib\ (js para bootstrap, fontawesome-free, gráficos y tablas).



4. Modificar la vista _Login.cshtml:

En el head de la vista cshtml remplazaremos la referencia de los archivos css y js por lo copia de la plantilla a nuestro proyecto ASP.NET Core:

    <link href="/lib/vendor/fontawesome-free/css/all.css" rel="stylesheet" type="text/css">    

    <link href="/lib/css/sb-admin-2.css" rel="stylesheet">

    <script src="/lib/jquery/dist/jquery.min.js"></script>

Además se modifica todo el html del la sección body, pero el code behind c# se mantendrá con el fin de realizar la acción de acceso a la aplicación web:

<body class="bg-gradient-primary">   

        <div class="container">

            <div class="row justify-content-center">

                <div class="col-xl-10 col-lg-12 col-md-9">

                    <div class="card o-hidden border-0 shadow-lg my-5">

                        <div class="card-body p-0">

                            <div class="row">

                                <div class="col-lg-6 d-none d-lg-block bg-login-image-izq">

                                    <img src="/lib/img/login.png">

                                </div>

                                <div class="col-lg-6">

                                    <div class="p-5">

                                        @using (Html.BeginForm("Login", "Login", FormMethod.Post, new { @class = "user", role = "form" }))

                                        {

                                            @Html.AntiForgeryToken()

                                            <div class="text-center"><h4 class="h4 text-gray-900 mb-4">@title</h4></div>

 

                                            @Html.ValidationSummary(true, "", new { @class = "text-danger" })

 

                                            @Html.TextBoxFor(m => m.usuario, new { @class = "form-control form-control-user", placeholder = "Usuario"})

                                            @Html.ValidationMessageFor(m => m.usuario, "", new { @class = "text-danger" })

                                            <br />

                                            @Html.PasswordFor(m => m.contrasena, new { @class = "form-control form-control-user", placeholder = "Contraseña" })

                                            @Html.ValidationMessageFor(m => m.contrasena, "", new { @class = "text-danger" })

                                            <br />

                                            <input type="submit" value="Iniciar sesión" class="btn btn-primary btn-user btn-block" />

                                            <hr>

                                            <a href="#" class="btn btn-google btn-user btn-block">

                                                <i class="fab fa-google fa-fw"></i> Login with Google

                                            </a>

                                            <a href="#" class="btn btn-facebook btn-user btn-block">

                                                <i class="fab fa-facebook-f fa-fw"></i> Login with Facebook

                                            </a>

                                            <hr>

                                            <div class="text-center">

                                                <a class="small" href="#">¿Olvidaste la contraseña?</a>

                                            </div>

                                            <div class="text-center">

                                                <a class="small" href="#">Crea una cuenta</a>

                                            </div>

                                        }

                                    </div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

            </div>

        </div>

</body>


5. Modificar la vista Compartido _Layout.cshtml:

Para finalizar se modificará el View _Layout.cshtml del sub directorio Shared, con el fin de poder visualizar el cambio para todas nuestras vista que se irá agregando a nuestra aplicación web.

En el head de la vista cshtml remplazaremos la referencia de los archivos css por lo copia de la plantilla a nuestro proyecto ASP.NET Core:

        <link href="/lib/vendor/fontawesome-free/css/all.css" rel="stylesheet" type="text/css">

        <link href="/lib/css/sb-admin-2.css" rel="stylesheet">

Además se modifica el html del la sección body, pero se mantiene el @RenderBody() para poder mostrar el contenido de las demás vistas que referenciar a la vista Compartido _Layout.cshtml:

<!-- Begin Page Content -->

<div class="container-fluid">

@RenderBody()

</div>

<!-- /.container-fluid -->


Recordemos que una _Layout.cshtml View es una página maestra, que define una apariencia común que será usada por otras vistas. 

Si te interesa saber mas de las vistas te sugiero visitar el articulo de Agregar vistas ASP.NET MVC.

Página finales con el css y js de la plantilla responsiva:

Ingresar los datos correctos y clic en Iniciar Sección para acceder a la aplicación web, los demás botones aun no cuenta con funcionalidad.

En la vista index se muestra la lista de Usuario y la opción Cerrar Sesión se encuentra en la vista compartido _Layout.cshtml.


Puedes comparar el resultado revisando el punto 10 del articulo ASP.NET Core 3.1 - LOGIN en MVC con C# y ADO.Net.


Gracias nuevamente 😊; comentarios y apreciaciones son bienvenido, un fuerte abrazo para todos ✌...!!!

Hadsonpar

Publicadas por Hadsonpar

Apasionado por las nuevas tecnologías, la investigación, los patrones de diseño y las buenas prácticas; con experiencia y participación en diversos proyectos de banca y seguros desde la etapa de análisis, diseño, desarrollo, implementación, testing y certificación.

Publicar un comentario

1 Comentarios

  1. Anónimo12 de mayo de 2022, 3:07 p.m.

    Hadson muy buen articulo, podrias comparitr un template completo con AdminLte, que este como listo solo para empesar a desarrollar.

    ResponderBorrar