jcamweb's blog

Una buena gui además de validar entradas del usuario debe en la medida asistir también en la elección de las posibles entradas en cada interfaz. Las aplicaciones web por supuesto deben cumplir este requisito y el no permitir en ocasiones una interfaz tan rica ha dado lugar a que se opten por otro tipo de aplicación. Un ejemplo muy recurrente en una aplicación web son los select html con categorías enlazadas, de manera que la elección en uno filtra los valores en otro. Las maneras de resolver han sido bien tener todos los datos cargados en javascript, como en adminemp, o bien construir con lenguaje de servidor los sucesivos códigos select html a partir de la elección del inicial. Una posibilidad más elegante es llamar desde el codigo javascript un web service, éste nos devuelve los valores que necesitamos, tenemos la ventaja de manipulación en lado del servidor pero sin necesidad de reprocesar toda la página. Un ejemplo concreto es el texto con autocompletado de telecentrosgm. Veamoslo en detalle.

Para conseguir esta funcionalidad hemos de poner código tanto en la página .aspx como en la definición del web service. En cuanto a la página es referenciar el web service dentro de una etiqueta <asp:ScriptManager>, esto se hace en las líneas sombreadas.

<%@ Page Title="Localizar Telecentro" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="FindAStoreCS.aspx.cs" Inherits="FindAStoreCS" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <h2>Encuentre un telecentro cercano a ud.</h2>
    <p>
        Entre dirección, localidad, o deje que la función autocompletar le ayude
    </p>

        <form id="form1" runat="server">
    <cc1:ToolkitScriptManager runat="server" ID="ScriptManager1" />

               <asp:Panel ID="Panel1" runat="server" DefaultButton="btnSearch">
                <b>Localización:</b> <asp:TextBox ID="txtSearch" autocomplete="off" Width="55%" runat="server"></asp:TextBox>
                <asp:RequiredFieldValidator ID="reqSearch" ControlToValidate="txtSearch" runat="server" ErrorMessage="[Required]" Display="Dynamic"></asp:RequiredFieldValidator>
                <asp:Button ID="btnSearch" runat="server" Text="Localizar"
                    onclick="btnSearch_Click" /><br />
                <i>Ejemplo: Calle Mayor 1 Lliria</i> o <i>Lliria</i> o <i>Plaza Mayor</i>
            <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" MinimumPrefixLength="1" ServiceMethod="GetCountryInfo" ServicePath="WebService.asmx" TargetControlID="txtSearch"></cc1:AutoCompleteExtender>
            </asp:Panel>
.....
.....

Con ello se crea un proxy javascript para llamar el web service referenciado. A través de este proxy código del lado del cliente usará la funcionalidad del web service. Veamos ahora como se define.

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// 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 WebService : System.Web.Services.WebService {

    public WebService () {

        //Uncomment the following line if using designed components
        //InitializeComponent();
    }

    [WebMethod]
public string[] GetCountryInfo(string prefixText, int count)
{
  if (count == 0) count = 10;

 string sql = "Select * from TLcentros Where Address like @prefixText";
// local sqlserverexpress
 string connect =  @"Data Source=.SQLEXPRESS;AttachDbFilename=|DataDirectory|StreetsLocations.mdf;Integrated Security=True;User Instance=True"
 SqlDataAdapter da = new SqlDataAdapter(sql,connect);
 da.SelectCommand.Parameters.Add("@prefixText", SqlDbType.VarChar, 50).Value = prefixText+ "%";
 DataTable dt = new DataTable();
 da.Fill(dt);
 string[] items = new string[dt.Rows.Count];
 int i = 0;
 foreach (DataRow dr in dt.Rows)
 {
     string tempstr;
     tempstr =System.Convert.ToString(dr["Address"])+ " " + System.Convert.ToString(dr["City"]);
     items.SetValue(tempstr, i);

  i++;
 }
 return items;
}

Con esta sencillez se consiguen interfaces más amigables y permiten valores al usuario únicamente entre su ámbito.

Para más detalles sobre personalización del web service en concreto puedes encontrarlos en AutoComplete del ajaxcontroltoolkit.