Andres Felipe Blog's

My WordPress Blog

aprendiendo-asp-net-mvc-4-parte-5-vistas

Aprendiendo ASP.NET MVC 4 [Parte 5] – Vistas

Hola a todos !! hoy les presento un nuevo articulo sobre ASP.NET MVC 4, el tema de hoy es entender el manejo de vistas a través del motor de plantillas Razor. Antes de iniciar, debemos saber que el MVC incluye dos motores de vistas (view engines):

  • ASPX view engine: Es el motor original incluido desde la versión 1 de MVC y la sintaxis es similar a los Web Forms.
  • Razor view engine: Es el nuuevo motor de plantillas incluido desde la versión 4 de MVC y posee una sintaxis mas simple y fluida.

Estas son algunas comparaciones entre los motores:

ASPX

1
2
<%--ASPX--%>
<%=DateTime.Now %>

Razor

1
2
@*Razor*@
@DateTime.Now

Ambos códigos hacen los mismo, simplemente muestran en pantalla la  fecha y la hora actual; pero podemos ver una gran diferencia entre un motor y otro; con razor es menos código comparado con Aspx.

Sentencia IF

ASPX

1
2
3
4
5
6
7
<%--ASPX--%>
<% if (DateTime.Today.Year == 2013) { %>
<span> Current year </span>
<% }
else { %>
<span> Past year </span>
<% } %>

Razor

1
2
3
4
5
6
7
@*Razor*@
@if (DateTime.Today.Year == 2013) {
<span> Current year </span>
}
else {
<span> Past year </span>
}

Con razor no es necesario preocuparse con las llaves de apertura y se puede realizar una lectura mas limpia del código fuente.

Trabajado con Vistas

aprendiendo-asp-net-mvc-4-parte-5-vistas

Img 1 – Creación de una Vista desde el Controlador

La creación de vistas en muy sencillo, en el anterior articulo se creo el controlador PetController para el proyecto Heve You Seen Me? estudiado en articulo Creación de un Proyecto y Base de Datos. Entonces ingresamos al controlador y hacemos click derecho sobre la función View() de la acción que deseamos crearle una vista (Ver Img 1), después debemos seleccionar el nombre y el motor que se va usar, por lo general y por convenció se utiliza el mismo nombre de la acción (Ver Img 2) y se deja por defecto el motor Razor (CSHTML).

http://andresfelipetrujillo.com/wp-content/uploads/2014/08/captura-de-pantalla-2014-08-08-a-las-20-15-33.png

Img 2 – Parámetros de la vista

Ahora el  Framework nos genera un conjunto de archivo en la carpeta vistas en el explorador del proyecto y ahí se almacenaran todas las vistas del proyecto. Si en la acción deseamos llamar a otros vista que no tiene por defecto el mismo nombre, se hacer de la siguiente forma:

1
return View("otraVista");

Características Especiales de las Vistas

Las vistas en MVC 4 ofrecen tres características adicionales de las cuales se puede especificar, si nos fijamos en la Imagen (Img 2) están las tres opciones que mención Create a strongly-typed view, Create as a parcial view y Use a layout or master page:

  • Create a strongly-typed view (Creación de Vistas de Tipado Fuerte): Esta casilla se selecciona cuando la vista va a estar relacionada a un Modelo y este objeto debe ser un parámetro de la acción en el controlador.
  • Create as a parcial view (Creacion de Vistas Parciales): Cuando es necesario reutilizar código HTLM en diferentes partes del proyecto, se crea una vista de este tipo. Por ejemplo el menú debe estar presente en gran parte de la aplicación, esta vista seria parcial y solo se crearía una sola vez.
  •   Use a layout or master page (Usar como Plantilla o Pagina Maestra): Es vista generica de toda la aplicación, es la que contendrá el llamado a los archivo JS y CSS.

Veamos algunos ejemplos del uso de estas características:

Create a strongly-typed view

