Después de mucho tiempo sin dejarme ver, ni leer por aquí, me he animado a escribir este artículo, como va siendo habitual últimamente, debido a un comentario escrito en otro de mis posts.
Sabemos que existen distintas maneras de interactuar con las entidades de nuestro modelo de datos, pero muchas veces nos cuesta “innovar” si no tenemos un punto de partida. En este caso vamos a ver, paso a paso, como podemos trabajar de manera sencilla con nuestro modelo en una aplicación MVC mediante la combinación de un servicio WCF + jQuery.
Lo primero que vamos a hacer es crear la aplicación web correspondiente. Para ello abrimos Visual Studio y seleccionamos la opción File > New > ASP. NET MVC3 Web Application, y creamos nuestra aplicación a la que llamaremos JqueryModel.
Seleccionamos la plantilla Internet Application, y el View Engine ASPX. * También podemos indicar que se cree un proyecto de pruebas unitarias asociado.
Una vez creada la aplicación:
1. Creamos la base de datos que vamos a ir alimentando a través de nuestro sitio web, mediante un formulario de contacto. Dentro de App_Data hacemos clic con el botón derecho y seleccionamos la opción Add>New Item >SQL Server Database y creamos una base de datos llamada ContactosDB
Donde añadiremos una tabla llamada Contacto, donde el identificador (Id) será la clave primaria, y la cual contendrá los siguientes campos:
2. Creamos el modelo de datos de tipo de ADO.NET Entity Data Model, a partir de nuestra base de datos y que se llamará ModeloContactos
3. Añadimos servicio WCF. Para ello seleccionamos un nuevo Item de tipo AJAX-enabled WCF Service, y al que llamaremos Ajaxservice
En dicho archivo debemos añadir el siguiente código:
1. Referencia al modelo:
- using JQueryModel.Models;
2. La definición de nuestra entidad de modelo:
3. El método de creación de objetos de tipo contacto, que llamaremos insertarContacto:
{
try
{
Contacto contacto = new Contacto
{
Nombre = Nombre,
Apellido = Apellido,
Movil = Movil,
Email = Email
};
contactoentity.AddToContacto(contacto);
contactoentity.SaveChanges();
return true;
}
catch (Exception ex)
{
return false;
}
}
A continuación vamos a personalizar la vista que queremos mostrar. Para ello abrimos el archivo Index.aspx, que es el que se llama por defecto desde el controlador principal HomeController.cs, al cargarse la página. En él:
1. Añadimos las referencias a los archivos javascript que vamos a utilizar, tras añadirlos previamente en caso de que no estén en la aplicación:
<script src=»../../Scripts/json2.js» type=»text/javascript»></script>
El segundo de ellos se utiliza para serializar JSON, ya que para llamar a un servicio WCF desde jQuery la petición debe estar bajo la notación JSON, por lo que necesitamos una biblioteca externa que nos de dicha funcionalidad. *Descargada de github.com/…/JSON-js
2. Dentro del contenido principal añadimos los campos del formulario con su correspondiente identificador que serán de tipo Input, para que luego podamos llamarlos desde el código javascript. Para ello utilizamos el siguiente código HTML:
<table>
<tr>
<th>Nombre:</th>
<td style=»width: 246px»><input id=»Nombre» style=»width: 244px» /></td>
</tr>
<tr>
<th>Apellido:</th>
<td style=»width: 246px»><input id=»Apellido» style=»width: 244px» /></td>
</tr>
<tr>
<th>Movil:</th>
<td style=»width: 246px»><input id=»Movil» style=»width: 244px» /></td>
</tr>
<tr>
<th>Email:</th>
<td style=»width: 246px»><input id=»Email» style=»width: 244px» /></td>
</tr>
<tr>
<th><button id=»BotonAgregar»>Añadir contacto</button></th>
</tr>
</table>
A continuación añadimos el código javascript correspondiente que llamará al método definido dentro de nuestro servicio, al hacer clic en el botón:
$(«#BotonAgregar»).click(function () {
//Convertir los datos del formulario en un objeto
var objeto = {
Nombre: $(«#Nombre»).val(),
Apellido: $(«#Apellido»).val(),
Movil: $(«#Movil»).val(),
Email: $(«#Email»).val() };
//Parseamos nuestro objeto a JSON
data = JSON.stringify(objeto);
$.ajax({
type: «POST»,
contentType: «application/json; charset=utf-8»,
url: «AjaxService.svc/insertarContacto»,
data: data,
dataType: «json»,
success: insertarCallback
});
});
//Mensajes de ejecución
function insertarCallback(result) {
result = result[«d»];
if (result === true) {
alert(«Contacto Agregado»);
} else {
alert(«Error al tratar de Grabar el contacto»);
}
}
</script>
Si compilamos la aplicación y probamos a añadir contactos, vemos que salta la alerta configurada en caso de que el método funcione correctamente…lo que es buena señal.
Y si accedemos a nuestra base de datos, vemos como los nuevos contactos se han agregado correctamente:
Ruegos y preguntas en http://geeks.ms/blogs/gortigosa/contact.aspx para todo lo demás…