EnglishEl poder de AJAX es la capacidad de hacer una llamada al servidor web y actualizar solo una porción de la pagina utilizando JavaScript.
Además de llamar código en la pagina misma, como ocurre cuando se utiliza el UpdatePanel, también podemos llamar un servicio web con ASP.NET AJAX.
Es esta entrada, vamos a construir una pequeña pagina que llama a un servicio web utilizando JavaScript.
Supongamos que somos una cadena de restaurantes y queremos que nuestros clientes puedan encontrar una locación cerca de ellos.
Abre Visual Studio o Visual Web Developer Express y crea una nueva aplicación web. Utilizare C# para este ejemplo. Yo nombre mi proyecto LocationSample.
Primero, vamos a crear una clase para representar una locación. Agrega una nueva clase al proyecto. Nómbrala Location.cs.
Agrega las siguientes propiedades a la clase.
public class Location
{
public String Name { get; set; }
public String StreetAddress { get; set; }
public String City { get; set; }
public String State { get; set; }
public String Zip { get; set; }
public String Phone { get; set; }
public String Distance { get; set; }
}
Siguiente, vamos a agregar un servicio web al proyecto. Nómbralo LocationService.asmx.
El nuevo servicio web tendrá un método web llamado HelloWorld (Hola Mundo) por default. Lo reemplazaremos con nuestro propio método web mas adelante. Pero primero, observa la definición del servicio web.
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
// [System.Web.Script.Services.ScriptService]
public class LocationService : System.Web.Services.WebService
En los comentarios puedes ver que si queremos hacer nuestro servicio web disponible a través de AJAX, solo necesitamos “des comentar†una lÃnea. Vamos a des comentar la lÃnea.
[System.Web.Script.Services.ScriptService]
public class LocationService : System.Web.Services.WebService
El atributo ScriptService le dice a ASP.NET que queremos poder llamar el servicio web desde scripts clientes, en este caso, desde JavaScript.
Ahora vamos a reemplazar HelloWorld con nuestro método web. Lo llamaremos FindLocations. Tendrá un solo parámetro para el código postal y retornara un arreglo de locaciones. En un escenario real, probablemente definirÃamos mas métodos web con diferentes parámetros, como ciudad y estado.
[System.Web.Script.Services.ScriptService]
public class LocationService : System.Web.Services.WebService
{
[WebMethod]
public Location[] FindLocations(String zipCode)
{
List<Location> locations = new List<Location>();
if (zipCode == "92805")
{
Location loc = new Location();
loc.Name = "Store #1";
loc.StreetAddress = "275 S Harbor Blvd";
loc.City = "Anaheim";
loc.State = "CA";
loc.Zip = "92805";
loc.Phone = "(714) 555-5555";
loc.Distance = "0.2 miles";
locations.Add(loc);
loc = new Location();
loc.Name = "Store #2";
loc.StreetAddress = "1189 S State College Blvd";
loc.City = "Anaheim";
loc.State = "CA";
loc.Zip = "92806";
loc.Phone = "(714) 555-1234";
loc.Distance = "1.6 miles";
locations.Add(loc);
}
return locations.ToArray();
}
}
Para mantener el ejemplo corto, mi código solo tiene dos locaciones cerca de un código postal. En una aplicación real, probablemente consultarÃamos una base de datos para encontrar las locaciones.
Por ultimo, construyamos la pagina web que llamara al servicio web. Abre la pagina Default.aspx y cámbiala como se muestra a continuación.
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="LocationsSample._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/LocationService.asmx" />
</Services>
</asp:ScriptManager>
<script type="text/javascript">
function Find() {
var zip = $get("<%= txtZipCode.ClientID %>").value;
LocationsSample.LocationService.FindLocations(zip, onSuccess, onFailed);
}
function onSuccess(results) {
if (results.length > 0) {
var table = "<table border=\"1\" cellspacing=\"0\" cellpadding=\"10\">";
for (var i in results) {
table += "<tr>";
table += "<td>";
table += "<b>" + results[i].Name + "</b><br/>";
table += results[i].StreetAddress + "<br/>";
table += results[i].City + ", " + results[i].State + " " + results[i].Zip + "<br/>";
table += results[i].Phone;
table += "</td>";
table += "<td>" + results[i].Distance + "</td>";
table += "</tr>";
}
table += "</table>";
$get("locationList").innerHTML = table;
}
else {
$get("locationList").innerHTML = "<b>No locations found.</b>";
}
}
function onFailed(error) {
$get("locationList").innerHTML = "<b>There was a problem communicating with the server.</b>";
}
</script>
<h2>
Welcome to Oscar's Restaurants Family
</h2>
<p>
Find a location near you.
</p>
<div>
<span>Enter Zip Code: </span>
<asp:TextBox ID="txtZipCode" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Find" OnClientClick="Find(); return false;" />
</div>
<div id="locationList" style="margin-top: 10px; float: left;"></div>
</asp:Content>
Primero añadimos un control ScriptManager para habilitar AJAX en nuestra pagina. Dentro del script manager, también definimos una sección Services, donde referenciamos nuestro servicio web. Esto se encargara de crear todas las funciones JavaScript necesarias para invocar el servicio web.
Después definimos nuestras funciones que se encargaran de llamar el servicio web y actualizar una parte de la pagina.
La función Find obtendrá el código postal de una caja de texto llamada txtZipCode utilizando la función $get. Pasamos el código postal al método web.
Para llamar el servicio web utilizamos una función que tiene el mismo nombre que el método web: FindLocations. Esta función es creada automáticamente gracias al ScriptManager.
Nuestro método web solo acepta un parámetro, pero pasamos dos parámetros extras cuando lo llamamos desde JavaScript. El primer parámetro corresponde al parámetro definido en el método web. El segundo parámetro es el nombre de una función que será llamada después de que el método web es llamado exitosamente, mientras que el tercer parámetro es el nombre de la función que será llamada si ocurre un error al invocar el servicio web.
La función onSuccess acepta los resultados del método web, en este caso, un arreglo de locaciones. Usamos este arreglo para construir un tabla dentro de un div llamado locationList. Si el arreglo esta vacÃo, mostramos un mensaje dentro del div.
La función onFailed solo le informa la usuario que hubo un problema. El parámetro error contiene información acerca del problema, en caso que sea necesario depurar el código.
Después del código JavaScript, definimos el control TextBox para el código postal y un control Button que invocara la función Find al ser presionado. Después de llamar la función retornamos false para prevenir un postback.
Al final, definimos un div vacÃo llamado locationList, el cual contendrá la tabla que construimos dinámicamente.
Ahora si, ejecuta la aplicación. Escribe el código postal 92805 y presiona Find.
Podrás observar como la tabla aparece sin refrescar toda la pagina.
Por favor deja tus comentarios si tienes alguna pregunta o sugerencia.