La creación de esta vista es muy común en el desarrollo de aplicaciones sobre MVC 4, en la Linea 1 se define el objeto que proviene del Modelo. En la Linea 4 se crea el control necesario para el campo Name del Objeto Speker, como es un campo de texto el Framework genera un elemento HTML de tipo Input Text. En la Linea 27 se crea un elemento HTML de tipo FROM por medio de un Helper llamado BegingForm,

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@model Conference.Models.Speaker

@{
    ViewBag.Title = "Delete";
}

<h2>Delete</h2>

<h3>Are you sure you want to delete this?</h3>
<fieldset>
    <legend>Speaker</legend>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Name)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Name)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.EmailAdress)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.EmailAdress)
    </div>
</fieldset>
@using (Html.BeginForm()) {
    <p>
        <input type="submit" value="Delete" /> |
        @Html.ActionLink("Back to List", "Index")
    </p>
}

Create as a parcial view

Para crea una vista parcial se debe nombrar de la siguiente forma: _NombreVistaParcial, la nombre se le debe anteponer el símbolo “_”. Este ejemplo fue rolado del archivo _LoginPartial.cshtml ubicado en la carpeta /Views/Shared y valida si el usuario esta autenticado, si no lo esta le muestra dos botones para Registrase o Ingresar; Linea 11 y 12 respectivamente. Pero si esta autenticado le monteara un mensaje de bienvenida y aparecerá un formulario con un botón para salir de la sesión.

Si notan esta validación se debe hacer en todo el sistema, por eso se crea como vista parcial para que puede ser reutilizado en cualquier parte de la aplicación.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
@if (Request.IsAuthenticated) {
    <text>
        ¡Hola, @Html.ActionLink(User.Identity.Name, "Manage", "Account", routeValues: null, htmlAttributes: new { @class = "username", title = "Administrar" })!
        @using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" })) {
            @Html.AntiForgeryToken()
            <a href="javascript:document.getElementById('logoutForm').submit()">Cerrar sesión</a>
        }
    </text>
} else {
    <ul>
        <li>@Html.ActionLink("Registrarse", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
        <li>@Html.ActionLink("Iniciar sesión", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
    </ul>
}

 Use a layout or master page

 Las vista de este tipo deben cumplir la misma regla para llamar el archivo, al nombre se le debe anteponer el símbolo “_”, este ejemplo fue tomado del archivo _Layout.cshtml y representa el molde general de la aplicación a nivel de presentación.  Si notamos se define el html general, los metadatos, la cabecera y el cuerpo de todo el software, en la Linea 9 y 10 se llaman los archivo JS y CSS, en la Linea 16 se crea un enlace por medio del Helper ActionLink, en la Linea 20 se hace el llamado a la vista parcial “_LoginPartial.cshtml“, de la Linea 24 a la 27 se define el menú principal y en la Linea 35 se hace el llamado dinámico de las vistas llamadas por el Controlador por medio de la función RenderBody().

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="es">
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - Mi aplicación ASP.NET MVC</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title">@Html.ActionLink("su logotipo aquí", "Index", "Home")</p>
                </div>
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("Inicio", "Index", "Home")</li>
                            <li>@Html.ActionLink("Acerca de", "About", "Home")</li>
                            <li>@Html.ActionLink("Contacto", "Contact", "Home")</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - Mi aplicación ASP.NET MVC</p>
                </div>
            </div>
        </footer>

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

Conclusión

Se definió los dos tipo de motores que usa la versión MVC 4, también se explico como crear un vista desde la clase del Controlador y las diferentes características de las vistas. Mas adelante profundizaremos en el uso de Helpers por el momento terminamos. Si tiene alguno duda, pregunten !! y repito mi frase “Un sabio nace a partir de la duda” … chaolin 🙂 !!!

Anterior

Entendiendo el Patron MVC (Modelo, Vista, Controlador)

Siguiente

Aprendiendo Symfony 2 [Parte 2] – Documentación

  1. Exclenet gracias.Cuando Salen mas tutoriales?

  2. Pindaro

    Podrias seguir con el curso la verdad esta muy bien explicado. Saludos.

Deja un comentario

Creado con WordPress & Tema de Anders Norén