Personalizacion y Validacion Basica

SERVICIO DE INFORMTICA | UNIVERSIDAD DE ALICANTE
ASP.NET MVC 3 y 4
PERSONALIZACIN 2
Andrs Valls Botella | Analista | Desarrollos propios
Servicio de Informtica | Universidad de Alicante
Campus de Sant Vicent del Raspeig | 03690 | Espaa
http://si.ua.es/es/
LTIMA ACTUALIZACIN: 22 DE OCTUBRE DE 2012
ASP.NET MVC 3 Y 4 | DESARROLLO DE APLICACIONES CON EL FRAMEWORK MVC 3 Y 4
4 DA PERSONALIZACIN 2
ENTITY FRAMEWORK VISTAS Y PAQUETES
Hasta el momento cuando trabajamos con base de datos, hemos accedido a las tablas directamente.
Una buena costumbre es crear vistas para el acceso a los datos y as evitar el acceso a las tablas, y
paquetes para la gestin de las tablas.
En el caso de las vistas, si estn bien hechas, nos olvidamos del tema de tener que hacer includes
dentro de nuestra consulta, porque en la mayora de los casos tendremos esos campos que
queremos mostrar en la propia vista.
En cuanto a los paquetes debemos crear un procedimiento para las 3 operaciones bsicas: insercin,
actualizacin y borrado. Aunque estamos acostumbrados a integrar la insercin y la actualizacin en
una, para EF las vamos a dividir en dos ALTA_LIBRO y MODIF_LIBRO.
Si queremos lo probamos desde el propio SQL Developer, y si todo es correcto, vamos al Visual
Studio, a la entidad (en nuestro caso ModelBiblioteca.edmx) y pulsamos botn derecho > Actualizar
modelo desde base de datos
Y seleccionamos los procedimientos almacenados que nos interesen.

http://si.ua.es/es
Ahora debemos asociar cada operacin a un procedimiento. Nos situamos en la tabla CSI_TABLA,
pulsamos el botn derecho y seleccionamos Asignacin de procedimientos almacenados.
En la parte inferior del Visual Studio nos aparece un panel para poder hacer la asociacin.
Pulsamos sobre <Seleccionar Insert Function> y aparece un desplegable con todos los
procedimientos que tengamos. Seleccionamos PKG_CSI_ALTA_LIBRO. Todos los parmetros
aparecen disponibles para su asignacin, vamos uno a uno asignando. En el nico que hay que tener
cuidado es en TIPOLIBRO porque aparecen dos posibilidades CSI_TIPOLIBRO.ID (que es la relacin
entre las tablas) y TIPOLIBRO. Es este segundo campo el que debemos seleccionar.
Por tanto debe quedar de la siguiente manera la asignacin.
Para poder probarlo deberamos quitarnos los permisos de escritura en la tabla y darnos de
ejecuacin en el paquete. Otra forma es incluir una tabla de log y cuando hagamos cualquier
operacin en un procedimiento escriba en ella.
http://si.ua.es/es
Creamos la tabla CSI_LOG con al menos un campo para el mensajey otro para la fecha. Por defecto
ponemos el valor de fecha a sysdate.
Ahora dentro del procedimiento de alta, despus de aadir e libro incluimos una entrada en el log.
INSERT INTO CSI_LOG (MENSAJE) VALUES ('Alta de un nuevo libro: ' || PTITULO);
Ahora compilamos el proyecto, y al dar de alta un nuevo libro, por cada operacin debe aparecer una
entrada en el fichro de Log.
El usar una vista en EF es muy sencillo. La creamos con Oracle SQL Developer. Accedemos a la
entidad en el proyecto (en nuestro caso ModelBiblioteca.edmx) y pulsamos botn derecho >
Actualizar modelo desde base de datos
Y en la pestaa de agregar seleccionamos la vista y pulsamos finalizar.
Si todo es correcto, se habr incluido al diagrama como una tabla ms.

http://si.ua.es/es
Un problema con el que nos podemos encontrar es con la deteccin de claves primarias en la vista.
En este caso pone claves primarias a muchos campos que no lo son. Nos ponemos sobre cada campo
y con e botn derecho desmarcamos clave de entidad. De no hacerlo, todos aquellos campos que
son clave los oculta en los listados, en la gestin, etc.
Para probarla vamos a crear un nuevo controlador libro2 que trabaje con esta vista. Para que la
reconozca el controlador, vamos a compilar el proyecto con F6 y seguimos el proceso de otras
ocasiones, botn derecho sobre carpeta Controllers > Agregar > Controlador
Lo probamos y vemos que aparecen todos los campos de la vista. Como el Id del tipo de libro no me
interesa mostrarlo, podemos modificar las vistas para que no lo solicite.

http://si.ua.es/es
.
A primera vista parece que nos ha generado lo mismo que con las tablas, pero qu campos nos
muestra cuando queremos editar o crear un libro? Pues todos los de la vista incluyendo el id y la
descripcin del tipo de libro (como era lgico). En este caso no queremos ni el id ni la descripcin,
necesitamos un desplegable con los tipos y que podamos seleccionar el que nos interese.
Aqu tenemos que programar un poco. Comenzamos con el de editar. Accedemos al controlador y
despus de cargar el libro desde la vista
VCSI_LIBRO vcsi_libro = db.VCSI_LIBRO.Single(v => v.ID_LIBRO == id);
Vamos a cargar todos los tipos de libros (aun lo seguimos haciendo con tablas pero lo normal es que
fuera otra vista) y vamos a indicar cual est seleccionado. Usamos el objeto SelectList y le pasamos 4
parmetros, el origen de datos (la tabla), el campo que muestra los valores (Id), el campo que
muestra el texto visible en el desplegable (Descripcion) y por ltimo cul est seleccionado. Como
acabamos de leer el libro en vcsi_libro, pues vcsi_libro.ID_TIPOLIBRO.
Lo vamos a pasar por el objeto ViewBag y como propiedad el nombre del campo.
ViewBag.ID_TIPOLIBRO = new SelectList(db.CSI_TIPOLIBRO, "ID", "DESCRIPCION", vcsi_libro.ID_TIPOLIBRO);
Ahora es el momento de acceder a la vista crate.html y modificar ID_TIPOLIBRO para que sea un
desplegable y que adems reciba los datos de ViewBag. ID_TIPOLIBRO.
<div class="editor-label">
@Html.LabelFor(model => model.ID_TIPOLIBRO)
</div>
<div class="editor-field">
@Html.DropDownList("ID_TIPOLIBRO")
@Html.ValidationMessageFor(model => model.ID_TIPOLIBRO)
</div>
Se puede ver que slo hemos tenido que cambiar el tipo de helper y que poniendo el nombre de la
propiedad de Viewbag ha sido capaz de asociarlo sin tener que incluir nada ms de cdigo.
Si quisiramos poner en el desplegable un primer elemento que indique que se debe seleccionar un
tipo de libro
Debemos incluir un parmetro al helper DropDownList

