Saltar apartados

Vista

 

Introducción

El siguiente paso después de crear el controlador es personalizarlo para visualizarlo. Esta fase se desarrolla con las vistas. Hoy veremos la parte más básica y en días posteriores veremos como personalizarlas.

Si seguimos con el controlador  demo que hemos usado anteriormente, lo primero que debemos hacer es volver a cambiar el tipo de devolución de datos de nuestros métodos de string a ActionResult. Luego cambiar el return “cadena de texto” por return View().

        public string Index()
        {
            return "Acceso al método por defecto";
        }

Pasa a

        public ActionResult Index()
        {           
            return View();
        }

El que la palabra View aparezca en rojo nos indica que no hemos declarado la vista para ese método. Para hacerlo nos ponemos dentro del código del método (lo más cómodo es hacerlo sobre la declaración de éste) y pulsamos botón derecho  y seleccionar Add View…

Crear vista

Aparece una ventana con muchas opciones, pero la mayoría desactivadas. Las opciones por defecto seleccionan el motor de trabajo Razor y que utilice layout o master page. La dejamos tal cual y pulsamos Add.

Nombre vista

Nos genera un código muy básico

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

Que si lo visualizamos en el navegador obtendremos

Vista en la web

 

 

Del código generado destacar tres cosas

  1. La sintaxis @{ .. } es de Razor y nos permite ejecutar código C# o el lenguaje con el que se trabaje en el proyecto. Hoy y mañana lo veremos con detalle.
  2. Aparece un objeto ViewBag que no hemos declarado, pero que tiene propiedades, en este caso Title. Este objeto se usa para pasar datos entre nuestro controlador y la vista.
  3. Por defecto usa como master page el que esté definido por defecto (Views > Shared > _Layout.cshtml)

    Por ejemplo si queremos mostrar el mensaje  "Acceso al método por defecto" dentro de la vista y que sea el propio controlador quien se lo mande, deberíamos incluir una línea más en el controlador, asignando una nueva propiedad a ViewBag el texto que queramos. En este caso se los asigno a Mensaje, pero podría usarse cualquier otro nombre.

            public ActionResult Index()
            {
                ViewBag.Mensaje = "Acceso al método por defecto";
                return View();
            }

  4. Pulsando e botón derecho dentro del código del método y en esta ocasión seleccionar  Go To View

    Acceder a la vista
  5. Accediendo a la capeta Views, desplegar Demo y visualizaremos Index.cshtml. Doble clic sobre el fichero y lo tendremos abierto para trabajar.

    Carpetas de las vistas

 

Ahora incorporamos código para visualizar el mensaje. Con Razor se hace con @NombreVariable o @NombreObjeto.Propiedad

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
@ViewBag.Mensaje

 

El resultado sería el siguiente

Mensaje en la vista en la web

 

 

La primera impresión que tenemos al trabajar con Razor es que estamos volviendo al ASP clásico (VBScript) o que tenemos que aprender un nuevo lenguaje.

Con un ejemplo creo que quedará más claro. Con WebForms cuando queríamos escribir código teníamos dos formas en el ASPX o en el CS.

ASPX

<% if(User.Type == “admin”) { %>
<span>Hola, <%= User.Username %></span>
<% } %>
<% else { %>
<span>Debes identificarte para poder acceder a esta sección</span>
<% } %>

 

CS

if(User.Type == “admin”) {
Response.Write (“<span>Hola, “ + User.Username + “</span>”);
}
else {
Response.Write (“<span>Debes identificarte para poder acceder a esta sección</span>”);
}

En Razor queda menos engorroso el código, ya que el HTML y la sintaxis propia, se integran perfectamente.

@if(User.Type == "admin") {
    <span>Hola, @User.Username</span>
} else {
    <span> Debes identificarte para poder acceder a esta sección </span>
}

Servicio de Informática ASP.NET MVC 3 Framework


Universidad de Alicante
Carretera de San Vicente del Raspeig s/n
03690 San Vicente del Raspeig
Alicante (Spain)

Tel: (+34) 96 590 3400

Fax: (+34) 96 590 3464

Para más información: informacio@ua.es, y para temas relacionados con este servidor Web: webmaster@ua.es

Carretera San Vicente del Raspeig s/n - 03690 San Vicente del Raspeig - Alicante - Tel. 96 590 3400 - Fax 96 590 3464