Ajax.Net con Acceso a Base de Datos

Ante todo este articulo muestra lo básico del uso de Ajax.Net con dos ejemplos, primero con una suma de dos números y el segundo con Acceso a la Base de Datos Northwind (incluida en el Sql Server), para hacerlo sencillo aquí les muestro el código que interactúa con Northwind la suma esta adjunta en el zip , por si no les queda claro este ejemplo XD.

Primero un poco de teoría. Ajax permite simular el comportamiento de aplicaciones de escritorio en la web. Ya que puedes hacer que los viajes de ida y vuelta al servidor no refresquen la pagina cada vez que requieras: Atender un evento o traer información de una Base de Datos, etc...; Como se hacia en aplicaciones web tradicionales.

Lo que hace el ajax es realizar la comunicación entre el navegador y el Servidor pero de forma Asíncrona. Por esto el Ajax es soportado bajo 3 tecnologías que ya llevan tiempo en la red: Html (para presentar la información), Javascript (para interactuar dinámicamente con los datos) y XML y XLST (para intercambiar y manipular datos de manera asíncrona con el servidor web). Ahora vamos con el código XD...

Primero debes descargarte el Ajax.Net Luego vamos a crear Un proyecto web al que llamaremos PruebaAjax que contendrá dos Paginas Web y añadimos la referencia a la dll del ajax.

---

Ahora vamos a añadir la información al webconfig necesaria para la interacción entre el navegador y Nuestra aplicación:

<httpHandlers>
	<add verb="POST,GET" path="ajax/*.ashx"
		type="Ajax.PageHandlerFactory, Ajax" />
</httpHandlers>

Ahora es necesario agregar esta linea de codigo en el load de la pagina para usar ajax 

private void void Page_Load(objectsender, System.EventArgs e)
{
	Ajax.Utility.RegisterTypeForAjax(typeof(WebForm2));     
}

y el diseño del formulario, el form es Form1 y los controles :

LoadEmployees,ListEmployees,FirstName,LastName,Title,Country

Para Llenar
FirstName	LastName	Title	Country

Ahora vamos a crear las funciones del lado del servidor que van a devolvernos resultados, todos estos métodos deben de tener antes de su declaración y cuerpo del método, la siguiente instrucción: [Ajax.AjaxMethod()] y ahora viene el cuerpo de los métodos que quedaría así:

[Ajax.AjaxMethod()]
public DataSet ReturnEmployees()
{
	SqlConnection con=new SqlConnection("user id= sa;data source=SQL;initial catalog=Northwind");
	SqlDataAdapter odap=new SqlDataAdapter("Select LastName from Employees",con);
	DataSet odat=new DataSet();
	odap.Fill(odat);
	return odat;
}


[Ajax.AjaxMethod()]
public DataSet ReturnDetails(string LastName)
{
	SqlConnection con=new SqlConnection("user id= sa;data source=SQL;initial catalog=Northwind");
	SqlDataAdapter odap=new SqlDataAdapter("Select * from Employees where LastName='"+LastName+"'",con);
	DataSet odat=new DataSet();
	odap.Fill(odat);
	return odat;
}

Para implementar Ajax.NET en el navegador lo que se necesita es construir dos funciones de java script, una que haga la consulta al lado del servidor y otra que nos ayude a pintar los resultados en el cliente. Por esta razón he construido 4 funciones dos para llenar el combo con los apellidos de los empleados y las otras dos para que cada vez que cambie el apellido en el select se carguen los dato de su Nombre, Apellido, Cargo y Pais. Estas funciones se encargan de la interacción entre el cliente y el servidor.

function ReturnEmployees()
{
	WebForm2.ReturnEmployees(ReturnEmployees_callback);
}
function ReturnEmployees_callback(res)
{
	document.Form1.loadEmployees.disabled=true;
	for( i=0; i res.value.Tables[0].Rows.length; i++)
	{
		var oOption = document.createElement("OPTION");
		document.Form1.listEmployees.options.add(oOption);
		oOption.value = res.value.Tables[0].Rows[i].LastName;
		oOption.innerText = res.value.Tables[0].Rows[i].LastName;
	}
}
function ReturnDetails(EmployeeName)
{
	WebForm2.ReturnDetails(EmployeeName,ReturnDetails_callback);
}
function ReturnDetails_callback(res)
{
		document.Form1.FirstName.value=res.value.Tables[0].Rows[0].FirstName;
		document.Form1.LastName.value=res.value.Tables[0].Rows[0].LastName;
		document.Form1.Title.value=res.value.Tables[0].Rows[0].Title;
		document.Form1.Country.value=res.value.Tables[0].Rows[0].Country;
}

 

Y así termina este pequeño manual espero le sirva, el código completo lo adjunto al articulo y también se encuentra un ejemplo de una suma simple por si no les ha quedado claro, con eso entenderán todo XD.

Hasta pronto ... un saludo para la gente de la Costamar y la URP .

DarkZio

---

Espacios de nombres usados en el código de este artículo:

System.Data.SqlClient

Fichero con el código de ejemplo: darkzio_Ajax.zip - 40 KB

(MD5 checksum: a4cd2b91be206f38bb94c81c1d840e2d)