http://si.ua.es/es

@Html.DropDownList("ID_TIPOLIBRO", "-- Seleccione un tipo de libro --")
Ahora deberamos realizar el mismo proceso de asignacin de procedimientos a las operaciones de

INSERT, UPDATE o DELETE en la vista. Si en las tablas no solemos tener permiso de modificacin, en
las vistas mucho menos.
EJEMPLO: VOTACIN
En ms de una ocasin habremos visto pginas que nos permiten valorar un artculo, el servicio que
nos han ofrecido, etc.
Vamos a tratar de implementarlo con MVC. Siguiendo el ejemplo del libro vamos a permitir valorar el
libro en el momento que vemos el detalle de ste.
Vamos a aadir al modelo 3 campos que sern el voto actual, el nmero de votos realizados hasta el
momento y la valoracin acumuladada.
public int Puntuacion { get; set; }
public int NumeroPuntuaciones { get; set; }
public double MediaPuntuaciones { get; set; }
Ahora en la vista detalle aadimos un conjunto de botones radio que nos permitan seleccionar la
valoracin. Nosotros vamos a permitir del 1 al 5.
<div class="display-label">Valorar</div>
<div class="display-field">
<input type="radio" name="score" value="1"/>1
<br />
<input type="submit" value="Votar"/>
</div>
Si adems queremos mostrar la votacin actual, el nmero de votos y lo acumulado, incluimos en la

