See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/240611007

ASP.NET MVC y jQuery, más poder, más control, ¿más esfuerzo?

Article · January 2011

CITATIONS READS

0 6,966

2 authors:

Alejandro Tamayo Miguel Katrib

University of Havana University of Havana
15 PUBLICATIONS   6 CITATIONS    44 PUBLICATIONS   48 CITATIONS   

SEE PROFILE SEE PROFILE

Some of the authors of this publication are also working on these related projects:

Academic Libraries in Videogames View project

Rendering View project

All content following this page was uploaded by Miguel Katrib on 08 September 2015.

The user has requested enhancement of the downloaded file.

 ASP.NET MVC y jQuery
Más poder, más control, ¿más esfuerzo?
En los últimos años, la Web ha evolucionado considerablemente para crear páginas más dinámicas, más
colaborativas y más dedicadas al usuario. En este artículo se verá cómo combinar ASP.NET MVC y jQuery
para producir una interfaz de usuario más responsiva y de mayor calidad.
La llamada Web 2.0 se caracteriza por ser más diná-
mica, permitiendo una mayor interacción con los
usuarios. JavaScript ha jugado un papel protagó-
nico para lograr aplicaciones con estas caracterís-
ticas y a la vez seguir cumpliendo con los están-
dares web. Muchos lectores tendrán conciencia del
grado de complejidad que tiene desarrollar este
tipo de aplicaciones. Las dificultades se deben fun-
damentalmente a la arquitectura cliente-servidor y
desconectada del protocolo HTTP, la cual obliga a
una división en el desarrollo: por un lado, el códi-
go que se ejecuta en el servidor, y por otro, aquel
que se ejecuta en el navegador una vez que se car-
ga la página web. Ambas partes tienen que estar
en sintonía para producir una aplicación que con-
tenga una interfaz de usuario funcional y agrada-
ble (al estilo de las aplicaciones de escritorio) jun-
to a un comportamiento (usualmente guiado por
el servidor) que esconda esta complejidad del pro-
tocolo HTTP.
Por esta razón han surgido las RIA1 [1] tales
como Adobe Flex y Microsoft Silverlight. El pro-
blema con las RIA radica en que cada una exige
instalar componentes adicionales en el navega-
dor para poder ejecutar la aplicación (por ejem-
plo, Flash o Silverlight). Si bien internamente
esto puede ser aceptable para una organización,
en el vasto mundo de Internet (en ocasiones
intolerante) esto puede resultar molesto o invia-
Alejandro Tamayo y Miguel Katrib
Instructor, desarrollador del Grupo
1
Del inglés Rich Internet Applications.
WEBOO, Universidad de La Habana;
Doctor y Profesor Titular, líder del Grupo
WEBOO, Universidad de La Habana
ble para un determinado tipo de usuarios, sobre
todo si metemos en escena a las luchas comer-
ciales y otros intereses que no son propiamen-
te tecnológicos.
Esto ha llevado a que muchos desarrolladores
decidan "machacarse" y volver a lo básico: Java-
Script. JavaScript es pequeño y limitado en com-
paración con los lenguajes de propósito general,
pero es suficiente para el desarrollo de aplicacio-
nes web interesantes gracias a la disponibilidad de
un conjunto de bibliotecas de funciones (tal es el
caso de jQuery [2]) que incluyen mucho código de
fácil utilización para el desarrollo de interfaces de
usuario de calidad y que ejecutan en cualquier nave-
gador web o sistema operativo.
Pero para utilizar jQuery (o cualquier otra biblio-
teca de propósito similar, como Prototype) más allá
de la creación de animaciones (DHTML) o modifica-
ción de los elementos de la página web con el objeti-
vo de crear una presentación más estilizada, por ejem-
plo, para crear controles que extraigan datos del ser-
vidor o que dependan de cierto comportamiento defi-
nido en esa parte, juega un papel fundamental la pla-
taforma que esté del lado del servidor, ya que en depen-
dencia de ésta, la integración con jQuery será más
simple o más enrevesada.
Como posiblemente ya el lector habrá escu-
chado, ASP.NET MVC [3] implica un cambio radi-
cal para los desarrolladores web que utilizan tec-
nología .NET debido a que su diseño
se basa en una arquitectura limpia, fun-
damentada en la inclusión de patrones
de diseño para agilizar el desarrollo y
en la aplicación de pruebas unitarias
para garantizar la calidad del software.
En este artículo se verá cómo jQuery y
ASP.NET MVC pueden combinarse de
manera natural para desarrollar aplica-
ciones de alta calidad. Note que esto no
niega que jQuery se pueda utilizar con
ASP.NET clásico; sino que muchos de
los problemas que los desarrolladores
pueden encontrarse con ASP.NET clá-
sico (tales como la creación de mane-
jadores HTTP para servir datos y la con-
versión manual a JSON2) se simplifican
con la forma de desarrollo que intro-
duce ASP.NET MVC.
Desarrollando un control
"Selección de persona"
Para mostrar la integración entre jQuery
y ASP.NET MVC se escogió como ejem-
plo el desarrollo de un control3 para "selec-
cionar una persona". Este control pudie-
ra implementarse como una caja de tex-
to común y corriente que reciba una cade-
na de texto, pero en tal caso tendríamos
el problema de la libertad del formato: el
nombre "Angelina Jolie" es, desde el pun-
to de vista computacional, diferente a "A.
Jolie" o "Jolie, Angelina"; pero semánti-
camente es la misma persona. Por tanto,
se requiere el desarrollo de un control que
cumpla los siguientes requisitos:
• Restrinja el formato para que se iden-
tifique a una misma persona de mane-
ra única.
• Ayude al usuario a realizar la selección
por si éste no recuerda el nombre com-
pleto.
• Minimice el tráfico cliente-servidor, pero
que permita la búsqueda sobre una
base de datos de personal que puede
ser voluminosa.
2
JavaScript Object Notation.
3
Hemos usado el término control siguiendo el símil con los controles de Windows, aunque en la Web se usa el término Widget , o en el caso de jQuery
también el término Plug-in.
4
Una traducción al español del término Separation of Concerns sería Separación de Responsabilidades, pero es importante que el lector conozca y
maneje las siglas SoC, porque son las que se va a encontrar en la documentación que existe en la web.
Note que los controles predetermi- eventos de .NET, de manera similar a
nados de HTML no satisfacen estos las aplicaciones Windows), puede con-
requerimientos. Por ejemplo, una primera vertirse en un problema de gran com-
idea podría ser utilizar un menú desple- plejidad cuando el desarrollador desea
gable (Dropdown List), pero este tipo de personalizar ciertos aspectos, como la
control requiere que se "rellenen" las inclusión de Widgets jQuery o la ejecu-
opciones de selección a priori, por lo que ción parcial del ciclo de vida de ASP.NET
sería inmanejable para muchos elemen- para producir solo un pedazo de la pági-
tos (tanto por el tráfico como por el gas- na. Piense en una página .aspx que
to de memoria en el navegador web). represente un tablero de mando (Dash-
La solución que vamos a ilustrar board) donde cada elemento se repre-
consiste en utilizar una caja de texto senta como un control de usuario
que autocomplete los nombres de (ASP.NET User Control). Procesar dicha
manera eficiente a partir de una lista página podría suponer un costo opera-
ASP.NET MVC implica un cambio radical para los desa-
rrolladores web que utilizan tecnología .NET debido a que
su diseño se basa en una arquitectura limpia, fundamen-
tada en la inclusión de patrones de diseño para agilizar el
desarrollo y en la aplicación de pruebas unitarias para
garantizar la calidad del software. jQuery y ASP.NET MVC
pueden combinarse de manera natural para desarrollar
aplicaciones de alta calidad
de personas, y que el texto que se escri- cional, por lo que sería útil poder divi-
ba en la caja de texto se valide contra dir la misma y actualizar cada control
dicha lista. de usuario de manera independiente.
Usted pudiera pensar que el problema
se resuelve incluyendo cada control de
Separando las responsabilidades usuario en un Update Panel (ASP.NET
AJAX Extensions), pero lamentablemen-
En ASP.NET clásico, una página web te, producto de la génesis de ASP.NET,
dinámica (.aspx) puede verse como un aunque viaje entre el servidor y el clien-
gran proceso monolítico que construye te solamente el código HTML de actua-
lo que será la página HTML que visua- lización de dicha región, se sigue eje-
liza el navegador web, pero mante- cutando el ciclo de vida completo de la
niendo el estado de ejecución de la lógi- página ASP.NET; es por ello que se dice
ca de la aplicación en el servidor. Esto, que es un proceso monolítico.
si bien es una ventaja para aquellos pro- Una de las características más
gramadores de .NET que desean desa- importantes que brinda ASP.NET MVC
rrollar aplicaciones web sin un conoci- es la Separación de Responsabilidades
miento profundo de HTTP y HTML (se o SoC (Separation of Concerns)4. Preci-
programa en términos de controles y samente con la aplicación del patrón
dotNetManía
13
 MVC, esta clásica página monolítica de
ASP.NET se convierte en varios peda-
zos conceptualmente diferentes que
pueden componerse en un resultado
final según fuese necesario. Otra carac-
terística muy interesante en ASP.NET
MVC es el control total que tiene el
desarrollador sobre el código HTML
generado; ya no hay controles "server-
side" y no hay eventos, sino "vistas" que
permiten la generación directa de códi-
go HTML [4].
Gracias a estas dos características,
veremos que la inclusión e interacción de
código jQuery con los recursos que se
publican desde el servidor se hace mucho
más fácil. Es por ello que decimos que
con ASP.NET MVC hay más poder y más
control, pero, ¿será factible el esfuerzo
extra que se requiere?
public class TaskModel
{
public int Id { get; set; }
[Required(ErrorMessage = "Descripción requerida")]
public string Description { get; set; }
[Required(ErrorMessage = "Debe seleccionar una persona válida")]
public int AssignedToID { get; set; }
}
public class PersonModel
{
public int Id { get; set; }
public string Name { get; set; }
public string Department { get; set; }
}
Listado 1. Modelo de datos

Details.cshtml, Edit.cshtml, Index.

El control "Selección de persona"
con jQuery y ASP.NET MVC
Por simplicidad, en el ejemplo no se
utilizará una conexión a base de datos,
sino una colección de objetos en
memoria. Supongamos un modelo que
tendrá una representación de Tareas y
Personas, como se muestra en el lis-
tado 1. Hay que resaltar que se utiliza
la anotación con el atributo Required
(System.ComponentModel.DataAnnota‐
tions) para validar el modelo, que en
este caso significa que las propiedades
Description y AssignedToID tienen que
contener valor. La gracia es que
ASP.NET MVC posteriormente conver-
tirá dichas anotaciones en código Java-
Script (utilizando el plug-in para vali-
dación de jQuery, que se encuentra en
los ficheros jquery.validate.js y
jquery.validate.unobtrusive.min.j),
para que en el cliente (en el navegador)
se haga la validación de la entrada de
datos sin realizar un envío (POST) al
servidor.
Se creará un controlador llamado
TasksController.cs, que será el res-
ponsable de implementar las opera-
ciones CRUD (Create, Retrieve, Update
y Delete) para las Tareas. Adicional-
dotNetManía
cshtml), utilizando en este caso el nue-
vo motor de vistas Razor [5] que viene
con ASP.NET MVC 3.
En la figura 1 se muestra la vista
para la creación de una nueva tarea
(producida por Create.cshtml) con el
control de selección de personal fun-
cionando. La idea consiste en permi-
tirle al usuario ir escribiendo un nom-
bre y mientras ir desplegando un menú
de selección (claro, con una cantidad
de elementos que quepan en pantalla)
que autocomplete el prefijo escrito por
Figura 1. Menú desplegable con
autocompletado que facilita la
Figura 2. Validador que
verifica que el texto sea un nombre
válido en la lista de personas
el usuario. A pesar de que se brinde un
menú desplegable para el autocom-
pletado, como en toda interacción de
este tipo, el usuario sigue teniendo la
libertad para escribir lo que desee; es
necesario validar el valor que se escri-
ba y mostrar un error según sea nece-
sario (ver figura 2).
El código para cada operación
CRUD es bastante general. El listado 2
muestra cómo sería el código para cre-
ar una tarea; en él se puede apreciar
que al hacer un pedido GET Tasks/Cre‐
ate simplemente se devuelve la vista
Create.cshtml y se espera por que el
usuario introduzca los datos. Cuando
éste decide enviar los datos introduci-
dos hacia el servidor, éstos se ligan
automáticamente al modelo TaskModel
utilizando las características predeter-
minadas de ASP.NET y simplemente se
añaden al contexto de datos. La parte

