Saltar apartados

Model

Creant un model

El procés de traspàs d'informació entre el procediment i la vista es pot fer interminable quan volem passar molta informació.

És el moment de crear un model i començar a travar amb els 3 elements de MVC.

Per a crear un model ens anem a la carpeta Models, i amb el botó dret seleccionem Agregar -> Classe …

Crear una clase en la carpeta donde se almacenan los modelos

i la cridem catalogador.cs.

Ara li afegim 3 propietats. Ací comença una de les diferències amb el que estàvem acostumats, perquè ens anem a definir unes variables privades i al seu torn unes propietats públiques per a referenciar-les. El format serà el següent:

///

/// Descripció de la propietat

///

public tipus NombrePropiedad

{

get;

set;

}

D'aquesta forma la podem instanciar i a més usar com XXXXX.

En el nostre cas anem a afegir 5 propietats:

• 3 de tipus cadena de text, Descripció, CSS i Logo

• 1 de tipus booleà, Visible

• 1 de tipus sencer, Aneu

El resultat seria el següent

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace MvcUA.Models

{

///

/// Classe per a gestionar el Catalogador

///

public class catalogador

{

///

/// Identificador únic de cada Catàleg

///

public int Aneu

{

get;

set;

}

///

/// Indiquem el nom complet del Catàleg

///

public string Descripcion

{

get;

set;

}

///

/// Fulla d'estil que defineix al catalogador

///

public string Css

{

get;

set;

}

///

/// Logo del catalogador

///

public string Logo

{

get;

set;

}

///

/// Indiquem si el Catàleg és visible o no

///

public bool Visible

{

get;

set;

}

}

}

Ara anem a instanciarlo des d'un controlador. Anem a crear un de nou que es cride CatalogadorController. Ens vam crear un nou mètode que serà Editar, al que no passarem de moment cap paràmetre.

Com volem accedir al model, hem d'incloure en la capçalera un accés als models.

using MvcUA.Models;

Ara podem instanciarlo des del mètode Editar.

public ActionResult Editar()

{

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

return View(cat);

}

Com podeu observar, es pot definir les propietats de l'objecte en el moment de la definició. En el nostre cas hem definit l'Aneu, la Descripció i si és Visible.

Després ho assignem com a paràmetre en la trucada View.

Usant el model en la vista

Ara anem a crear una vista per a aquest mètode. Ens situem sobre el mètode i amb el botó dret, seleccionem la primera opció Add View …

Asignar un modelo cuando creamos una vista

Marquem Create a strongly-typed view i tractem de seleccionar la classe catalogador. Si no apareix (com el cas de la imatge) es deu al fet que abans hem de generar la solució i així l'entorn reconeix els canvis afegim (especialment les referències using que hàgem afegit).

Per tant generem la solució i tornem a repetir el procés. Ara veurem que sí que ens deixa seleccionar la classe i a més se'ns activa el desplegable de view content. Seleccionem Edit.

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

Veiem que ens genera molt codi, però que en el fons és una descripció i una caixa per a cada propietat de l'objecte.

En la part superior fa referència al model amb el qual va a treballar.

Si ens fixem en un qualsevol dels camps, veiem que fa ús de les propietats amb model => model.NOMBREPROPIEDAD

div class="editor-label">

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

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

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

Ara és moment de provar el que hem fet i poder veure les bondats que comença a aportar-nos aquest entorn.

Premem CTRL+F5 i afegim a la URL per defecte / per /Catalogador/Editar

Visualización del modelo en el navegador

Ens ha creat tots els camps i a més ens permet tornar al llistat de tots els catalogadores (per defecte dóna per fet que és el mètode Index)

Anem a millorar la vista i anem a realitzar un parell de canvis per a millorar l'aparença.

  1. Anem a fer que el camp Visible siga un checkbox.
    Ho defineix com <%= Html.TextBoxFor(model => model.Visible) %>
    Esborrem TextBoxFor i si comencem a escriure veiem que ens ofereix CheckBoxFor<%= Html.CheckBoxFor(model => model.Visible) %>
  2. Anem a canviar la descripció del requadre de tots els camps, passant de Fields a Catalogador
    Catalogador
  3. Canviem la descripció del botó Save. Cerquem el botó submit i canviem el seu value per Actualitzar
  4. Canviem la descripció i l'enllaç de Back to List. Per a açò ens anem a l'element Html.ActionLink que després veurem amb més detall, perquè és molt útil i canviem la descripció d'una banda i el mètode al que cridem.
    <%= Html.ActionLink("Llistat de Catalogadores", "Llistat") %>

Generem la solució i veiem els canvis.

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

Açò ja comença a ser una mica més semblat al que cerquem, però és el moment d'afegir una Pàgina Mestra al projecte (Master Page) per a donar-li un aspecte més professional.

Anem a afegir-la en la carpeta Views->Shared perquè siga compartida per totes les vistes. Seleccionem Agregar -> Element existent …

Incorporando páginas principales (masterpage) a las vistas

I la cerquem en la carpeta compartida amb el professor. Té el nom Site.Master.

Si tot és correcte apareixerà en la carpeta.

Ubicación masterpage en el proyecto

Ara ja podem usar-la quan creiem qualsevol vista, però si volem assignar-la a la vista ja creada, ens anem a la capçalera de la vista i comencem a escriure MasterPageFile= i prement Intro sobre l'assistent, ens permet cercar la Pàgina Maestro.

Uso masterpages en una vista

Seleccionem la que hem afegit anteriorment i hem d'esborrar el codi HTML que tenim en la vista i ho convertim en un ContentPlaceHolder que on situa el contingut la Pàgina Mestra. Açò que estem fent no és molt normal però ens va a permetre que una pàgina que no s'ha generat amb Pàgina Mestra puga usar-les.

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

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

<%= Html.ValidationSummary(true) %>

El resultat final ho podem veure en generar la solució.

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

Servei d'Informàtica ASP.NET MVC 2 Framework


Universitat d'Alacant
Carretera de Sant Vicent del Raspeig s/n
03690 Sant Vicent del Raspeig
Alacant (Spain)

Tel: (+34) 96 590 3400

Fax: (+34) 96 590 3464

Per a més informació: informacio@ua.es, i per a temes relacionats amb aquest servidor web: webmaster@ua.es

Carretera de Sant Vicent del Raspeig, s/n - 03690 Sant Vicent del Raspeig - Alacant - Tel.: 96 590 3400 - Fax: 96 590 3464