vista la consulta de los campos del modelo.
<div class="display-label">Puntuacion</div>
@Html.DisplayFor(model => model.Puntuacion)
</div>
<div class="display-label">NumeroPuntuaciones</div>
@Html.DisplayFor(model => model.NumeroPuntuaciones)
</div>
<div class="display-label">MediaPuntuaciones</div>
@Html.DisplayFor(model => model.MediaPuntuaciones)
</div>
http://si.ua.es/es
Ahora nos falta el paso ms importante, poder votar. Modificamos la plantilla para que el formulario
en el submit (que esta plantilla por defecto no tiene) llame a la accin Votar.
@using (Html.BeginForm("Votar", "Biblioteca", FormMethod.Get))
{
@Html.HiddenFor(model => model.Id)
Tambin hemos incluido como campo oculto el id del libro porque si no luego no podemos asociarlo.
La accin Votar lo que hace es accede al libro, actualizar las puntuaciones y volver a mostrar el
detalle del libro, por eso en el return de la vista inclumos como primer parmetro la vista Details.
public ActionResult Votar(int id, int score)
{
var libro = miBiblioteca.ObtenerPorId(id);
libro.NumeroPuntuaciones++;
libro.Puntuacion += score;
libro.MediaPuntuaciones = Convert.ToDouble(libro.Puntuacion) /
Convert.ToDouble(libro.NumeroPuntuaciones);
return View("Details", libro);
}
UN ESTILO CON JQUERY

Es cierto que ya hemos conseguido la funcionalidad de poder valorar un libro, pero ahora buscamos
darle un aspecto ms agradable a la votacin.
Hay disponible en jQuery un plugin para poder pulsar sobre estrellas.
http://www.fyneworks.com/jquery/star-rating/
Haciendo muy pocos cambios obtendremos este resultado:
Lo primero es incluir la librera JavaScrit y la hoja de estilo. Las imgenes de la estrella y la de limpiar
el valor de tu votacin deben estar en la misma carpeta que la hoja de estilo.
Hacemos referencia desde nuestra plantilla:
<link href="@Url.Content("~/Content/jquery.rating.css")" rel="stylesheet" type="text/css"
/>
<script src="@Url.Content("~/Scripts/jquery.rating.pack.js")"
type="text/javascript"></script>
Incluimos el estilo star a los campos radio y quitamos la numeracin asociada a cada campo.
http://si.ua.es/es

<input class="star" type="radio" name="score" value="1" />
Y ya obtenemos un aspecto ms amigable de la votacin.
UN ESTILO A LA VALORACIN ACUMULADA

Si queremos incluir dentro de la valoracin la posibilidad de ver cul es la valoracin hasta el
momento vamos a crearnos un helper que nos indique cul de los botones radio debe estar activado
o checked. Es decir si el valor acumulado est entre 0 y 1 se marca el primero, si est entre 1 y 2 el
segundo, etc.
<input class="star"
Model.MediaPuntuaciones)/>
<input class="star"
<input class="star"
<input class="star"
<input class="star"
type="radio" name="score" value="1" @Check(0, 1,

El helper lo nico que comprueba es que la media est en el rango que le pasamos. En ese caso
escribe que est activado.
@helper Check(double lower, double upper, double toCheck) {
if (toCheck > lower && toCheck <= upper)
{
<text>checked="checked" </text>
}
}
El resultado es que si la media es 3,5, al acceder al detalle del libro estar marcada hasta la cuarta
estrella.

http://si.ua.es/es
VALIDACIN CAMPOS (BSICO)

Hasta el momento hemos podido definer los campos de la tabla y las descripciones de stos. Ahora
es el momento de dar un paso ms y poder indicar las caractersticas de ellos.
Disponemos de los siguientes atributos.
Required
StringLength
RegularExpression
Range
REQUIRED
Indicamos que el campo es obligatorio
[Required]
public string Email { get; set; }
STRINGLENGTH
Indicamos el nmero mximo de caracteres que se puede escribir en ese campo. Es una forma de
evitar el mensaje de desbordamiento que se produce en el momento que sobrepasamos el tamao
permitido.
[StringLength(200)]
REGULAREXPRESSION
En caso de que queramos que la informacin que se introduzca cumpla unos criterios, podemos usar
las expresiones regulares. Por ejemplo si queremos que el correo sea de la Universidad de Alicante
usaramos.
[RegularExpression(@"^[0-9a-zA-Z]([-\\.\\w]*[0-9a-zA-Z])*@(ua)\\.(es)$")]
RANGE
Limitamos un valor mnimo y mximo para un determinado valor. Si queremos que solo se puedan
seleccionar entre 2 y 10 asignaturas usaramos.
[Range(2, 10)]
public int Asignaturas { get; set; }
PERSONALIZACIN DE MENSAJES
Aunque los mensajes de error son bastantes explicitos, lo ms normal es que los personalicemos. La
forma de hacerlo es incluir dentro del propio atributo con ErrorMessage = "Texto del mensaje". Se
separa con una , (coma).
[RegularExpression(@"^[0-9a-zA-Z]([-\\.\\w]*[0-9a-zA-Z])*@(ua)\\.(es)$",
ErrorMessage = "El formato del correo no se corresponde con uno de la Universidad de Alicante.")]
http://si.ua.es/es
10

Si queremos mostrar dentro del mensaje alguno de los valores por los que se personaliza (por
ejemplo el tamao mximos) aparezca sin tener que introducirlo de nuevo, le hacemos referencia
con {posicin donde se encuentra el valor}.
[StringLength(200, ErrorMessage = "El nombre no puede ser mayor de {0} caracteres.")]
public string NombreCompleto { get; set; }
Ya vimos como personalizar las descripciones en diferentes idiomas con los ficheros de recursos. Para
hacerlo con los mensajes de error podemos aplicar la misma tcnica, indicamos en
ErrorMessageResourceType = typeof([carpeta de recursos].[nombre fichero de recursos sin
extension]) y en ErrorMessageResourceName = [Nombre de la clave dentro del fichero de
recursos].
[RegularExpression(@"^[0-9a-zA-Z]([-\\.\\w]*[0-9a-zA-Z])*@(ua)\\.(es)$",
ErrorMessageResourceType = typeof(Resources.Alumno),
ErrorMessageResourceName = "ErrorFormatoCorreoUA")]
[Required(ErrorMessageResourceType = typeof(Resources.Resources),
ErrorMessageResourceName = "PasswordRequired")]
VALIDANDO EL MODELO EN EL CONTROLADOR

Una vez que ya hemos configurado todos los campos es el momento de probarlo. En las operaciones
de alta o actualizacin se reciben todos lo datos del formulario. Es el momento de validar que los
campos. Disponemos del objeto ModelState que nos indicara con la propiedad IsValid si todo es
correcto o no.
if (ModelState.IsValid)
{
PERSONALIZAR TIPO DE DATO CAMPOS

ASP.NET MVC dispone un atributo para indicar el formato del campo DataType. Los valores que
puede tomar son:
DateTime. Muestra la fecha y la hora de un valor de tipo DateTime
Date. Muestra la parte de la fecha de un valor de tipo DateTime
Time. Muestra la parte de la hora de un valor de tipo DateTime
Text. Muestra un campo de texto sencillo
MultilineText. Muestra el campo como un TextArea
Password. Campo para escribir contraseas. Todo lo que escribamos aparecern como
aseriscos.
Url. Muestra el valor como una direccin URL.
EmailAddress. Muestra el valor como una direccin de correo electrnico.
PhoneNumber. Muestra el valor como un nmero de telfono.

http://si.ua.es/es
11
Currency. Muestra a cantidad como moneda del pas. En nuestro caso pospone el smbolo del
euro.
ImageUrl. Muestra el valor como una direccin a una imagen.
La forma de usarlo es como un atributo ms del campo.

[DataType(DataType.Password)]
public string Password { get; set; }
Lo que nos llama la atencin cuando comencemos a probarlo, es que la mayora no tienen ningn
efecto en la visualizacin. Maana veremos como personalizar la apariencia de un campo y
remplazaremos un campo de fecha por un calendario generador con JQuery.
CREANDO NUESTRO PROPIO VALIDADOR

Aunque con la validacin con expresiones regulares se nos abren muchas posibilidades, si que es
posible que nos interese hacer validaciones ms complejas o poder reutilizarlas de forma muy
cmoda entre proyectos.
Vamos a crear en Models la carpeta Validacion y dentro de sta una clase MaxAsignaturasAtributo.cs
que hereda de ValidationAttribute. El nico mtodo que vamos a sobrescribir es IsValid, que nos
permite realizar las comprobaciones que necesitemos.
public class NumeroMaxAlumnosAtributo : ValidationAttribute
{
public NumeroMaxAlumnosAtributo(int numeroMaxAlumnos)
: base("{0} tiene demasiados alumnos")
{
_numeroMaxAlumnos = numeroMaxAlumnos;
}
protected override ValidationResult IsValid(
object value, ValidationContext validationContext)
{
if (value != null)
{
int numeroMaxAlumnos;
if (Int32.TryParse(value.ToString(), out numeroMaxAlumnos))
{
if (numeroMaxAlumnos > _numeroMaxAlumnos)
{
var errorMessage = FormatErrorMessage(validationContext.DisplayName);
return new ValidationResult(errorMessage);
}
}
}
return ValidationResult.Success;
}
private readonly int _numeroMaxAlumnos;
}
Tambin hemos incluido un constructor al que le podemos pasar un valor (nuestro caso el nmero
mximo de alumnos por clase) y poder tener el mensaje de error por defecto, aunque en cualquier
momento lo podramos cambiar por otro con:
http://si.ua.es/es
12

return new ValidationResult("Otro mensaje de error.");
La validacin es muy bsica y lo que hace es comprobar que el tipo de dato es numrico. No hara
falta esta comprobacin ya que el validador de tipo de dato lo capturara y mostrara un error de que
debe ser un nmero. Luego comprueba si es mayor, y en caso de serlo, formatea el mensaje de error
para que lo muestre con el nombre del campo.
Para incluirlo en nuestro modelo incluiramos referencia a la carpeta con validadores
using NombreProyecto.Models.Validacion;
Lo aadiramos como un atributo ms

[NumeroMaxAlumnosAtributo(20)]
[Display(Name = "Nmero de alumnos en clase")]
public int NumeroAlumnos { get; set; }
Y en el controlador validaramos el modelo

public ActionResult Create(Clase clase)
{
try
{
if (ModelState.IsValid)
El resultado en caso de que pongamos un valor mayor
Tambin podemos personalizar el mensaje de error como cualquier otro atributo.

[NumeroMaxAlumnosAtributo(20, ErrorMessage = "Revisa el valor asignado a {0}")]
public int NumeroAlumnos { get; set; }

http://si.ua.es/es
13
VALIDACIN COMPLETA DEL MODELO

En algunos casos no necesitamos realizar la validacin por atributos si no que debemos aplicarla a
nivel de modelo.
Aqu cambia el concepto. No se crea un fichero con los atributos, se hace que el propio modelo
herede de IValidatableObject y hay un mtodo Validate que se encarga de todas las operaciones de
validacin.
public class Profesor : IValidatableObject
{
public IEnumerable<ValidationResult> Validate(
ValidationContext validationContext)
{
if (NombreCompleto != null &&
NombreCompleto.Split(' ').Length > 200)
{
yield return new ValidationResult("El nombre del profesor ",
new[] { "NombreCompleto" });
}
}
public string NombreCompleto { get; set; }
}
Me imagino que a ms de uno le habr llamado la atencin la instruccin yield y se habr preguntado
si se pueden comprobar y devolver ms de un error.
La respuesta es que s y la razn es la instruccin yield. El mtodo devuelve un conjunto de
ValidationResult y yield lo que permite es ir concatenando returns. Es decir que si hacemos 3
comprobaciones y cada uno hace el return con yield, al final el mtodo, en caso de que hayan fallado
las 3 comprobaciones, devolver un IEnumerable<ValidationResult> con 3 ValidationResult.

http://si.ua.es/es
14
JQUERY (BSICO)
JQuery es una de las libreras de programacin ms sencillas y potentes que podemos encontrar hoy
en da. El objetivo en este curso es que entendis cdigo escrito con este Framework y que sepis
crear aplicaciones muy sencillas.
ASP.NET MVC usa esta librera de base (la podemos encontrar en la carpeta Scripts) y la mayora de
los plugins que encontramos por Internet hace uso de ella.
La plantilla que tiene por defecto ASP.NET MVC la incluye con lo que podemos utilizarla en nuestras
vistas sin ningn problema.
La tarea ms comn en JQuery es acceder a algn elemento de nuestra pgina modificar sus
propiedades o contenido y que se actualice antes de que se visualice la pgina al usuario.
Nos vamos a centrar en estos puntos y cada da iremos incorporando nuevas caractersticas.
SELECTORES
Jquery dispone de varios mtodos para acceder a los elementos de nuestra pgina. Vamos a analizar
los ms comunes. Todos ellos utilizan la funcin $([selector]). Si nunca se ha programado con
JQuery o Mootools nos llamar la atencin que se use el $ como funcin para acceder a los
elementos de nuestra pgina.
En caso de que trabajemos con JQuery y Mootools, y hagamos referencia a ambas libreras desde
nuestras pginas, se producir un conflicto por la funcin $ que ambas usan. Para solucionarlo
JQuery ofrece una solucin muy sencilla.
Incluimos la instruccin jQuery.noConflict(); para indicar que desde este momento para hacer
uso del selector en JQuery vamos a utilizar jQuery ([selector]) en vez de $([selector]).
De esa manera ya no interfiere con Mootools que lo sigue utilizando sin problemas.
Vamos a analizar los selectores ms comunes
$(#ID)
Seleccionamos un elemento HTML por el id que tenga. Es muy normal usarlo en elementos muy
comunes de nuestra pgina cabecera, cuerpo, noticias o pie, aunque si somos cuidadosos con los ids,
podemos usarlo en cualquier elemento que queramos.
Por ejemplo si tenemos una capa div con id igual a capa_1
<div id="capa_1"></div>
Para acceder a este elemento usamos

var el = $("#capa_1");

http://si.ua.es/es
15
Ahora podramos hacer cualquier operacin con este elemento, que es un objeto que dispone de
mtodos / funciones que iremos viendo.
$(ELEMENTO)
En ocasiones nos interesa que todos los elementos HTML de un tipo (por ejemplo los enlaces)
cambien alguna propiedad que no es accesible (el ejemplo ms claro es que se abran en un nueva
ventana).
Tenemos un listado de enlaces
<div id="capa_2">
<a href="1">Enlace 1</a><br />
</div>
Para acceder al listado de enlaces usamos el selector por elemento

var els = $("a");
y para recorrer todos los elementos para actualizar alguna propiedad

els.each(function () {
var el = $(this);
el.attr("target", "_blank");
});
Un error comn cuando comenzamos con JQuery es que creemos que el elemento el es el propio
elemento HTML y que por tanto accedo a sus atributos con el.target = "_blank";. Si lo probis veris
que no es as, porque el es un objeto JQuery y no un enlace. Debemos usar los mtodos que nos
ofrece JQuery para estas tareas.
$(.CLASE) O $(ELEMENTO.CLASE)
Un paso ms en la seleccin es que no accedamos a elementos tan genricos si no a aquellos que
nosotros marquemos con un estilo determinado. El ejemplo anterior sera mejor si slo lo
aplicramos a aquellos enlaces que pertenezcan a la clase externo.
Modificamos el listado anterior para indicar que dos son externos y otros dos no.
<div id="capa_2">
<a class="externo" href="1">Enlace 1</a><br />
<a class="externo" href="3">Enlace 3</a><br />
</div>
Para acceder a estos dos enlaces no podemos usar el genrico de elementos porque cogeramos los
4, usamos:
var els = $("a.externo");
o en caso de que slo se use esta clase con enlaces y no haya confusin con otros elementos
http://si.ua.es/es
16

var els = $(".externo");
Otro ejemplo muy comn es crearnos un estilo obligatorio que realice determinadas operaciones
sobre los elementos (cambiar color, poner en negrita, aadir un asterisco para indicar que es
obligatorio, etc.).
var els = $(".obligatorio");
y luego los recorremos

var el = $(this);
// Operaciones sobre cada elemento
});
HIJOS O DESCENDENTE
Ahora es el momento de combinar selectores
$(#cabecera a)
Selecciona todos los enlaces que hay dentro de el elemento con id igual a cabecera da lo mismo
que estn en el siguiente nivel de cabecera o dentro de otros elementos. En
<div id="cabecera" style="margin-top: 20px;">
<div id="subcabecera" style="margin-top: 10px;">
</div>
</div>
Cambiara el color a los 4 enlaces

var els = $("#cabecera a");
var el = $(this);
el.attr("style", "color: red");
});
$(#cabecera > a)
Si solo queremos modificar los 2 enlaces hijo y descartar otros descendientes que pertenecen a otro
elemento.
var els = $("#cabecera > a");
var el = $(this);
el.attr("style", "color: red");
});
Slo cambia el color a los dos primeros enlaces que son hijos directos de cabecera.

http://si.ua.es/es
17
FUNCIONES
Un problema que nos podemos encontrar con JavaScript es el momento de inicializar los elementos
de HTML porque hasta que no se acaba el cdigo, no tenemos a nuestra disposicin a todos los
elementos.
Una buena costumbre es poner al final del HTML todos los ficheros que hacen referencia a
JavaScript. La razn principal es que la persona ya puede comenzar a visualizar la pgina en ese
momento y no debe esperar a que se carguen todos los ficheros JavaScript que en ocasiones, si
hacen referencia a direcciones externas, pueden producir un retardo molesto.
Adems de esta tcnica que usaremos en nuestras plantillas, jQuery tiene dos mtodos de ejecutar
cdigo en el momento que el Modelo de Objetos del Documento (DOM) est disponible:
$(DOCUMENT).READY
http://api.jquery.com/ready/
Le indicamos la funcin que se ejecutar en el momento de estar listo el DOM.
En el siguiente ejemplo actualizar el contenido de un elemento con id igual a capa_1.
Independiente de que este cdigo est al principio o al final no dar error porque no se ejecuta en el
momento de leerse el JavaScript.
$(document).ready(function () {
el.html("Aadimos un texto");
});
Si el cdigo fuera slo

No funcionara al principio de la pgina porque aun no est disponible el elemento capa_1.
$(FUNCTION () { });
Tiene el mismo comportamiento que la anterior. Cuando se pasa una funcin como primer
parmetro, le indicas a jQuery que lo ejecute cuando est disponible el DOM. El ejemplo anterior
sera:
$(function () {
});
ARRAYS
Aplicar una funcin a un array es una tarea muy comn. Lo hemos visto cambiando el
comportamiento de los enlaces. Se usa mucho para asignar eventos que no por accesibilidad no
estn permitidos dentro del cdigo HTML.
http://si.ua.es/es
18
Usamos el comando each (http://api.jquery.com/jQuery.each/) que le pasamos una funcin como

parmetro y dentro de sta podemos acceder a cada elemento con $(this).
arrayElementos.each(function () {
var el = $(this);
// Operaciones sobre cada elemento
});
CONTENIDO
Disponemos dos formas muy sencillas para modificar el contenido de un elemento.
HTML
http://api.jquery.com/html/
Nos deja remplazar el cdigo o texto que hay en ese el elemento por el que le indiquemos. Permite
cdigo con etiquetas HTML.
el.html("Aadimos un texto en <strong>negrita</strong>");
La capa pasa a tener el siguiente cdigo

<div id="capa_1">Aadimos un texto en <strong>negrita</strong></div>
TEXT
http://api.jquery.com/text/
Parecido al anterior pero slo para remplazar con texto sin formato. Ambas funciones tambin
permite leer el contenido si no se le enva ningn parmetro. En el caso de text, si lo que lee tiene
etiquetas HTML las elimina.
var texto = el.text();
APPEND
http://api.jquery.com/append/
En caso de que el elemento ya tenga contenido, no lo remplaza, lo escribe detrs del contenido
actual.
PREPEND
http://api.jquery.com/prepend/
En caso de que el elemento ya tenga contenido, no lo remplaza, lo escribe antes del contenido
actual.

http://si.ua.es/es
19
LOAD
http://api.jquery.com/load/
Podemos cargar el contenido desde otra pgina. Lo normal, y como ya hicimos el 2 da es que lo
hagamos desde una accin de nuestros controladores.
Por ejemplo si queremos cargar el contenido de la accin Contenido de nuestro controlador Home,
ejecutaramos:
el.load("/Home/Contenido");
Si la accin hace algo tan bsico como

public string Contenido()
{
return "Este es el texto que devuelve el action Contenido";
}
El resultado es
PROPIEDADES
ATTR
http://api.jquery.com/attr/
En ocasiones lo que nos interesa no es aadir contenido si no modificar alguna propiedad, por
ejemplo el color o poner en negrita por si queremos destacar algo.
el.attr("style", "color: red; font-weight: bold;");
y el resultado es visible en la etiqueta.

http://si.ua.es/es
20
EJEMPLO: TO-DO BSICO

http://tutorialzine.com/2010/03/ajax-todo-list-jquery-php-mysql-css/
Siguiendo el esquema de convertir aplicaciones existentes a MVC, hoy nos toca crear un simple
ejemplo de gestin de tareas, AJAX-ed Todo List With PHP, MySQL & jQuery.
Hoy slo vamos a realizar dos operaciones bsicas, aadir y eliminar tareas. Maana le incluiremos
ciertos eventos con jQuery para hacerla ms vistosa, incluiremos la opcin de editar y por ltimo la
integraremos en AJAX.
El proceso es siempre el mismo crear un modelo / tabla, crear el controlador y crear vistas.
MODELO
TAREA
public class Tarea
{
[Key]
public int Id { get; set; }
public string Descripcion { get; set; }
public DateTime FechaCrea { get; set; }
public DateTime FechaMod { get; set; }
}
TODO
public class ToDo
{
public List<Tarea> Tareas;
public ToDo()
{
Tareas = new List<Tarea>
{
new Tarea {Id=1, Descripcion = "Crear proyecto", FechaCrea = DateTime.Now, FechaMod = DateTime.Now},
new Tarea {Id= 2, Descripcion = "Crear modelo", FechaCrea = DateTime.Now, FechaMod = DateTime.Now},
new Tarea {Id=3, Descripcion = "Crear controlador", FechaCrea = DateTime.Now, FechaMod =
DateTime.Now},
new Tarea {Id=4, Descripcion = "Crear vistas", FechaCrea = DateTime.Now, FechaMod = DateTime.Now},
};
}
}

http://si.ua.es/es
21
Para porder realizar ciertas operaciones con las tareas inclmos los siguientes mtodos a ToDo:
public Tarea ObtenerxId(int id)
{
return Tareas.Where(t => t.Id == id).FirstOrDefault();
}
public void BorrarTareaxId(int id)
{
Tarea tareaBorrar = ObtenerxId(id);
if (tareaBorrar != null)
Tareas.Remove(tareaBorrar);
}
public void BorrarTarea(Tarea tarea)
{
if (tarea != null)
Tareas.Remove(tarea);
}
public void InsertarTarea(string descripcion)
{
Tareas.Add(new Tarea {Id=Tareas.Max(t => t.Id) + 1, Descripcion = descripcion, FechaCrea = DateTime.Now,
FechaMod = DateTime.Now});
}
Compilamos el proyecto con F6 para que las clases sean visibles por el resto de elementos del
proyecto y creamos un controlador para la clase ToDo.
CONTROLADOR
Al menos implementamos Index, Create (GET y POST) y Delete (GET y POST)
public ActionResult Index()
{
//Todo.BorrarTarea(1);
return View(Todo.Tareas);
}
public ActionResult Create()
{
ViewBag.ListadoTareas = Todo.Tareas;
return View();
}
//
// POST: /ToDo/Create
[HttpPost]
public ActionResult Create(FormCollection collection)
{
try
{
// TODO: Add insert logic here
Todo.InsertarTarea(collection["Descripcion"]);
return RedirectToAction("Index");
}
catch
{
return View();
}
}
public ActionResult Delete(int id)
http://si.ua.es/es
22

{
var tarea = Todo.ObtenerxId(id);
return View(tarea);
}
//
// POST: /ToDo/Delete/5
[HttpPost]
public ActionResult Delete(int id, FormCollection collection)
{
try
{
// TODO: Add delete logic here
var tarea = Todo.ObtenerxId(id);
if (tarea != null)
Todo.BorrarTarea(tarea);
return RedirectToAction("Index");
}
catch
{
return View();
}
}
Las acciones hacen uso de los mtodos la clase ToDo, dejando un cdigo muy limpio y fcil de
entender.
VISTAS
El ltimo paso es crear las vistas para cada una de las acciones.
Antes debemos el layout por el de la pgina original para incorporar el estilo. Nos descargamos el
cdigo de la web. De algn PHP nos quedamos con el cdigo HTML y eliminamos todo lo que haga
referencia a PHP.
Modificamos las referencias a JavaScript y hojas de estilo.
En la cabecera las hojas de estilo.
<link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/styles.css")" rel="stylesheet" type="text/css" />
En el pie los ficheros JavaScript (antes de cerrar la etiqueta body).

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
Como todas las plantillas de MVC debemos incluir @RenderBody(). En caso de no hacerlo nos dar
un error cuando queramos hacer uso de la plantilla.
Ahora ya podemos crear las vistas con las plantillas que nos ofrece MVC.
Es importante que para que obtengamos el formato original respetemos estilos y elementos que lo
formen. Como ya conocemos como crear nuestros propios helpers, vamos a usarlos para dar formato
a las etiquetas de visualizacin y creacin de tareas.
@helper Tarea(string nombre, int id)
http://si.ua.es/es
23

{
<li class="todo" id="todo-@id" style="display: block;">
<div class="text">@nombre (@id)</div>
<div class="actions">
@Html.ActionLink("Edit", "Edit", new { id = @id }, new { @class = "edit" })
@Html.ActionLink("Details", "Delete", new { id = @id }, new { @class = "delete" })
</div>
</li>
}
@helper NuevaTarea()
{
<li class="todo" id="todo-new" style="display: block; position: relative; top: 0px; left: 0px;">
<div class="text">@Html.EditorFor(model => model.Descripcion)
<div class="editTodo">
<input type="submit" style="width: 40px;" value="Create" />
or
@Html.ActionLink("Cancel", "Index", null, new { @class = "discardChanges" })
</div></div>
<div class="actions">
</div>
</li>
}
Para hacerla referencia desde el cdigo

@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<ul class="todoList">
@foreach (Tarea item in ViewBag.ListadoTareas)
{
@Tarea(@item.Descripcion, @item.Id)
}
</ul>
}

http://si.ua.es/es
24
USO DE NUGET, GESTOR DE PAQUETES PARA .NET

http://nuget.codeplex.com/
Es un administrador de paquetes que facilita la bsqueda e instalacin de libreras o componentes
(extensiones) de .NET en su proyecto. Funciona con cualquier versin de Visual Studio 2010 o
superior y para cualquier tipo de proyecto est disponible.
NuGet se encarga de administrar la gestin e instalacin de libreras de .NET en tu proyecto de
trabajo, maneja la dependencia entre libreras, as mismo permite actualizar o remover las libreras
de tu proyecto.
Es capaz de actualizar la informacin de un archivo web.config, en caso de que la librera o paquete a
utilizar requiera de configuraciones. Tambin tiene soporte a utilizar scripts de PowerShell para hacer
operaciones automticas.
La forma ms sencilla de acceder es desde el men herramientas Administrador de extensiones
En la parte izquierda podemos seleccionar las extensiones que tenemos instaladas, buscar en la red
(Galera en lnea) o revisar si hay actualizaciones.
Si buscamos en la galera por el trmino mvc y tenemos ordenado por Mejor clasificado,
obtendremos un resultado parecido al que se visualiza en la imagen

http://si.ua.es/es
25
Aquellas extensiones que ya estn instaladas se marcan con una flecha.

Pulsando sobre una extensin podemos ver un breve resumen. Pulsando en Ms informacin nos
lleva a la pgina con la informacin completa.
Adems de incluir un mdulo visual de gestin de paquetes, en Herramientas > Administrador de

paquetes de biblioteca > Consola del Administrador de Paquetes disponemos de una potente
aplicacin para trabajar con paquetes NuGet.

http://si.ua.es/es
26
INTEGRAR COMPONENTES: PAGED LIST

https://github.com/TroyGoode/PagedList
http://nuget.org/packages/PagedList.Mvc
PagedList es una librera rque nos permite integrar de forma muy sencilla la paginacin en elementos
IEnumerable o IQueryable.
Aunque ya vimos ayer el helper WebGrid, la sencillez de PagedList hace intersante su estudio.
Lo primero es instalarlo desde la consola del Administrador de Paquetes.
Install-Package PagedList.Mvc
Nos instala la referencia y un fichero css. Aadimos la hoja de estilo a nuestra plantilla.
<link href="@Url.Content("~/Content/PagedList.css")" rel="stylesheet" type="text/css" />
Modificamos el controlador Index para que permita recibir la pgina que queremos mostrar. Ser un
campo opcional porque en la primera llamada no se indicar.
Disponemos un nuevo mtodo ToPagedList que podemos pasar a nuestra lista de libros, en la que le
indicamos la pgina actual y el nmero de resultados por pgina. El resultado de ese filtro es el que
pasaremos por ViewBag a la vista.
public ActionResult Index(int? page)
{
var pageNumber = page ?? 1;
var onePageOfProducts = biblioteca.Libros.ToPagedList(pageNumber,
ResultadosxPagina);
ViewBag.Message = "ASP.NET MVC";
ViewBag.OnePageOfProducts = onePageOfProducts;
return View();
}
En la vista mostraremos los valores que hemos pasado a la vista.

@using PagedList.Mvc;
@using PagedList;
<ul>
@foreach(var product in ViewBag.OnePageOfProducts){
<li>@product.Titulo</li>
}
</ul>
No hace falta que tenga formato de tabla. Esta es la gran ventaja de PagedList, lo podemos aplicar a
cualquier elemento.
Por ultimo incumos un control para paginar. Para eso disponemos del helper PagedListPager al que
le pasamos los datos a mostrar y la accin que va a realizar.
@Html.PagedListPager( (IPagedList)ViewBag.OnePageOfProducts, page =>
Url.Action("Index", new { page }) )

http://si.ua.es/es
27
El resultado es el siguiente

http://si.ua.es/es
28
INTEGRAR COMPONENTES: TINYMCE

http://www.tinymce.com/
http://nuget.org/packages/TinyMCE
Uno de los mejores editores HTML que podemos encontrar es TinyMCE. Es el que utilizamos en el
Campus Virtual y en el gestor de contenidos Vual. Si a esto le aadimos que es libre, que dispone de
plugins y que lo actualizan con frecuencia, es una opcin a tener en cuenta en nuestros proyectos.
El uso es muy sencillo ya que est disponible como paquete NuGet. Tiene varias versiones
dependiendo de si lo queremos ejecutar con jQuery o slo con JavaScript. Si lo queremos para MVC o
no, instalarte los ejemplos. Nosotros nos vamos a centrar en la versin MVC con jQuery ya que est
incluida en la plantilla de los proyectos MVC y en la plantilla de la UA.
En la consola del Administrador de Paquetes ejecutamos
Install-Package TinyMCE.MVC.JQuery
Tras descargarse unos ficheros, nos crea en la carpeta Script y Content.

La forma ms sencilla de usarla es definir un estilo propio para los campos que la vayan a utilizar, por
ejemplo editor-html.
Ahora debemos aadir esa clase al campo o campos que queramos que sean editores HTML.
Modificamos una de las plantilla (por ejemplo Create.cshtml) y en la lnea
@Html.EditorFor(model => model.Titulo)
Aadimos la clase
@Html.TextBoxFor(model => model.Titulo, new { @class = "editor-html" })
El Helper EditorFor no permite aadir atributos como @class, esa es la razn de que lo
remplacemos por TextBoxFor que admite como segundo parmetro una relacin de atributos.
Ahora en algn fichero que dispongamos de JavaScript que incluyamos en nuestro proyecto,
indicamos que todos los elementos que tengan el estilo editor-html van a transformarse en un
editor TinyMCE.
jQuery('.editor-html').tinymce({
script_url: '/Scripts/tinymce/tiny_mce.js',
theme: "advanced",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
});
El resultado es

http://si.ua.es/es
29
Maana veremos una forma ms elegante y reutilizable de hacer uso de TinyMCE.

http://si.ua.es/es
30
INTEGRAR COMPONENTES: DATA ANNOTATIONS EXTENSIONS

http://dataannotationsextensions.org/
http://nuget.org/packages/DataAnnotationsExtensions.MVC3
El conjunto de atributos que nos ofrece MVC es algo excaso, por eso esta extension puede ser muy
interesante como complemento a los que vienen de base.
Las validaciones que nos permite son las siguientes: CreditCardAttribute, DateAttribute,
DigitsAttribute, EmailAttribute, EqualToAttribute, FileExtensionsAttribute, IntegerAttribute,
MaxAttribute, MinAttribute, NumericAttribute, UrlAttribute, YearAttribute.
La manera de instalarlo, desde la consola del Administrador de Paquetes
Install-Package DataAnnotationsExtensions.MVC3
Instala la validacin del lado del cliente como del lado del servidor. Vamos a realizar un ejemplo muy
sencillo que compruebe que estamos insertando una direccin Url.
public class Libro
{
[Key]
public int Id { get; set; }
public string Isbn { get; set; }
public string Titulo { get; set; }
public string TipoLibro { get; set; }
[Url]
public string UrlMasInfo { get; set; }
}
En la plantilla incluimos estos dos ficheros jQuery para la validacin de formularios. Normalmente ya
se incluye en algunas vistas como por ejemplo Create.cshtm
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"
Volvemos a generar la vista para que aada el nuevo campo o smplemente aadimos lo nuevo a la
vista actual.
<div class="editor-label">
@Html.LabelFor(model => model.UrlMasInfo)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.UrlMasInfo)
@Html.ValidationMessageFor(model => model.UrlMasInfo)
</div>
Si visualizamos la aplicacin en el navegador e introducimos mal la Url veremos el siguiente mensaje.

