Agregar vistas ASP.NET MVC - Fase IV

Continuando con la fase de implementar nuestro proyecto en MVC. Ahora nos toca implementar las vistas para esto iniciaremos hablando un poco acerca ellas que también es conocido como View Engines - Les recomiendo que revisen la fase previa Agrear controlador ASP.NET MVC - Fase III:

ASP.NET  MVC  utiliza  View  Engines  para  generar  las  vistas,  y  desde  MVC  se dispone de dos motores de vistas incluidos para utilizar directamente:

ASPX: .aspx, .ascx y .master. Disponible en todas las versiones de MVC. 

Razor: .chtml (C#), .vbhtml (VB). Disponible a partir de MVC 3.

Los tipo de vista son:

View Page: Vista principal. 

Layout View: Página maestra, define una apariencia común que será usada por otras vistas. 

View Content Page: Vista que utiliza una página maestra predefinida. 

Partial  View:  Vista  que  se  utiliza  desde  otra  y  no  se  puede  llamar directamente. Similar a cómo se utilizaban los User Controls en Web Forms. La vista parcial tiene acceso a su ViewData y al de la vista primaria, pero las actualizaciones de los datos de la vista parcial solo afectan a su viewData y no a la de la vista primaria.

Cuando se implementar toda vista hay que considerar las convenciones, quiere decir que hay un par de convenciones  que  se  usan  al  trabajar  con  las  vistas,  las  cuales ahorran configuración en la etapa de desarrollo:

Estructura  de  carpetas:  Los  controladores  se nombran TuNombreController, y  las vistas estarán en una carpeta  llamada TuNombre dentro de  la carpeta Views. De esta manera, el controlador encontrará la vista sin problemas.

Return View(): No se especifica explícitamente qué vista se está devolviendo desde  el  action method;  se  toma  el  nombre  de este  action  method  para encontrar la vista.

Todo esto se observara en la implementación que realizara, sin mayor detalle manos a la obra.

1.  Iniciamos ubicándonos en nuestro controlador creado de nombre LoginController, como se indico en la fase anterior se implemento el método la el acceso a datos. Ahora se creará la vista, clic derecho en la acción Login de tipo HttpGet.

Luego agregamos en nombre login, razor como motor de vistas y estará asociado a clase modelo Login y asociamos a la vista maestra, clic en aceptar.

2.  Ahora revisamos la vista que acabamos de generar de nombre Login. Se adiciono el modelo, titulo y esta asociada a la vista maestra.

2.1. En la vista login implementaremos nuestro .BeginForm() es el encargado de encaminar el enrutamiento del como llegar a la acción que está enviando un HTTP POST al url, es decir es el encargado de pasar los datos que se implemento en anterior fase (public ActionResult Login(Login login): Acción para control de la validación, acceso del login y redireccionar la vista según validación).  Espero mas adelante hablar robre las bondades de razor.

@model PRO_SEGURIDAD.Models.Login

@{
    ViewBag.Title = "Login";
    Layout = "~/Views/Shared/_Layout.cshtml";
}



Iniciar Sesion
@using (Html.BeginForm()){
            @Html.AntiForgeryToken()
                        
            
@Html.ValidationSummary()
            
Usuario :
                @Html.TextBoxFor(m => m.usuario)
                @Html.ValidationMessageFor(m => m.usuario)
            
Password:
                @Html.PasswordFor(m => m.password)
                @Html.ValidationMessageFor(m => m.password)
            
<'input class="btn btn-success btn-pressure" id="BtnLogin" name="BtnLogin" type="submit" value="Login" />
                <'input class="btn btn-info btn-pressure" id="BtnReset" name="BtnReset" type="reset" value="Reset" />
            
}

3.  Además ubicándonos en nuestro controlador creado de nombre DashboardController (solo se creo 2 acciones AdminDashboard() y UsuarioDashboard()). Para crear la vista clic derecho en la vista AdminDashboard() y clic en Agregar Vista.

Luego definimos el nombre, se recomienda llamarlo al igual que las acciones, el motor de vista es nuestro caso es Razor y relacionamos la vista a la vista maestra y clic en agregar. Ambas vista por ahora no se asociara ninguna clase de modelo (más adelante lo haremos de manera manual).

Para ambos se debe repetir el mismo proceso de agrega la vista.

3.1. En la vista AdminDashboard() agregaremos los siguiente datos:

3.2. Al igual que en la vista UsuarioDashboard():

4. Con toda está implementación ya tenemos lista para poder ejecutar nuestra aplicación y probar el acceso según los role Admin o Usuario:

4.1. En primera instancia veremos la validaciones que se esta realizando desde el modelo de datos. En el caso que no se ingresa ningún datos.

En el caso que no se ingrese en password

4.2. Acceso como Admin - Esta asociado a la vista AdminDashboard:

Acceso como Usuario - Esta asociado a la vista UsuarioDashboard:

Pueden descargar la fuente desde:

 

Espero les agrede y les sirva, nos vemos en la siguiente fase que haremos uso del framework bootstrap para mejor el diseño.