EIDEO

Artículos

"AJOX" el AJAX español

Despues de mucho discurrirlo voy ha haceros partífices de un proyecto que llevo utilizando desde hace un tiempo. Todo esta desarrollado para la plataforma .NET y programado en C#.

Viendo el auge del famoso AJAX he desarrollado el mio propio que denomino AJOX (para hacerlo más español) y que funciona de forma muy similar.

La programación se estructura a partir de una dll "ajox.dll" que es la base de todo. En ella esta la clase para el desarrollo de la programación.

Básicamente todo consiste en la llamada a una función desde javascript que es creada dinámicamente por la clase ajox y que existe en el script del servidor. Por medio del metodo Invoke de la clase MethodInfo somos capaces de llamar a la función creada en el código del servidor.

Lo que hago siempre es devolver una cadena "javascript evaluada".

Vamos a ver un poco de práctica y nos dejamos de teoría.

Decir que trabajo con codificación UTF-8 para evitar problemas con Ñ, €, etc (con la iso-8859-15 no va bién). He creado un tipo especial de método que se denomina "MetodoJavascript".

Ejemplo:

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="UTF-8" Trace = "false" Debug="true" ValidateRequest="false" %>
<%@ import Namespace="System"%>
<%@ import Namespace="Ajox"%>

}

[MetodoJavascript]
public string suma(int a, int b)
{
return "document.getElementById(\"resultado\").value="+(a+b).ToString()+";";
}

</script>
<HTML>
<script language="javascript">
function validar()
{
  if(document.getElementById("valor1").value=="" || isNaN(document.getElementById("valor1").value))
  {
   alert("Debe introducir valores numéricos");document.getElementById("valor1").value="";document.getElementById("valor1").focus();return false;
  }
  else if(document.getElementById("valor2").value=="" || isNaN(document.getElementById("valor2").value))
  {
   alert("Debe introducir valores numéricos");document.getElementById("valor2").value="";document.getElementById("valor2").focus();return false;
  }
  else return true;
}
</script>
<BODY>
    <form name="form1" id="form1" method="post" runat="server">
      <asp:TextBox ID="valor1" runat="server" Columns="5" MaxLength="5" />
  +
   <asp:TextBox ID="valor2" runat="server" Columns="5" MaxLength="5" />
  =
   <asp:TextBox ID="resultado" runat="server" Columns="5" MaxLength="5" />
   <asp:Button ID="calcular" runat="server" Text="Calcular" />

    </form>
</BODY>
</HTML>

Ver Ejemplo

Básicamente lo que pasa es que la clase AJOX crea un .js dinámicamente que contiene la función que declaramos como [MetodoJavascript] en el script de servidor. Por XMLRequest mandamos el nombre de dicha función, los parametros y la clase ya se encarga de controlar los tipos y de invocar a la función deseada.

Voy a poner uno de los ejemplos más solicitados en todos los foros: Los combos enlazados:

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="UTF-8" Trace = "false" Debug="true" ValidateRequest="false" %>
<%@ import Namespace="System"%>
<%@ import Namespace="Ajox"%>

}

[MetodoJavascript]
public string rellenaCombo(int a)
{
    StringBuilder cadena = new StringBuilder();

cadena.Append("document.form1.combo2.options.length = 0;");
if(a==1)
{
  cadena.Append("document.form1.combo2.options[0]=new Option('Opción 1_1');");
  cadena.Append("document.form1.combo2.options[0].value=1;");
  cadena.Append("document.form1.combo2.options[1]=new Option('Opción 1_2');");
  cadena.Append("document.form1.combo2.options[1].value=2;");
  cadena.Append("document.form1.combo2.options[2]=new Option('Opción 1_3');");
  cadena.Append("document.form1.combo2.options[2].value=3;");
}
else if(a==2)
{
  cadena.Append("document.form1.combo2.options[0]=new Option('Opción 2_1');");
  cadena.Append("document.form1.combo2.options[1].value=4;");
  cadena.Append("document.form1.combo2.options[1]=new Option('Opción 2_2');");
  cadena.Append("document.form1.combo2.options[1].value=5;");
  cadena.Append("document.form1.combo2.options[2]=new Option('Opción 2_3');");
  cadena.Append("document.form1.combo2.options[2].value=6;");
}
else
{
  cadena.Append("document.form1.combo2.options[0]=new Option('Opción 3_1');");
  cadena.Append("document.form1.combo2.options[0].value=7;");
  cadena.Append("document.form1.combo2.options[1]=new Option('Opción 3_2');");
  cadena.Append("document.form1.combo2.options[1].value=8;");
  cadena.Append("document.form1.combo2.options[2]=new Option('Opción 3_3');");
  cadena.Append("document.form1.combo2.options[2].value=9;");
}
return cadena.ToString();
}

</script>
<HTML>

<BODY>
    <form name="form1" id="form1" method="post" runat="server">
      <asp:DropDownList ID="combo1" runat="server">
        <asp:ListItem value="0">Seleccione una opción</asp:ListItem>
     <asp:ListItem value="1">opcion1</asp:ListItem>
        <asp:ListItem value="2">opcion2</asp:ListItem>
  <asp:ListItem value="3">opcion3</asp:ListItem>
   </asp:DropDownList>
  
<asp:DropDownList ID="combo2" runat="server"></asp:DropDownList>
</form>
</BODY>
</HTML>

Ver ejemplo

Imaginaos lo que se puede hacer si enlazamos a una base de datos.

Si uno se entretiene un poco puede llegar a conseguir cosas como esta:
Ver ejemplo

Si hay alguien interesado en este sistema puede ponerse en contacto conmigo por medio del correo que aparece en la página y le pasaré las librerias y todo lo que necesite.

Aquí teneis la libreria tanto para 1.1 como para 2.0.

Ajox 1.1

Ajox 2.0

Fuente:

Ajox source

Un saludo de Charlos

27/11/2005

Volver a Programación