http://si.ua.es/es
31
El texto del error se puede modificar como en cualquier otro atributo, al igual que se pueden
combinar atributos.
[StringLength(150)]
[Url(ErrorMessage="Introduzca una direccin vlida (http o ftp)") ]
public string UrlMasInfo { get; set; }
PROYECTO
CREAR VISTAS Y PAQUETE, MODELOS COMPLEJOS, CONTROLADORES Y HELPERS
DE LOS NUEVOS TIPOS.

http://si.ua.es/es
32

Personalizacion y Validacion Basica

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Personalizacion y Validacion Basica

Cargado por

Copyright:

Formatos disponibles

SERVICIO DE INFORMTICA | UNIVERSIDAD DE ALICANTE

LTIMA ACTUALIZACIN: 22 DE OCTUBRE DE 2012

ASP.NET MVC 3 Y 4 | DESARROLLO DE APLICACIONES CON EL FRAMEWORK MVC 3 Y 4

Y seleccionamos los procedimientos almacenados que nos interesen.

Andrs Valls Botella | Analista | Desarrollos propios

ASP.NET MVC 3 Y 4 | DESARROLLO DE APLICACIONES CON EL FRAMEWORK MVC 3 Y 4

ASP.NET MVC 3 Y 4 | DESARROLLO DE APLICACIONES CON EL FRAMEWORK MVC 3 Y 4

