Saltar apartados

Modelo

Creando un modelo

El proceso de traspaso de información entre el procedimiento y la vista se puede hacer interminable cuando queremos pasar mucha información.

Es el momento de crear un modelo y comenzar a trabar con los 3 elementos de MVC.

Para crear un modelo nos vamos a la carpeta Models, y con el botón derecho seleccionamos Agregar -> Clase …

Crear una clase en la carpeta donde se almacenan los modelos

y la llamamos catalogador.cs.

Ahora le añadimos 3 propiedades. Aquí comienza una de las diferencias con lo que estábamos acostumbrados, porque nos vamos a definir unas variables privadas y a su vez unas propiedades públicas para referenciarlas. El formato será el siguiente:

        /// <summary>

        /// Descripción de la propiedad

        /// </summary>

        public tipo NombrePropiedad

        {

            get;

            set;

        }

De esta forma la podemos instanciar y además usar como XXXXX.

En nuestro caso vamos a añadir 5 propiedades:

• 3 de tipo cadena de texto, Descripción, CSS y Logo

• 1 de tipo booleano, Visible

• 1 de tipo entero, Id

El resultado sería el siguiente

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

 

namespace MvcUA.Models

{

    /// <summary>

    /// Clase para gestionar el Catalogador

    /// </summary>

    public class catalogador

    {

        /// <summary>

        /// Identificador único de cada Catálogo

        /// </summary>

        public int Id

        {

            get;

            set;

        }

 

        /// <summary>

        /// Indicamos el nombre completo del Catálogo

        /// </summary>

        public string Descripcion

        {

            get;

            set;

        }

 

        /// <summary>

        /// Hoja de estilo que define al catalogador

        /// </summary>

        public string Css

        {

            get;

            set;

        }

 

        /// <summary>

        /// Logo del catalogador

        /// </summary>

        public string Logo

        {

            get;

            set;

        }

 

        /// <summary>

        /// Indicamos si el Catálogo es visible o no

        /// </summary>

        public bool Visible

        {

            get;

            set;

        }   

    }

}

 

Ahora vamos a instanciarlo desde un controlador. Vamos a crear uno nuevo que se llame CatalogadorController. Nos creamos un nuevo método que será Editar, al que no pasaremos por el momento ningún parámetro.

Como queremos acceder al modelo, debemos incluir en la cabecera un acceso a los modelos.

using MvcUA.Models;

Ahora podemos instanciarlo desde el método Editar.

        public ActionResult Editar()

        {

            catalogador cat = new catalogador { Id = 1, Descripcion = "Catalogador 1", Visible = false };

            return View(cat);

        }

Como podéis observar, se puede definir las propiedades del objeto en el momento de la definición. En nuestro caso hemos definido el Id, la Descripción y si es Visible.

Luego lo asignamos como parámetro en la llamada View.

 

 

Usando el modelo en la vista

Ahora vamos a crear una vista para este método. Nos situamos sobre el método y con el botón derecho, seleccionamos la primera opción Add View …

 Asignar un modelo cuando creamos una vista

Marcamos Create a strongly-typed view y tratamos de seleccionar la clase catalogador. Si no aparece (como el caso de la imagen) se debe a que antes debemos generar la solución y así el entorno reconoce los cambios añadimos (especialmente las referencias using que hayamos añadido).

Por tanto generamos la solución y volvemos a repetir el proceso. Ahora veremos que sí que nos deja seleccionar la clase y además se nos activa el desplegable de view content. Seleccionamos Edit.

 Visualización del modelo en la vista después de generar la solución

Vemos que nos genera mucho código, pero que en el fondo es una descripción y una caja para cada propiedad del objeto.

En la parte superior hace referencia al modelo con el que va a trabajar.

Si nos fijamos en uno cualquiera de los campos, vemos que hace uso de las propiedades con model => model.NOMBREPROPIEDAD

            div class="editor-label">

                <%= Html.LabelFor(model => model.Id) %>

            </div>

            <div class="editor-field">

                <%= Html.TextBoxFor(model => model.Id) %>

                <%= Html.ValidationMessageFor(model => model.Id) %>

            </div>

 

Ahora es momento de probar lo que hemos hecho y poder ver las bondades que comienza a aportarnos este entorno.

Pulsamos CTRL+F5 y añadimos a la URL por defecto / por /Catalogador/Editar

Visualización del modelo en el navegador

 

Nos ha creado todos los campos y además nos permite volver al listado de todos los catalogadores (por defecto da por hecho que es el método Index)

Vamos a mejorar la vista y vamos a realizar un par de cambios para mejorar la apariencia.

  1. Vamos a hacer que el campo Visible sea un checkbox.
    Lo define como <%= Html.TextBoxFor(model => model.Visible) %>
    Borramos TextBoxFor y si comenzamos a escribir vemos que nos ofrece CheckBoxFor<%= Html.CheckBoxFor(model => model.Visible) %>
  2. Vamos a cambiar la descripción del recuadro de todos los campos, pasando de Fields a Catalogador
    <legend>Catalogador</legend>
  3. Cambiamos la descripción del botón Save. Buscamos el botón submit y cambiamos su value por Actualizar
    <input type="submit" value="Actualizar" />
  4. Cambiamos la descripción y el enlace de Back to List. Para eso nos vamos al elemento Html.ActionLink que luego veremos con más detalle, porque es muy útil y cambiamos la descripción por una parte y el método al que llamamos.
    <%= Html.ActionLink("Listado de Catalogadores", "Listado") %>

Generamos la solución y vemos los cambios.

Pequeños cambios en la vista para visualizar mejor el modelo

Esto ya comienza a ser algo más parecido a lo que buscamos, pero es el momento de añadir una Página Maestra al proyecto (Master Page) para darle un aspecto más profesional.

Vamos a añadirla en la carpeta Views->Shared para que sea compartida por todas las vistas. Seleccionamos Agregar -> Elemento existente …

Incorporando páginas principales (masterpage) a las vistas

Y la buscamos en la carpeta compartida con el profesor. Tiene el nombre Site.Master.

Si todo es correcto aparecerá en la carpeta.

Ubicación masterpage en el proyecto

Ahora ya podemos usarla cuando creemos cualquier vista, pero si queremos asignarla a la vista ya creada, nos vamos a la cabecera de la vista y comenzamos a escribir MasterPageFile= y pulsando Intro sobre el asistente, nos permite buscar la Página Maestro.

Uso masterpages en una vista

Seleccionamos la que hemos añadido anteriormente y tenemos que borrar el código HTML que tenemos en la vista y lo convertimos en un ContentPlaceHolder que dónde ubica el contenido la Página Maestra. Esto que estamos haciendo no es muy normal pero nos va a permitir que una página que no se ha generado con Página Maestra pueda usarlas.

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcUA.Models.catalogador>" %>

 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

 

    <% using (Html.BeginForm()) {%>

        <%= Html.ValidationSummary(true) %>

 

        <fieldset>

 

         …

 

</asp:Content>

 

El resultado final lo podemos ver al generar la solución.

Visualizar el modelo con la página principal (masterpage)

Servicio de Informática ASP.NET MVC 2 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