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:
- Ventajas de usar plantilla web
- Descargar la Template - SB Admin 2.
- Copiar archivos del template al proyecto ASP.NET Core.
- Modificar la vista _Login.cshtml.
- Modificar la vista Compartido _Layout.cshtml.
1. Ventajas de usar plantilla web
- 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:
3. Copiar archivos del template al proyecto ASP.NET Core:
4. Modificar la vista _Login.cshtml:
<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>
<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:
<link href="/lib/vendor/fontawesome-free/css/all.css" rel="stylesheet" type="text/css">
<!--
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.
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. |
1 Comentarios
Hadson muy buen articulo, podrias comparitr un template completo con AdminLte, que este como listo solo para empesar a desarrollar.
ResponderBorrar