Y en la pestaa de agregar seleccionamos la vista y pulsamos finalizar.

Si todo es correcto, se habr incluido al diagrama como una tabla ms.

Andrs Valls Botella | Analista | Desarrollos propios

ASP.NET MVC 3 Y 4 | DESARROLLO DE APLICACIONES CON EL FRAMEWORK MVC 3 Y 4

Andrs Valls Botella | Analista | Desarrollos propios

ASP.NET MVC 3 Y 4 | DESARROLLO DE APLICACIONES CON EL FRAMEWORK MVC 3 Y 4

Debemos incluir un parmetro al helper DropDownList

ASP.NET MVC 3 Y 4 | DESARROLLO DE APLICACIONES CON EL FRAMEWORK MVC 3 Y 4

Ahora deberamos realizar el mismo proceso de asignacin de procedimientos a las operaciones de

Si adems queremos mostrar la votacin actual, el nmero de votos y lo acumulado, incluimos en la

ASP.NET MVC 3 Y 4 | DESARROLLO DE APLICACIONES CON EL FRAMEWORK MVC 3 Y 4

UN ESTILO CON JQUERY

Haciendo muy pocos cambios obtendremos este resultado:

ASP.NET MVC 3 Y 4 | DESARROLLO DE APLICACIONES CON EL FRAMEWORK MVC 3 Y 4