mente, se crearán las respectivas vis- importante estaría entonces en cómo

selección de una persona
tas ( Create.cshtml , Delete.cshtml , desarrollar la vista Create.cshtml.

14
 Una primera idea podría ser imple-
mentar desde cero el control deseado
usando jQuery (para ver cómo usar
jQuery desde Visual Studio, el lector
puede referirse a un artículo anterior
de DNM [6]). No obstante, antes de
empezar de cero siempre es recomen-
dable realizar una búsqueda y verificar
si ya existe algún control para esto, o
al menos alguno que tenga un com-
portamiento similar para utilizarlo
public ActionResult Create()
{ $("#actriz").autocomplete({
return View();
} });
[HttpPost]
public ActionResult Create(
TaskModel model)
{
try
{ Listado 3. Uso básico del plug-in jQuery "autocomplete"
var context = new MyDatabase();
context.Insert(model);
context.SubmitChanges();
return RedirectToAction("Index");
}
catch
{ mente vía AJAX, por lo que primera-
return View(model);
} cional al controlador de tareas (listado
} 4) que devuelva mediante un pedido
Listado 2. Acciones que implementan la
creación de una nueva tarea
como punto de partida. Para jQuery
recomendamos visitar http://plu‐
gins.jquery.com. Con la plantilla de
proyecto predeterminada que se inclu-
ye en Visual Studio 2010 al instalar la
distribución ASP.NET MVC 3 [7] se brin-
dan a su vez un conjunto de plug-ins
jQuery listos para utilizar. Uno de estos
es jQuery UI [8] ( jquery‐ui.js), que
es una biblioteca que incluye barras de
progreso, cajas de diálogos modales,
animaciones y uno que usaremos en
especial para este artículo: autocom-
plete.
El plug-in jQuery autocomplete se
vincula a una caja de texto y despliega
un menú de selección que autocomple- datos en formato JSON mediante el
ta la palabra que el usuario escribe, dada método GET por problemas de seguri-
una fuente de datos que se especifica dad [9], aunque este comportamiento
estáticamente o se carga dinámicamente puede forzarse especificando JsonRe‐
vía AJAX. En el listado 3 puede verse su questBehavior.AllowGet . Lo intere-
utilización básica: se crea una caja de sante del uso de GET sobre POST es
texto con id actriz y se vincula el auto- que puede utilizarse el navegador web
complete (uso del selector de id utili- para probar que la acción devuelva el
zando la sintaxis #actriz), pasando una resultado adecuado (figura 3). No obs-
lista de actrices como fuente de datos. tante, es recomendable el uso de un
Para el desarrollo del control de selec- depurador de HTTP como Fiddler [10],
<script type="text/javascript">
$(document).ready(function () {
source: ["Angelina Jolie", "Penélope Cruz", "Salma Hayek"]
});
</script>
<input type="text" id="actriz" />
ción de persona, será necesario que la que permite visualizar e interactuar con
lista de personas se cargue dinámica- el tráfico HTTP.
Además de añadir código necesario
mente hay que agregar una acción adi- para la funcionalidad del controlador de
tareas, hay que programar el comporta-
miento de la vista, que constará de dos
GET y en formato JSON el listado de las partes: el código HTML declarativo (que
primeras 10 personas cuyo nombre auto- representará la forma visual) y el código
complete cierto prefijo. JavaScript activo, que pone el comporta-
De manera predeterminada, en miento (en este caso, el plug-in auto-
ASP.NET MVC no se permite devolver complete con jQuery).
public ActionResult Persons(string name)
{
var context = new MyDatabase();
return new JsonResult
{
Data = context.GetRepository<PersonModel>()
.Where(p => p.Name.StartsWith(name))
.Take(10),
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
}
Listado 4. Acción que devuelve un array JSON con las personas (a lo sumo 10) cuyo nombre
dotNetManía
comienza con el valor del parámetro name
15

Figura 3. Utilizando la acción Persons
desde el navegador web
En ASP.NET MVC, ligar los datos del formulario
HTML y el objeto .NET que define el modelo (binding)
se hace de manera predeterminada utilizando el atri-
buto name de cada etiqueta HTML INPUT (controles
Una de las características más importantes
que brinda ASP.NET MVC es la Separación
de Responsabilidades
HTML). Si el modelo (el tipo en .NET) tiene una pro-
piedad con nombre Prop1 y existe un control HTML
con atributo name cuyo valor sea Prop1 , entonces
automáticamente se le asigna el valor que se reciba
en el FORM para Prop1 a la propiedad con el mismo
nombre en .NET5. ASP.NET MVC interpreta los tipos
básicos (int, float, bool, etc.) y hace la conversión
automáticamente. Es por ello que si se quiere utilizar
esta ligadura, se deben tener dos controles HTML,
uno que almacene el nombre de usuario (autocom-
pletado) y otro que almacene el Id, como se muestra
en el listado 5.
Lo que queremos en este ejemplo es mostrar una
caja de texto donde el usuario pueda escribir (con
autocompletado) el nombre de una persona, pero el
valor de interés que se enviará al servidor no será el
nombre de usuario, sino el Id, que se almacena en
un campo escondido (hidden) y está ligado automá-
ticamente a la propiedad AssignedToID del modelo
TaskModel. Entonces, será imprescindible diseñar un
mecanismo que permita rellenar automáticamente
el Id adecuado cuando el usuario seleccione una per-
sona válida.
dotNetManía
5
Esta ligadura es mucho más potente y compleja, ya que permite una sintaxis dot notation para navegar a más de un nivel
(Prop1.Prop2.Prop3), e incluso permite usar índices en caso de arrays con la sintaxis Prop[index].
16
<Button x:Name="btnVisualPlayer" Grid.Column="1"
RenderTransformOrigin="0.5,0.5"
<div class="editor‐label">
@Html.LabelFor(model => model.AssignedTo)
</div>
<div class="editor‐field">
@Html.TextBox("AssignedTo")
@Html.HiddenFor(model => model.AssignedToID)
@Html.ValidationMessageFor(model =>
model.AssignedToID)
</div>
Listado 5. Fragmento de código HTML que visualiza la caja
de texto para la selección de persona, así como la etiqueta y
el validador necesarios
En el listado 6 se muestra el código completo que
se añade a la vista Create.cshtml para darle este com-
portamiento a la caja de texto. Este código puede divi-
dirse en tres partes para su análisis:
• La configuración del pedido AJAX para solicitar la lis-
ta de personas y crear la fuente de datos.
• El formato personalizado de los elementos del menú
desplegable.
• La acción de selección (que actualiza el valor del con-
trol escondido cuyo atributo HTML name es igual a
AssignedToID con el Id de la persona seleccionada)
En este ejemplo, al plug-in autocomplete se le con-
figuran dos opciones source y select para definir, res-
pectivamente, la fuente de datos (AJAX) y la acción a
ejecutar cuando se seleccione un elemento. En source
se debe especificar una función que reciba dos pará-
metros, request y response. El parámetro request des-
cribe el pedido (de manera especial, el valor introduci-
do por el usuario se almacena en el miembro term del
request), y como parámetro response el plug-in auto-
complete pasa una función (un callback asíncrono) que
se utiliza para rellenar la lista de elementos del menú
desplegable asociado a la caja de texto una vez que se
haya realizado cierto procesamiento (que en este caso
será un pedido AJAX).
Para poblar la fuente de datos se utiliza la función
jQuery $.ajax, que permite realizar un pedido AJAX.
Como se muestra en el ejemplo, el pedido AJAX recibe
un objeto de configuración JSON con miembros que
definen el comportamiento de dicho pedido. En el miem-
bro url se configura a qué dirección se realiza el pedi-
do, que en este caso es hacia la acción Persons previa-
 <script type="text/javascript">
$(document).ready(function () {
$("#AssignedTo").change(function (e) {
$(‘#AssignedToID’).val("");
});
$("#AssignedTo").autocomplete({
source: function (request, response) {
$.ajax({
url: ‘@Url.Action("Persons")‘,
cache: true,
data: { name: request.term },
dataType: ‘json’,
type: ‘get’,
timeout: 10000,
success: function (data) {
var mappedData = $.map(data, function (item) {
return {
id: item.Id,
label: item.Name,
value: item.Name,
Department: item.Department
}
});
response(mappedData);
}
})
},
select: function (event, ui) {
$(‘#AssignedToID’).val(ui.item.id);
}
}).data("autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "<br/><b>Department: </b>" +
item.Department + ‘<div class="border"><div></a>’)
.appendTo(ul);
};
});
</script>

Listado 6. Código jQuery que da vida al control de selección de una persona, que no es más que una personalización del plug-in
autocomplete

mente definida en el controlador TasksController.cs,
mediante la combinación de código C# y JavaScript gra-
cias al motor Razor (url: ‘@Url.Action("Persons")’6).
En data se configuran los parámetros del query string
en el pedido AJAX (en este caso el parámetro name), y
de manera adicional se configuran otros parámetros
como cache, dataType, type y timeout, que se auto-des-
criben por su nombre. En el miembro success se pue-
de especificar una función que se ejecuta cuando se reci-
be el resultado del servidor. En este caso, se cambia la
estructura del resultado (utilizando la función jQuery
$.map) para hacerlo compatible con el plug-in autocom-
plete, que espera un array de elementos con miembros
label y value (donde label especifica el valor que se
muestra en el menú desplegable y value el valor que se
envía a la caja de texto cuando se realiza la selección), y

6
El código posterior a @ se interpreta como C# y se ejecuta en el servidor al procesar la vista. Automáticamente, Razor detecta
dotNetManía

dónde termina el código C# y dónde empieza nuevamente el código HTML (en este caso, el JavaScript embebido), eliminando
los molestos separadores de ASP.NET <%= %>.

17

Figura 4. Relación entre el código HTML y su visualización
para el control de selección de persona
se devuelve mediante la función callback
response anteriormente descrita.
Finalmente, utilizando la función
.data de jQuery se redefine la función
_renderItem del prototipo autocomple‐
te (que es lo que en este ejemplo define
el autocomplete) asociado a la instancia
del autocompletado que se está creando.
En jQuery las "extensiones" (plug-ins
como autocomplete) asociadas a algún
elemento HTML se almacenan en un
espacio aparte, fuera del objeto DOM
(expando object) que representa al ele-
mento, y son accedidas mediante la fun-
ción .data. De esta forma, se puede rede-
finir el comportamiento predeterminado
de cualquier extensión.
El menú desplegable que brinda el
plug-in autocomplete se presenta como
una lista HTML <ul></ul>, por lo que el
formato de cada elemento se codificará
entre etiquetas <li></li>. Para este ejem-
plo, además del nombre de usuario se
mostrará el departamento al que perte-
nece, seguido por un separador perso-
nalizado definido mediante la clase CSS
.border (figura 4).
Cuando se selecciona un elemento
del menú desplegable, se ejecuta la fun-
ción definida en el miembro success, que
en este caso actualiza el valor del campo
AssignedToID mediante el código jQuery
$(‘#AssignedToID’).val(ui.item.id).
Note que a la caja de texto se le vincula
dotNetManía
adicionalmente una acción cuando se
cambia el texto ( $("#AssignedTo")
18
.change(...)), que en este caso borra
el valor del campo AssignedToID. Como
el evento de selección del autocomplete
se ejecuta después de lanzar cualquier
evento onChange de la caja de texto, esta
adición permitirá que cualquier edición
que realice el usuario elimine el valor
de AssignedToID , para que así este
campo reciba valor una vez que se
seleccione una persona válida. En caso
de que no se rellene correctamente el
Id (producto de no realizar alguna
selección), se disparará el validador
Required de ASP.NET MVC para el
campo AssignedToID , obteniéndose
finalmente el comportamiento pro-
puesto para el control de selección de
persona.
<script src="@Url.Content("~/Scripts/ui.PeoplePicker.js")"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#AssignedTo").peoplePicker({
DisplayControl: "#AssignedTo",
ValueControl: "#AssignedToID",
url: ‘@Url.Action("Persons")‘
});
});
</script>
Listado 7. Encapsulando la inicialización del widget autocomplete en el método peoplePicker
para simplificar la reusabilidad
Organizando el código jQuery
Aunque el código anterior funciona, no
es muy reusable que digamos, ya que
está fuertemente acoplado a los nom-
bres de los identificadores fijos (en este
caso #AssignedTo y #AssignedToID), por
lo que la reutilización en la vista
Edit.cshtml tendría que hacerse copian-
do el código, acción que viola el princi-
pio DRY (Don’t Repeat Yourself). Aun-
que JavaScript puede considerarse como
un lenguaje orientado a objetos, su con-
cepción es diferente a la de lenguajes
como C#. En principio, en JavaScript no
existen clases sino prototipos, y no exis-
ten constructores de objetos como
miembros de clases, sino funciones que
construyen objetos, las cuales pueden
utilizarse de diferentes formas. Por ello,
para lograr una unicidad en la creación,
cada biblioteca JavaScript brinda una
manera de reusar código. La biblioteca
jQuery UI brinda un patrón conocido
como jQuery UI Widget Factory [11]
mediante el cual se puede extender el
comportamiento de un widget. No obs-
tante, como en este ejemplo lo que se
quiere reusar son los parámetros de ini-
cialización del plug-in autocomplete, es
mucho más sencillo crear un nuevo
método jQuery que se llame, por ejem-
plo, peoplePicker y que permita una uti-
lización como la que se muestra en el
listado 7.
Para lograr esto, simplemente se crea
un nuevo fichero de script (ui.People‐
Picker.js) con el esquema que se muestra en el lista-
do 8 y se mueve al cuerpo del método peoplePicker el
código del listado 7 reemplazando los literales "#Assig‐
nedTo" y "#AssignedToID" por options.DisplayCon‐
trol y options.ValueControl, respectivamente; y en el
pedido AJAX como url se utilizaría options.url.
De esta forma, se tendría el código del comporta-
miento en un fichero de script único que puede ser reu-
tilizado desde cualquier vista en la que se requiera el
control selección de una persona.
$.fn.extend({
peoplePicker: function (options) {
// Código de inicialización
} self (hágalo usted mismo), puede no ser ideal en todas
});
Listado 8. Caparazón que adiciona la función peoplePicker a
jQuery
Conclusiones
Producto de la arquitectura cliente-servidor y desconec-
tada de la Web, para desarrollar una aplicación web que
cumpla con los requerimientos de la llamada Web 2.0 es
necesario que el desarrollador tenga claro qué parte deberá
desarrollarse en el cliente (HTML+JavaScript) y qué par-
te en el servidor. En esto hay que tener en cuenta que los
extremismos son malos. Una aplicación que desarrolle
la lógica totalmente en el servidor tiene la desventaja de
que necesita más pedidos HTTP, lo cual es un inconve-
niente para los usuarios finales. Por otro lado, una apli-
cación que ejecute totalmente en el cliente tampoco es
buena, al menos con el desarrollo tecnológico actual, ya
que no aprovecharía características como SEO (Search
Engine Optimization) que permiten posicionar la web en
los principales buscadores de Internet y acceder directa-
mente a la informaciones concretas que publique la apli-
cación. La clave entonces sería que una aplicación pue-
da balancear adecuadamente lo que se hace en el lado
del cliente y lo que se hace en el servidor. Y aquí es don-
de ASP.NET MVC resulta una plataforma ventajosa, ya
que nos brinda más poder y más control en comparación
con ASP.NET clásico, permitiéndonos inclinar la balan-
za a la posición deseada, al costo de tener en cuenta un
nivel de detalle que dependerá de nuestro esfuerzo y de
nuestro conocimiento de HTML y HTTP.
Cierto que este principio, conocido como Do It Your-
las situaciones. Es por ello que a la par de ASP .NET MVC
también se tiene una versión 4.0 de ASP .NET que inclu-
ye muchas mejoras con respecto a la versión anterior. Es
de esperar que ASP.NET MVC, que es una tecnología rela-
tivamente joven (debutó en 2009), evolucione de tal mane-
ra que llegue a ser la herramienta por excelencia para el
desarrollo de aplicaciones web con tecnología .NET. Pero
por ahora, como se ha visto en este ejemplo sencillo,
requiere de cierto esfuerzo adicional, y de conocer más
detalles de HTML, HTTP y JavaScript.
Por tanto, la respuesta a la pregunta de ¿más esfuer-
zo? incluida en el título de este artículo dependerá de vues-
tro equipo de desarrollo. Es verdad que implica más tra-
bajo, pero este gasto adicional debe tributarle un beneficio
mayor en cuanto a los requerimientos de su aplicación. Por
lo pronto, no está mal comenzar a intentarlo (el código del
proyecto puede descargarse del sitio web de dotNetManía),
mientras esperamos que en el futuro la tecnología haga
transparentes muchos de estos detalles que ahora pueden
agobiar. t

Referencias
[ 1 ] Rapoza, Jim. RIA War Is Brewing. eWeek. [En línea]
http://etech.eweek.com/content/application_development/ria_war_is_brewing.html.
[ 2 ] Sitio web oficial de jQuery. [En línea] http://jquery.com.
[ 3 ] Sanderson, Steven. Pro ASP.NET MVC Framework. Apress, 2009.
[ 4 ] Esposito, Dino. Comparing Web Forms and ASP.NET MVC. MSDN Magazine. [En línea]
http://msdn.microsoft.com/en‐us/magazine/dd942833.aspx.
[ 5 ] Guthrie, Scott. Introducing "Razor" – a new view engine for ASP.NET. ScottGu’s Blog. [En línea]
http://weblogs.asp.net/scottgu/archive/2010/07/02/introducing‐razor.aspx.
[ 6 ] Población, Alberto. Programación con jQuery en Visual Studio 2010. En dotNetManía nº 76.
[ 7 ] Microsoft. Sitio Web Oficial de ASP.NET MVC 3. [En línea] http://www.asp.net/mvc/mvc3.
[ 8 ] Sitio web oficial de jQuery UI. [En línea] http://jqueryui.com/.
[ 9 ] JSON Hijacking. Phil Haack’s blog. [En línea] http://haacked.com/archive/2009/06/25/json‐hijacking.aspx.
dotNetManía

[ 10 ] Fiddler Web Debugger - A free web debugging tool. [En línea] http://www.fiddler2.com.
[ 11 ] jQuery UI API Developer Guide. jQuery UI. [En línea] http://jqueryui.com/docs/Developer_Guide.

19
View publication stats