MVC Framework - Vistas

Como se vio en los capítulos introductorios iniciales, View es el componente involucrado con la interfaz de usuario de la aplicación. Estas vistas generalmente se vinculan a partir de los datos del modelo y tienen extensiones como html, aspx, cshtml, vbhtml, etc. En nuestra primera aplicación MVC, usamos Vistas con controlador para mostrar datos al usuario final. Para representar este contenido estático y dinámico en el navegador, MVC Framework utiliza View Engines. Los motores de visualización son básicamente una implementación de sintaxis de marcado, que son responsables de representar el HTML final en el navegador.

MVC Framework viene con dos motores de vista integrados:

Razor Engine- Razor es una sintaxis de marcado que habilita el código C # o VB del lado del servidor en páginas web. Este código del lado del servidor se puede utilizar para crear contenido dinámico cuando se carga la página web. Razor es un motor avanzado en comparación con el motor ASPX y se lanzó en las versiones posteriores de MVC.

ASPX Engine- ASPX o el motor de formularios Web Forms es el motor de visualización predeterminado que se incluye en MVC Framework desde el principio. Escribir un código con este motor es similar a escribir un código en ASP.NET Web Forms.

A continuación, se muestran pequeños fragmentos de código que comparan tanto el motor Razor como el motor ASPX.

Maquinilla de afeitar

@Html.ActionLink("Create New", "UserAdd")

ASPX

<% Html.ActionLink("SignUp", "SignUp") %>

De estos dos, Razor es un motor de visualización avanzado, ya que viene con una sintaxis compacta, enfoques de desarrollo basados ​​en pruebas y mejores características de seguridad. Usaremos el motor Razor en todos nuestros ejemplos, ya que es el motor de visualización más utilizado.

Estos motores de visualización se pueden codificar e implementar en los siguientes dos tipos:

• Fuertemente tipado
• Tipo dinámico

Estos enfoques son similares a la vinculación temprana y la vinculación tardía, respectivamente, en los que los modelos se vincularán a la Vista de forma fuerte o dinámica.

Vistas fuertemente tipadas

Para comprender este concepto, creemos una aplicación MVC de muestra (siga los pasos de los capítulos anteriores) y agreguemos un archivo de clase de controlador llamado ViewDemoController.

Ahora, copie el siguiente código en el archivo del controlador:

using System.Collections.Generic; 
using System.Web.Mvc;  

namespace ViewsInMVC.Controllers { 
   
   public class ViewDemoController : Controller { 
      
      public class Blog { 
         public string Name; 
         public string URL; 
      }  
      
      private readonly List topBlogs = new List { 
         new Blog { Name = "Joe Delage", URL = "http://tutorialspoint/joe/"}, 
         new Blog {Name = "Mark Dsouza", URL = "http://tutorialspoint/mark"}, 
         new Blog {Name = "Michael Shawn", URL = "http://tutorialspoint/michael"} 
      };  
      
      public ActionResult StonglyTypedIndex() { 
         return View(topBlogs); 
      }  
      
      public ActionResult IndexNotStonglyTyped() { 
         return View(topBlogs); 
      }   
   } 
}

En el código anterior, tenemos dos métodos de acción definidos: StronglyTypedIndex y IndexNotStonglyTyped. Ahora agregaremos Vistas para estos métodos de acción.

Haga clic con el botón derecho en el método de acción StonglyTypedIndex y haga clic en Agregar vista. En la siguiente ventana, marque la casilla de verificación 'Crear una vista fuertemente tipada'. Esto también habilitará las opciones de plantilla de clase de modelo y andamio. Seleccione la opción Lista de plantilla de andamio. Haga clic en Agregar.

Se creará un archivo de vista similar a la siguiente captura de pantalla. Como puede observar, ha incluido la clase de modelo Blog de ViewDemoController en la parte superior. También podrá utilizar IntelliSense en su código con este enfoque.

Vistas dinámicas con tipo

Para crear vistas dinámicas mecanografiadas, haga clic con el botón derecho en la acción IndexNotStonglyTyped y haga clic en Agregar vista.

Esta vez, no seleccione la casilla de verificación "Crear una vista fuertemente tipada".

La vista resultante tendrá el siguiente código:

@model dynamic 
            
@{ 
   ViewBag.Title = "IndexNotStonglyTyped"; 
}

<h2>Index Not Stongly Typed</h2>  
<p> 
   <ul> 
      
      @foreach (var blog in Model) { 
         <li> 
            <a href = "@blog.URL">@blog.Name</a> 
         </li>    
      } 
   
   </ul> 
</p>

Como puede ver en el código anterior, esta vez no agregó el modelo Blog a la Vista como en el caso anterior. Además, esta vez no podrá usar IntelliSense porque esta vez el enlace se realizará en tiempo de ejecución.

Las Vistas fuertemente tipadas se consideran un mejor enfoque, ya que sabemos qué datos se pasan como modelo, a diferencia de las Vistas dinámicas tipadas en las que los datos se vinculan en tiempo de ejecución y pueden provocar errores en tiempo de ejecución, si algo cambia en el modelo vinculado.