Y ya obtenemos un aspecto ms amigable de la votacin.

UN ESTILO A LA VALORACIN ACUMULADA

type="radio" name="score" value="1" @Check(0, 1,

Andrs Valls Botella | Analista | Desarrollos propios

ASP.NET MVC 3 Y 4 | DESARROLLO DE APLICACIONES CON EL FRAMEWORK MVC 3 Y 4

VALIDACIN CAMPOS (BSICO)

ASP.NET MVC 3 Y 4 | DESARROLLO DE APLICACIONES CON EL FRAMEWORK MVC 3 Y 4

VALIDANDO EL MODELO EN EL CONTROLADOR

PERSONALIZAR TIPO DE DATO CAMPOS

Andrs Valls Botella | Analista | Desarrollos propios

ASP.NET MVC 3 Y 4 | DESARROLLO DE APLICACIONES CON EL FRAMEWORK MVC 3 Y 4

La forma de usarlo es como un atributo ms del campo.

CREANDO NUESTRO PROPIO VALIDADOR

ASP.NET MVC 3 Y 4 | DESARROLLO DE APLICACIONES CON EL FRAMEWORK MVC 3 Y 4

Lo aadiramos como un atributo ms

Y en el controlador validaramos el modelo

El resultado en caso de que pongamos un valor mayor

Tambin podemos personalizar el mensaje de error como cualquier otro atributo.

Andrs Valls Botella | Analista | Desarrollos propios

ASP.NET MVC 3 Y 4 | DESARROLLO DE APLICACIONES CON EL FRAMEWORK MVC 3 Y 4

VALIDACIN COMPLETA DEL MODELO

Andrs Valls Botella | Analista | Desarrollos propios

ASP.NET MVC 3 Y 4 | DESARROLLO DE APLICACIONES CON EL FRAMEWORK MVC 3 Y 4

Para acceder a este elemento usamos

Andrs Valls Botella | Analista | Desarrollos propios

ASP.NET MVC 3 Y 4 | DESARROLLO DE APLICACIONES CON EL FRAMEWORK MVC 3 Y 4

Para acceder al listado de enlaces usamos el selector por elemento

y para recorrer todos los elementos para actualizar alguna propiedad

ASP.NET MVC 3 Y 4 | DESARROLLO DE APLICACIONES CON EL FRAMEWORK MVC 3 Y 4

y luego los recorremos

Cambiara el color a los 4 enlaces

Andrs Valls Botella | Analista | Desarrollos propios

ASP.NET MVC 3 Y 4 | DESARROLLO DE APLICACIONES CON EL FRAMEWORK MVC 3 Y 4

Si el cdigo fuera slo

No funcionara al principio de la pgina porque aun no est disponible el elemento capa_1.

ASP.NET MVC 3 Y 4 | DESARROLLO DE APLICACIONES CON EL FRAMEWORK MVC 3 Y 4

Usamos el comando each (http://api.jquery.com/jQuery.each/) que le pasamos una funcin como

La capa pasa a tener el siguiente cdigo

Andrs Valls Botella | Analista | Desarrollos propios

ASP.NET MVC 3 Y 4 | DESARROLLO DE APLICACIONES CON EL FRAMEWORK MVC 3 Y 4

Si la accin hace algo tan bsico como

y el resultado es visible en la etiqueta.

Andrs Valls Botella | Analista | Desarrollos propios