ASP.NET MVC 3 y 4 · 2012-10-22 · ASP.NET MVC 3 Y 4 | DESARROLLO DE APLICACIONES CON EL FRAMEWORK...

ÚLTIMA ACTUALIZACIÓN: 22 DE OCTUBRE DE 2012

SERVICIO DE INFORMÁTICA | UNIVERSIDAD DE ALICANTE

ASP.NET MVC 3 y 4 PERSONALIZACIÓN 2

Andrés Vallés Botella | Analista | Desarrollos propios

Servicio de Informática | Universidad de Alicante Campus de Sant Vicent del Raspeig | 03690 | España

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

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

Andrés Vallés Botella | Analista | Desarrollos propios Servicio de Informática | Universidad de Alicante Campus de Sant Vicent del Raspeig | 03690 | España http://si.ua.es/es

2

4º DÍA – PERSONALIZACIÓN 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 gestión de las tablas.

En el caso de las vistas, si están bien hechas, nos olvidamos del tema de tener que hacer includes

dentro de nuestra consulta, porque en la mayoría 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 básicas: inserción,

actualización y borrado. Aunque estamos acostumbrados a integrar la inserción y la actualización 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 botón derecho > Actualizar

modelo desde base de datos…

Y seleccionamos los procedimientos almacenados que nos interesen.



3

Ahora debemos asociar cada operación a un procedimiento. Nos situamos en la tabla CSI_TABLA,

pulsamos el botón derecho y seleccionamos Asignación de procedimientos almacenados.

En la parte inferior del Visual Studio nos aparece un panel para poder hacer la asociación.

Pulsamos sobre <Seleccionar Insert Function> y aparece un desplegable con todos los

procedimientos que tengamos. Seleccionamos PKG_CSI_ALTA_LIBRO. Todos los parámetros

aparecen disponibles para su asignación, 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 relación

entre las tablas) y TIPOLIBRO. Es este segundo campo el que debemos seleccionar.

Por tanto debe quedar de la siguiente manera la asignación.

Para poder probarlo deberíamos quitarnos los permisos de escritura en la tabla y darnos de

ejecuación en el paquete. Otra forma es incluir una tabla de log y cuando hagamos cualquier

operación en un procedimiento escriba en ella.



4

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, después de añadir 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 operación 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 botón derecho >

Actualizar modelo desde base de datos…

Y en la pestaña de agregar seleccionamos la vista y pulsamos finalizar.

Si todo es correcto, se habrá incluido al diagrama como una tabla más.



5

Un problema con el que nos podemos encontrar es con la detección 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 botón derecho desmarcamos clave de entidad. De no hacerlo, todos aquellos campos que

son clave los oculta en los listados, en la gestión, 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, botón 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.



6

.

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

descripción del tipo de libro (como era lógico). En este caso no queremos ni el id ni la descripción,

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

después 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

parámetros, 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 cuál 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 créate.html y modificar ID_TIPOLIBRO para que sea un

desplegable y que además 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 sólo 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 más de código.

Si quisiéramos poner en el desplegable un primer elemento que indique que se debe seleccionar un

tipo de libro

Debemos incluir un parámetro al helper DropDownList



7

@Html.DropDownList("ID_TIPOLIBRO", "-- Seleccione un tipo de libro --")

Ahora deberíamos realizar el mismo proceso de asignación de procedimientos a las operaciones de

INSERT, UPDATE o DELETE en la vista. Si en las tablas no solemos tener permiso de modificación, en

las vistas mucho menos.

EJEMPLO: VOTACIÓN

En más de una ocasión habremos visto páginas que nos permiten valorar un artículo, 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 añadir al modelo 3 campos que serán el voto actual, el número de votos realizados hasta el

momento y la valoración acumuladada.

public int Puntuacion { get; set; }

public int NumeroPuntuaciones { get; set; }

public double MediaPuntuaciones { get; set; }

Ahora en la vista detalle añadimos un conjunto de botones radio que nos permitan seleccionar la

valoración. 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 además queremos mostrar la votación actual, el número de votos y lo acumulado, incluimos en la

vista la consulta de los campos del modelo.

<div class="display-label">Puntuacion</div> <div class="display-field">

@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>



8

Ahora nos falta el paso más importante, poder votar. Modificamos la plantilla para que el formulario

en el submit (que esta plantilla por defecto no tiene) llame a la acción Votar.

@using (Html.BeginForm("Votar", "Biblioteca", FormMethod.Get))

{

@Html.HiddenFor(model => model.Id)

También hemos incluido como campo oculto el id del libro porque si no luego no podemos asociarlo.

La acción 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 incluímos como primer parámetro 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 más agradable a la votación.

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 librería JavaScrit y la hoja de estilo. Las imágenes de la estrella y la de limpiar

el valor de tu votación 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 numeración asociada a cada campo.

http://www.fyneworks.com/jquery/star-rating/



9

<input class="star" type="radio" name="score" value="1" />

Y ya obtenemos un aspecto más amigable de la votación.

UN ESTILO A LA VALORACIÓN ACUMULADA

Si queremos incluir dentro de la valoración la posibilidad de ver cuál es la valoración hasta el

momento vamos a crearnos un helper que nos indique cuál 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" type="radio" name="score" value="1" @Check(0, 1,

Model.MediaPuntuaciones)/>









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.



10

VALIDACIÓN CAMPOS (BÁSICO)

Hasta el momento hemos podido definer los campos de la tabla y las descripciones de éstos. Ahora

es el momento de dar un paso más y poder indicar las características 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 número máximo 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 tamaño

permitido.

[StringLength(200)] public string Email { get; set; }

REGULAREXPRESSION

En caso de que queramos que la información que se introduzca cumpla unos criterios, podemos usar

las expresiones regulares. Por ejemplo si queremos que el correo sea de la Universidad de Alicante

usaríamos.

[RegularExpression(@"^[0-9a-zA-Z]([-\\.\\w]*[0-9a-zA-Z])*@(ua)\\.(es)$")] public string Email { get; set; }

RANGE

Limitamos un valor mínimo y máximo para un determinado valor. Si queremos que solo se puedan

seleccionar entre 2 y 10 asignaturas usaríamos.

[Range(2, 10)] public int Asignaturas { get; set; }

PERSONALIZACIÓN DE MENSAJES

Aunque los mensajes de error son bastantes explicitos, lo más 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.")]



11

public string Email { get; set; }

Si queremos mostrar dentro del mensaje alguno de los valores por los que se personaliza (por

ejemplo el tamaño máximos) aparezca sin tener que introducirlo de nuevo, le hacemos referencia

con {posición 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 técnica, 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")] public string Email { get; set; }

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 actualización 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 contraseñas. Todo lo que escribamos aparecerán como

aseriscos.

Url. Muestra el valor como una dirección URL.

EmailAddress. Muestra el valor como una dirección de correo electrónico.

PhoneNumber. Muestra el valor como un número de teléfono.



12

Currency. Muestra a cantidad como moneda del país. En nuestro caso pospone el símbolo del

euro.

ImageUrl. Muestra el valor como una dirección a una imagen.

La forma de usarlo es como un atributo más del campo.

[DataType(DataType.Password)] public string Password { get; set; }

Lo que nos llama la atención cuando comencemos a probarlo, es que la mayoría no tienen ningún

efecto en la visualización. Mañana 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 validación con expresiones regulares se nos abren muchas posibilidades, si que es

posible que nos interese hacer validaciones más complejas o poder reutilizarlas de forma muy

cómoda entre proyectos.

Vamos a crear en Models la carpeta Validacion y dentro de ésta una clase MaxAsignaturasAtributo.cs

que hereda de ValidationAttribute. El único método 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; }

También hemos incluido un constructor al que le podemos pasar un valor (nuestro caso el número

máximo de alumnos por clase) y poder tener el mensaje de error por defecto, aunque en cualquier

momento lo podríamos cambiar por otro con:



13

return new ValidationResult("Otro mensaje de error.");

La validación es muy básica y lo que hace es comprobar que el tipo de dato es numérico. No haría

falta esta comprobación ya que el validador de tipo de dato lo capturaría y mostraría un error de que

debe ser un número. 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 incluiríamos referencia a la carpeta con validadores

using NombreProyecto.Models.Validacion;

Lo añadiríamos como un atributo más

[NumeroMaxAlumnosAtributo(20)] [Display(Name = "Número de alumnos en clase")] public int NumeroAlumnos { get; set; }

Y en el controlador validaríamos el modelo

public ActionResult Create(Clase clase) { try { if (ModelState.IsValid)

El resultado en caso de que pongamos un valor mayor

También podemos personalizar el mensaje de error como cualquier otro atributo.

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



14

VALIDACIÓN COMPLETA DEL MODELO

En algunos casos no necesitamos realizar la validación 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 método Validate que se encarga de todas las operaciones de

validación.

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 más de uno le habrá llamado la atención la instrucción yield y se habrá preguntado

si se pueden comprobar y devolver más de un error.

La respuesta es que sí y la razón es la instrucción yield. El método 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 método, en caso de que hayan fallado

las 3 comprobaciones, devolver un IEnumerable<ValidationResult> con 3 ValidationResult.



15

JQUERY (BÁSICO)

JQuery es una de las librerías de programación más sencillas y potentes que podemos encontrar hoy

en día. El objetivo en este curso es que entendáis código escrito con este Framework y que sepáis

crear aplicaciones muy sencillas.

ASP.NET MVC usa esta librería de base (la podemos encontrar en la carpeta Scripts) y la mayoría 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 ningún problema.

La tarea más común en JQuery es acceder a algún elemento de nuestra página modificar sus

propiedades o contenido y que se actualice antes de que se visualice la página al usuario.

Nos vamos a centrar en estos puntos y cada día iremos incorporando nuevas características.

SELECTORES

Jquery dispone de varios métodos para acceder a los elementos de nuestra página. Vamos a analizar

los más comunes. Todos ellos utilizan la función $(“[selector]”). Si nunca se ha programado con

JQuery o Mootools nos llamará la atención que se use el $ como función para acceder a los

elementos de nuestra página.

Vamos a analizar los selectores más comunes

$(“#ID”)

Seleccionamos un elemento HTML por el id que tenga. Es muy normal usarlo en elementos muy

comunes de nuestra página 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");

En caso de que trabajemos con JQuery y Mootools, y hagamos referencia a ambas librerías desde

nuestras páginas, se producirá un conflicto por la función $ que ambas usan. Para solucionarlo

JQuery ofrece una solución muy sencilla.

Incluimos la instrucción 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.



16

Ahora podríamos hacer cualquier operación con este elemento, que es un objeto que dispone de

métodos / 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 más 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 /> <a href="2">Enlace 2</a><br /> <a href="3">Enlace 3</a><br /> <a href="4">Enlace 4</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 común 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 probáis veréis

que no es así, porque “el” es un objeto JQuery y no un enlace. Debemos usar los métodos que nos

ofrece JQuery para estas tareas.

$(“.CLASE”) O $(“ELEMENTO.CLASE”)

Un paso más en la selección es que no accedamos a elementos tan genéricos si no a aquellos que

nosotros marquemos con un estilo determinado. El ejemplo anterior sería mejor si sólo lo

aplicáramos 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 href="2">Enlace 2</a><br /> <a class="externo" href="3">Enlace 3</a><br /> <a href="4">Enlace 4</a><br /> </div>

Para acceder a estos dos enlaces no podemos usar el genérico de elementos porque cogeríamos los

4, usamos:

var els = $("a.externo");

o en caso de que sólo se use esta clase con enlaces y no haya confusión con otros elementos



17

var els = $(".externo");

Otro ejemplo muy común es crearnos un estilo “obligatorio” que realice determinadas operaciones

sobre los elementos (cambiar color, poner en negrita, añadir un asterisco para indicar que es

obligatorio, etc.).

var els = $(".obligatorio");

y luego los recorremos

els.each(function () { 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 estén en el siguiente nivel de “cabecera” o dentro de otros elementos. En

<div id="cabecera" style="margin-top: 20px;"> <a href="1">Enlace 1</a><br /> <a href="2">Enlace 2</a><br /> <div id="subcabecera" style="margin-top: 10px;"> <a href="3">Enlace 3</a><br /> <a href="4">Enlace 4</a><br /> </div> </div>

Cambiaría el color a los 4 enlaces

var els = $("#cabecera a"); els.each(function () { 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"); els.each(function () { var el = $(this); el.attr("style", "color: red"); });

Sólo cambia el color a los dos primeros enlaces que son hijos directos de “cabecera”.



18

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 código, no tenemos a nuestra disposición a todos los

elementos.

Una buena costumbre es poner al final del HTML todos los ficheros que hacen referencia a

JavaScript. La razón principal es que la persona ya puede comenzar a visualizar la página 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.

Además de esta técnica que usaremos en nuestras plantillas, jQuery tiene dos métodos de ejecutar

código en el momento que el Modelo de Objetos del Documento (DOM) está disponible:

$(DOCUMENT).READY

http://api.jquery.com/ready/

Le indicamos la función 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 código esté al principio o al final no dará error porque no se ejecuta en el

momento de leerse el JavaScript.

$(document).ready(function () { var el = $("#capa_1"); el.html("Añadimos un texto"); });

Si el código fuera sólo

var el = $("#capa_1"); el.html("Añadimos un texto");

No funcionaría al principio de la página porque aun no está disponible el elemento “capa_1”.

$(FUNCTION () { });

Tiene el mismo comportamiento que la anterior. Cuando se pasa una función como primer

parámetro, le indicas a jQuery que lo ejecute cuando esté disponible el DOM. El ejemplo anterior

sería:

$(function () { var el = $("#capa_1"); el.html("Añadimos un texto"); });

ARRAYS

Aplicar una función a un array es una tarea muy común. Lo hemos visto cambiando el

comportamiento de los enlaces. Se usa mucho para asignar eventos que no por accesibilidad no

están permitidos dentro del código HTML.

http://api.jquery.com/ready/



19

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

parámetro 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 código o texto que hay en ese el elemento por el que le indiquemos. Permite

código con etiquetas HTML.

el.html("Añadimos un texto en <strong>negrita</strong>");

La capa pasa a tener el siguiente código

<div id="capa_1">Añadimos un texto en <strong>negrita</strong></div>

TEXT

http://api.jquery.com/text/

Parecido al anterior pero sólo para remplazar con texto sin formato. Ambas funciones también

permite leer el contenido si no se le envía ningún parámetro. 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 detrás 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://api.jquery.com/jQuery.each/

http://api.jquery.com/html/

http://api.jquery.com/text/

http://api.jquery.com/append/

http://api.jquery.com/prepend/



20

LOAD

http://api.jquery.com/load/

Podemos cargar el contenido desde otra página. Lo normal, y como ya hicimos el 2º día es que lo

hagamos desde una acción de nuestros controladores.

Por ejemplo si queremos cargar el contenido de la acción Contenido de nuestro controlador Home,

ejecutaríamos:

el.load("/Home/Contenido");

Si la acción hace algo tan básico 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 añadir 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://api.jquery.com/load/

http://api.jquery.com/attr/



21

EJEMPLO: TO-DO BÁSICO

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 gestión de tareas, AJAX-ed Todo List With PHP, MySQL & jQuery.

Hoy sólo vamos a realizar dos operaciones básicas, añadir y eliminar tareas. Mañana le incluiremos

ciertos eventos con jQuery para hacerla más vistosa, incluiremos la opción 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://tutorialzine.com/2010/03/ajax-todo-list-jquery-php-mysql-css/



22

Para porder realizar ciertas operaciones con las tareas inclímos los siguientes métodos 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)



23

{ 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 métodos la clase ToDo, dejando un código muy limpio y fácil de

entender.

VISTAS

El último paso es crear las vistas para cada una de las acciones.

Antes debemos el layout por el de la página original para incorporar el estilo. Nos descargamos el

código de la web. De algún PHP nos quedamos con el código 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 visualización y creación de tareas.

@helper Tarea(string nombre, int id)



24

{ <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 código

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



25

USO DE NUGET, GESTOR DE PAQUETES PARA .NET

http://nuget.codeplex.com/

Es un administrador de paquetes que facilita la búsqueda e instalación de librerías o componentes

(extensiones) de .NET en su proyecto. Funciona con cualquier versión de Visual Studio 2010 o

superior y para cualquier tipo de proyecto está disponible.

NuGet se encarga de administrar la gestión e instalación de librerías de .NET en tu proyecto de

trabajo, maneja la dependencia entre librerías, así mismo permite actualizar o remover las librerías

de tu proyecto.

Es capaz de actualizar la información de un archivo web.config, en caso de que la librería o paquete a

utilizar requiera de configuraciones. También tiene soporte a utilizar scripts de PowerShell para hacer

operaciones automáticas.

La forma más 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

(Galería en línea) o revisar si hay actualizaciones.

Si buscamos en la galería por el término mvc y tenemos ordenado por Mejor clasificado,

obtendremos un resultado parecido al que se visualiza en la imagen

http://nuget.codeplex.com/



26

Aquellas extensiones que ya estén instaladas se marcan con una flecha.

Pulsando sobre una extensión podemos ver un breve resumen. Pulsando en Más información nos

lleva a la página con la información completa.

Además de incluir un módulo visual de gestión de paquetes, en Herramientas > Administrador de

paquetes de biblioteca > Consola del Administrador de Paquetes disponemos de una potente

aplicación para trabajar con paquetes NuGet.



27

INTEGRAR COMPONENTES: PAGED LIST

https://github.com/TroyGoode/PagedList

http://nuget.org/packages/PagedList.Mvc

PagedList es una librería rque nos permite integrar de forma muy sencilla la paginación 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. Añadimos 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 página que queremos mostrar. Será un

campo opcional porque en la primera llamada no se indicará.

Disponemos un nuevo método ToPagedList que podemos pasar a nuestra lista de libros, en la que le

indicamos la página actual y el número de resultados por página. 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 incuímos un control para paginar. Para eso disponemos del helper PagedListPager al que

le pasamos los datos a mostrar y la acción que va a realizar.

@Html.PagedListPager( (IPagedList)ViewBag.OnePageOfProducts, page =>

Url.Action("Index", new { page }) )

https://github.com/TroyGoode/PagedList

http://nuget.org/packages/PagedList.Mvc



28

El resultado es el siguiente



29

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 añadimos que es libre, que dispone de

plugins y que lo actualizan con frecuencia, es una opción 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 sólo con JavaScript. Si lo queremos para MVC o

no, instalarte los ejemplos. Nosotros nos vamos a centrar en la versión 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 más sencilla de usarla es definir un estilo propio para los campos que la vayan a utilizar, por

ejemplo “editor-html”.

Ahora debemos añadir esa clase al campo o campos que queramos que sean editores HTML.

Modificamos una de las plantilla (por ejemplo Create.cshtml) y en la línea

@Html.EditorFor(model => model.Titulo)

Añadimos la clase

@Html.TextBoxFor(model => model.Titulo, new { @class = "editor-html" })

Ahora en algún 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

El Helper EditorFor no permite añadir atributos como @class, esa es la razón de que lo

remplacemos por TextBoxFor que admite como segundo parámetro una relación de atributos.

http://www.tinymce.com/

http://nuget.org/packages/TinyMCE



30

Mañana veremos una forma más elegante y reutilizable de hacer uso de TinyMCE.



31

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 validación del lado del cliente como del lado del servidor. Vamos a realizar un ejemplo muy

sencillo que compruebe que estamos insertando una dirección 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 validación 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 añada el nuevo campo o símplemente añadimos 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 aplicación en el navegador e introducimos mal la Url veremos el siguiente mensaje.

http://dataannotationsextensions.org/

http://nuget.org/packages/DataAnnotationsExtensions.MVC3



32

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 dirección válida (http o ftp)") ]

public string UrlMasInfo { get; set; }

PROYECTO

CREAR VISTAS Y PAQUETE, MODELOS COMPLEJOS, CONTROLADORES Y HELPERS DE LOS NUEVOS TIPOS.

ASP.NET MVC 3 y 4 · 2012-10-22 · ASP.NET MVC 3 Y 4 | DESARROLLO DE APLICACIONES CON EL FRAMEWORK...

Documents

Transcript of ASP.NET MVC 3 y 4 · 2012-10-22 · ASP.NET MVC 3 Y 4 | DESARROLLO DE APLICACIONES CON EL FRAMEWORK...