Multiple File Upload: Ajax Tool Kit. Por fin!!


Subir múltiples archivos al servidor se convirtió en un tiempo un dolor de cabeza para mi, ya que no encontraba un método seguro, fácil y gratis (sobre todo gratis) de realizar esta implementación, siempre terminaba comprando algún servicio que un tercero ofrecía.
Afortunada mente todo esto ha cambiado ya que ajax toolkit para ASP.NET en su ultima actualizacion ha incluido un control llamado "AjaxFileUpload" que nos facilita el trabajo de subir los múltiples archivos al servidor.
Este nuevo control de la familia ToolKit nos ofrece una interfaz amigable y permite arrastar y soltar elementos dentro de este.
En un post anterior (Aquí) hablamos de como incluir Ajax en nuestros proyectos web y de las ventajas que este nos trae.
Algo interesante de este control es que funciona perfectamente tanto con HMTL5 como con HTML4, en HTML5 se mostrara un UploadProgress que indicara el progreso de la subida de los archivos ientras que en HTML4 solo mostrara una imagen indicando espera.


Upload HTML5 - File Upload
Para comenzar con la implementación de este control crearemos un proyecto web en ASP.NET, al cual le agregaremos un webform e incluiremos el Ajax Tool Kit (Recuerden agregar el ScriptManager):


Hemos agregado solo 2 elementos: Un ScripManager y un AjaxFileUpload.

El control tiene varias propiedades importantes:

ThrobberID - El ID de un control que se muestra mientras se carga el archivo. La imagen de throbber se muestra para los navegadores que no soportan la API de archivos HTML5.

ContextKeys - Un diccionario que se puede utilizar para pasar información al servidor cuando un archivo se cargará.

MaximumNumberOfFiles - Esta propiedad permite limitar el número de archivos que un usuario puede agregar a la cola de subida.

AllowedFileTypes - Esta propiedad le permite restringir los tipos de archivos que se pueden cargar. Puede asignar una lista delimitada por comas de extensiones de archivo para esta propiedad.

IsInFileUploadPostBack - Esta propiedad tiene el valor verdadero cuando una página se crea en respuesta a una devolución de datos asincrónica AjaxFileUpload.

OnClientUploadComplete - El nombre de una función de JavaScript ejecutado en el lado del cliente después de que un archivo se ha subido correctamente.

 OnClientUploadError - El nombre de una función de JavaScript ejecutado en el lado del cliente, si la carga del archivo fracasó.

Su evento mas importante (a mi parecer) es el "UploadComplete" que se dispara cada vez que se termina de subir un archivo. Luego de este se dispára el evento JavaScript (si lo definimos).

Para almacenar los archivos en el servidor tendremos que hacer uso de este metodo "UploadComplete" ya que este contiene toda la informacion necesaria de los archivos que se estan cargando:
El metodo se vera mas o menos asi:
   

protected void AjaxFileUpload1_UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
    {
        AjaxFileUpload1.SaveAs(Server.MapPath("ArchivosSubidos/" + e.FileName));
    }

Como ya dije anteriormente este método se ejecutara cada vez que se termine de subir un archivo.
Las propiedades de los archivos se encuentran alamcenadas en la clase "AjaxControlToolkit.AjaxFileUploadEventArg" que se pasa por parámetro en el Evento, así que solo tendras que usar la variable e colocas un punto y tendrás a tu disposicion las propiedades de cada archivo:
e.FileName: Nombre del archivo con su extensión (Archivo.jpg).
e.FileSize: Devuelve un entero indicando el tamaño del archivo en bytes;
e.FileId: Devuelve un String con el id del archivo. Es un GUID.
e.ContentType: Devuelve un String indicando el tipo de archivo.

Aquí les dejo el código fuente con la implementación de estos códigos y algunos mas:
Descargar

Que lo disfruten y no olviden comentar: ;)

"El Conocimiento es un Don Divino que se incrementa a medida que se COMPARTE."





Leer más...

Consejos de usabilidad que intentaré seguir.


 Navegando en internet (asi como cuando uno navega), encontre un articulo muy interesante en la pagina de auxilioblog y como la esencia de internet es comaprtir la informacion lo he copiado sin su permiso para compartirlo con ustedes (todo lo que hago por el blog) exponiendome a que me bloqueen o me demanden. Pero como dice una frase celebre que define este blog:
"El Conocimiento es un Don Divino que se incrementa a medida que se COMPARTE.".

El articulo trata sobre usabilidad y como mejorar nuestra web
Aqui se los dejo:

1.- Las caras captan la atención de los usuarios:

El mapa de eye traking muestra como los usuarios fijan su atención en la cara del bebe
El mapa de eye traking muestra como los usuarios fijan su atención en la cara del bebe
Eye-tracking heat map of a baby looking directly at us, from the UsableWorld study . Eye-Tracking mapa de calor de un bebé que mira directamente a nosotros, desde el estudio UsableWorld.
Cuando el bebé mira hacia el contenido aumentan los usuarios que se fijan el título y el texto
Cuando el bebé mira hacia el contenido aumentan los usuarios que se fijan el título y el texto
Nos fijamos en las caras que aparecen las páginas web pero esas caras también pueden desviar nuestra atención hacia otros puntos. Habrá que aprovechar esto!

2.- La mayoría de los usuarios HACEN SCROLL

Aunque algunos estudios como el Jakob Nielsen (Prioritizing Web usability), hablaban de que tan solo un 23% de los usuarios hacen scroll en su primera visita a un sitio y un porcentaje mucho mejor, 16% lo hace en la segunda, parece que los hábitos están cambiando y que los usuarios se sienten ya cómodos haciendo scroll. La diversidad de pantallas y resoluciones que hace imposible fijar un estandar está contribuyendo a ello.
Lastminute ofrece en su primer pantallazo su nombre, su producto estrella (el buscador) y enlaces a las principales secciones.
Lastminute ofrece en su primer pantallazo su nombre, su producto estrella (el buscador) y enlaces a las principales secciones.
Asi debemos evitar obsesionarnos por el primer pantallazo e intentar meter todo el contenido en esa primera vista. El hacinamiento del contenido no hace si no dificultar la búsqueda de la información.
Es muy recomendable hacer distintas zonas en nuestra web dejando buenos espacios en blanco entre ellas.
Con todo debemos cuidar muy bien ese primer pantallazo (los primeros 768 píxeles) en donde no deben faltar:
  1. Nombre de la página
  2. Propuesta de valor. Que aparezca lo que nosotros ofrecemos y por lo que nos diferenciamos de la competencia. Nuestro punto fuerte
  3. Enlaces a las principales secciones de la web, las más relevantes para el usuario.
Les dejo algunos enlaces a estudios que hablan sobre el tema. Están en inglés:

3.- Los formularios funcionan mejor con el texto por encima del campo

Según un estudio realizado por UX Matters la mejor posición para los campos de un formulario es debajo del texto y no al lado.
Aunque son los más comunes este tipo de formulario no es el ideal
Aunque son los más comunes este tipo de formulario no es el ideal
Así es como habría que hacerlo
Con el texto encima del campo los resultados son mejores
Con el texto encima del campo los resultados son mejores

4.- Un buen diseño aumenta la credibilidad

La mayoría de los usuarios juzgan al libro por las tapas, es decir, una web por su diseño. Hay varios estudios que así lo demuestran:

Stanford-Makovsy Web Credibility Study 2002: Investigating What Makes Web Sites Credible Today
What Makes A Web Site Credible? A Report on a Large Quantitative Study
The Elements of Computer Credibility
Elementos como el diseño, la coherencia, la tipografía, el color y el estilo de cómo afectan a todos los usuarios perciben su sitio web y qué tipo de imagen que proyecto.
Otros factores que influyen en la credibilidad son: la calidad del contenido del sitio web, la cantidad de errores, la tasa de cambios, facilidad de uso y fiabilidad de los autores.

5.- Los enlaces mejor en azul

Cuando se trata de usabilidad lo mejor es hacer lo que hacen los grandes. La razón es sencilla si un usuario entra por primera vez a tu página esperará que se comporte de forma parecida a las páginas que el usa. En este sentido lo mejor es seguir las convenciones. Es lo que se conoce como patrones de uso. La gente espera encontrar ciertas cosas iguales, como el color de los links, el sitio en el que está el logo, el funcionamiento de la navegación por pestañas. (Aquí tengo que aplicarme y cambiar el de mis enlaces, sigo pegándome con Blogspot y estoy convencido que en cuanto saque un poco tiempo lo haré sin problemas).

Lastminute ofrece en su primer pantallazo su nombre, su producto estrella (el buscador) y enlaces a las principales secciones.

Lastminute ofrece en su primer pantallazo su nombre, su producto estrella (el buscador) y enlaces a las principales secciones.
Al dar su sitio web un diseño único, es grande, cuando se trata de la usabilidad, haciendo lo que hacen los demás es la mejor.
Siga las convenciones, porque cuando la gente visita un sitio web nuevo, el primer lugar donde buscar las cosas están en los lugares donde se encontraron en sitios web la mayoría de los otros, sino aprovechar su experiencia para dar sentido a este nuevo contenido.  Esto se conoce como patrones de uso. 
 La gente espera ciertas cosas de la misma, tales como colores de los enlaces, la ubicación del logo de la web, el comportamiento de la navegación por pestañas, etc.
Esta no es una regla fija. Los enlaces, eso sí tiene que diferenciarse del texto y no ser del mismo color que el fondo. Si el fondo es claro el enlace debe ser oscuro y vicebersa. El azul es el más común porque es el que viene por defecto en los navegadores.

Espero que lo disfruten, compartan y comenten. ;)

"El Conocimiento es un Don Divino que se incrementa a medida que se COMPARTE."
Leer más...

Usabilidad, Nuestra mejor aliada!




Hola una vez mas chsarpedianos!!

Cada vez que navego por una página web lo menos que espero es que sea fácil de comprender y ubicarme en lo que necesito, es lo que todos los usuarios quieren y es la base para ganar visitantes y consumidores de nuestra web, ningun usuario quiere pensar mucho para descubrir como funciona nuestra pagina o aplicacion web.
Pero esto es un tema muy complejo, ya que no todos los usuarios piensan y quieren lo mismo y es difícil agradar a todos los públicos. Recuerden esa frase que habla del universo y los usuarios ;).
Es aquí donde entra un tema muy interesante (a mi parecer) y se trata de la Usabilidad, la cual trata de darnos pautas y “consejos” para que nuestras aplicaciones sean de fácil comprensión y entendimiento para los usuarios.

El objetivo de este post no es de profundizar en la usabilidad pero si de compartirles unos libros muy interesantes que he encontrado de usabilidad.
Aquí se los dejo:

Usabilidad web (Recomendado)

Usabilidad (Recomendado)

Tips de usabilidad

247 tips de usabilidad (Ingles)

Vale la pena dedicarles un poco de tiempo para estudiarlos, les aseguro que percepciones de interfaz de usario cambiaran.

Que lo disfruten y no olviden comentar: ;)

"El Conocimiento es un Don Divino que se incrementa a medida que se COMPARTE."
Leer más...

Acceder a archivos y carpetas de la aplicacion en c#



Muchas  veces necesitamos acceder a las distintas carpetas que de nuestra aplicación en tiempo de ejecución, ya sea para saber si existe  un archivo, copiarlo, borrarlo, moverlo, listar lo que tiene cierta carpeta o para lo que sea que queramos hacer esto.

Para acceder a las carpetas de la aplicación necesitaremos el espacio de nombres System.IO :

“El espacio de nombres System.IO contiene tipos que permiten leer y escribir en los archivos y secuencias de datos, así como tipos que proporcionan compatibilidad básica con los archivos y directorios.”.

“Utilice la clase Directory para operaciones típicas como copiar, mover, cambiar de nombre, crear y eliminar directorios. También puede utilizar la clase Directory para obtener y establecer información de DateTime relacionada con la creación, el acceso y la escritura de un directorio.”

Dependiendo de nuestra necesidad podremos usar las clases para hacer lo que queramos con las carpetas y archivos dentro de la aplicación, les presentare varios escenarios y les colocare el código necesario para que funcione la solución:
//Obtener los archivos de una ruta:

// Directory.GetFiles(path,filtro)    
 
string[] v = Directory.GetFiles(Server.MapPath("Archivos"), "*.txt");

El metodo GetFiles recibe algunos parametros como son la ruta de la carpeta y/o un filtro para los archivos y deveuelve un Array con la lista de los archivos contenidos en esta carpeta.

Vale aclarar que este método ignora las subcarpetas.

Para establecer la ruta de una carpeta yo suelo utilizar un método llamado Server.MapPath el cual devuelve la ruta relativa o virtual de la carpeta en el servidor.

El filtro es opcional y utiliza Regex, si solo quieres devolver los archivos con extensión txt utilizas “*.txt”.

Si lo que deseas es manipular los archivos entonces el siguiente método te será de ayuda:
private string[] Archivos(string ruta)
    {
        //Obtengo acceso total a la carpeta

        DirectoryInfo picrut = new DirectoryInfo(ruta);
        //Leo y obtengo acceso a los archivos dentro de la carpeta.

        //FileInfo[] se comporta como un array por medio del cual se pueden manipular los archivos (copiar, mover, eliminar, crear, etc)

        FileInfo[] rgFiles = picrut.GetFiles("*.txt");


        //Inicializao un array dandole como tamaño el total de los archivos

        string[] v = new string[rgFiles.Length];


        //Recorro el FileInfo para llenar el array con el nombre de los archivos

        for (int i = 0; i < rgFiles.Length; i++)
        {
            //Aqui puedo manipular los archivos


           // rgFiles[i].Delete(); Para eliminar los archivos
           // rgFiles[i].CopyTo("ruta"); Para copiar el archivo a una ruta especifica
           // rgFiles[i].MoveTo("ruta"); Para mover el archivo a otro lugar
     
            //guardo el nombre de cada archivo en el array
            v[i] = rgFiles[i].Name;
        }

        return v;

    }


Hay muchos métodos mas para manipulación de archivos, pero los iremos viendo mas adelante:

Les dejo un pequeño ejemplo para la descarga aquí.

Espero que lo disfruten y comenten. ;)

"El Conocimiento es un Don Divino que se incrementa a medida que se COMPARTE."
Leer más...

JQuery ++

Licenciado como un proyecto open source, jQuery++ trata de complementar lo ofrecido por el propio jQuery.

En este sentido jQuery++ nos permite disponer de scripts que nos ayudan a que funciones de jQuery lo hagan donde normalmente no lo hacen.

Este proyecto incluye varios complementos que podemos elegir a la hora de descargar. De los scripts ofrecidos por jQuery++ destacamos por ejemplo, jQuery.animate que nos permite hacer que funcionen las animaciones CSS en navegadores que no las soportan.

Esta nueva herramienta de código abierto y todavía en fase de desarrollo beta, permite además seleccionar los módulos que nos interesan, evitando que aumente el peso del framework con funciones que en muchos casos no necesitamos que se lleven a cabo.

Interesados en más información y descarga de jQuery++ pueden acceder a más información y descarga de la última versión desde jquerypp.com.

Espero que lo disfruten y comenten. ;)

"El Conocimiento es un Don Divino que se incrementa a medida que se COMPARTE."
Leer más...

Manual buenas practicas de programacion en c#


 En esta oportunidad les traigo un libro que considero bueniiiisimooo, se llama "Estándares de Codificación en C# y Buenas Prácticas de Programación" este libro es propiedad de canaldenegocio.com y no permiten su distribucion, que lastima cierto? ;), pero como en internet la informacion es libre y de acceso a todos entonces por arte de magia aqui lo tenemos y lo compartimos con todos nuestros lectores.
El libro trata de buenas practicas de programacion en c sharp, es muy interesante y estudiarlo vale la pena, ya que nos ayudara a mejorar el rendimiento de nuestras aplicaciones y tener una mejor codificacion en nustras clases, metodos y todas las locuras que usamos para programar.
Este es el contenido del libro:


Contenido
Introducción. ....................................................................................................................................... 4
2. Convenciones y Estándares de Nombres .................................................................................... 5
3. Sangría y Espaciamiento ............................................................................................................ 10
4. Buenas prácticas de programación ........................................................................................... 14
5. Arquitectura .............................................................................................................................. 25
Acceso a Datos ¿Code handle, dataset tipados, Entity…? ........................................................ 30
6. UI (ergonomía de interface de usuario) .................................................................................... 37
7. ASP.NET ..................................................................................................................................... 38
¿Qué CDN me conviene utilizar? ............................................................................................... 39
¿MVC o no MVC? .......................................................................................................................... 40
8. Smartphones ............................................................................................................................. 44
9. Comentarios .............................................................................................................................. 45
10. Manejo de Excepciones ......................................................................................................... 46

Descargar aqui :)

Espero que lo disfruten, aprendan y comenten. ;)

Leer más...

Capitalizar una frase en C# – Dejar la primer letra en Mayúscula


Convertir a mayuscula palabras en c#
Hola chsarpedianos, este truco que les traigo es muy sencillo y se trata de convertir en mayuscula la primera letra de cada palabra en una cadena.
Existe un metodo llamado TextInfo.ToTitleCase que pertenece a la clase CultureInfo y se puede usar con las diferentes culturas, esta clase se accede desde el espacio de nombres System.Globalization, este nos permite convertir la primera letra de cada palabra en mayuscula.


String textoACambiar = "la primera letra de cada palabra va en mayúscula";
String resultado = CultureInfo.InvariantCulture.TextInfo.ToTitleCase(textoACambiar);
String resultado2 = new CultureInfo("en-US", false).TextInfo.ToTitleCase(textoACambiar);

El resultado es:

La Primera Letra De Cada Palabra Va En Mayúscula

La Primera Letra De Cada Palabra Va En Mayúscula


Existen otros metodos que hacen algo similar los cuales son toLower y toUpper para la clase String, pero estos métodos convierten toda la frase a minúscula y mayúscula respectivamente.

Es muy Sencillo, algo para tener en cuenta es que una frase con todas las letras en mayúsculas, no se va a convertir a tipo título, antes de eso hay que convertirlo a minúscula (toLower) y luego ToTitleCase.

Espero que lo disfruten y comenten. ;)
Leer más...

AJAX, El complemento perfecto. Parte 3


Hola csharpedianos, les voy a compartir la ultima parte de de esta serie de posts hacerca de AJAX, y a decir verdad esta forma de utilizar AJAX es mi favorita, porque se hace con JQUERY, es super rapido, funcional y adaptable.
Cuando utlilizamos ScriptManager, al compilar la pagina, se inserta una cantidad de JavaScript que la hacen un poco mas pesada, afortunadamente con jquery esto no pasa.

JQuery trae incorporado un "módulo" de AJAX, que hace muy facil la utilización de este. Accedemos a la funcion de la siguiente manera:

$(document).ready(function(){
        $.ajax({
        });
})

Parámetros

JQuery admite un gran numero de parámetros para ajax. (Hay ejemplos de código despues de la tabla):
Esto lo he tomado de Cristalab ya que esta muy bien explicado y se me hacer mas facil y rapido. ;)

Parámetro Explicacion Valores
async Determina que la cargada del objeto ajax se síncrona o asíncrona. Por lo general asíncrona es más útil, ya que la forma síncroa puede trabar el navegador hasta que la carga este completa Boolean: true por defecto
beforeSend Permite llamar una función antes de mandar el objeto ajax. Función: El unico parametro el el objeto.
complete Es una funcion que se ejecuta cuando el llamado al ajax esta completo. Permite saber si fue existoso Funcion: Los valores que retorna son el objeto XMLHttpRequest y un string que indica el resultado.
contentType Se usa cuando se mandan datos a los servidores a modo de encabezado. String: "application/x-www-form-urlencoded" funciona perfectamente
data Se usa para especificar datos a mandar. Estos tienen la siguiente forma: foo=bar&foo2=bar2;. Si los datos a enviar son un vector(array) jQuery los convierte a varios valores con un mismo nombre (si foo["alt1","alt2"], foo="alt1"&foo="alt2";) Array / String con la forma antes mencionada.
dataType Indica el tipo de datos que se van a llamar. Si no se especifica jQuery automaticamente encontrará el tipo basado en el header del archivo llamado (pero toma mas tiempo en cargar, asi que especificalo u_u)
  • "xml": Devuelve un documento XML.
  • "html": Devuelve HTML con texto plano, y respeta las etiquetas.
  • "script": Evalua el JavaScript y devuelve texto plano.
  • "json": Evalua la respuesta JSON y devuelve un objeto Javascript
error Se ejecuta si ocurre un error al llamar el archivo. Devuelve 3 parametros: El objeto, un string con el error, y un objeto adicional de error, si este ocurre.
global Permite hacer que el objeto ajax obedezca o desobedezca las reglas para objetos ajax que el usuario pone. Boolean: Por defecto true
ifModified Permite que el objeto ajax se active solo si la pagina a cargar se ha modificado. Boolean: Por defecto false
processData Por defecto, cada objeto que no sea un string y sea pasado de otro documento, sera transformado en cadena. Para evitar que esto pase, este parametro se puede poner en false Boolean: Por defecto true.
success Permite ejecutar código al ser exitoso un llamado. Función: Recibe los datos que fueron llamados
timeout Permite definir un tiempo de espera antes de ejecutar un objeto ajax. Núemro: Un número de milisegundos (ms)
type Indica el método que se va a usar "GET" o "POST"
url Indica la url de la que va a cargar datos el objeto ajax. String: La url local del documento.

Ejemplos

El codigo que necesitamos para hacer funcionar AJAX es el siguiente:

$.ajax({
      type: "GET",
      url: "prueba.js",
      dataType: "script"
      async:false;
}); 
 
En el codigo anterior estamos diciendo que el typo de peticion es GET, la url donde se ejecutara el codigo es prueba.js (Quiere decir que es un archivo local), el tipo de dato es script y que no es asincrono (osea que el usuario no podra interactuar con la pagina hasta que se termine la peticion de AJAX).

Para llamar a un metodo en una pagina ASPX, tendremos que declararlo como habialos indicado en la parte 2 de este posts, en el CodeBehind iria algo parecido a esto:

public partial class _Default : Page 
{ 
    [WebMethod]
    public static string HelloWorld()
    {
        return "Hello: " + DateTime.Now.Millisecond;
    }
}

y desde AJAX se llamaria asi:

          $.ajax({
                type: "POST",
                url: "Pagina.aspx/HelloWorld",
                data: "{}",
                contentType: "application/json",
                dataType: "json",
                success: function (msg) {
                   
                    $("#Resultado").text(msg.d);
                }
            });

En url indicamos la pagina en la cual haremos el llamado seguido por / y el nombre del metodo, en data pasaremos los parametros (en caso de que los necesitemos) que recogeremos en el metodo y en success declararemos una funcion que recibira un parametro el cual es el return del metodo en el servidor.


Aqui les dejo el codigo fuente

Les dejare la documentacion oficial de AJAX en JQuery:
Pagina oficial AJAX - JQuery

Les dejo tambien una presentacion en Power point que explica muy bien y da buenos ejemplos de AJAX y JQUERY:
Descargar


Un libro de AJAX en español, muy bueno:
Descargar

AJAX Y JQUERY es un mundo en el cual podremos pasarnos horas y escribir miles de posts hacerca de esto, asi que poco a poco iremos descubriendo mas cosas interesantes hacerca de esta tecnologia.

Que lo disfruten y no olviden comentar. ;)



Leer más...

De Navegación & Música Ligera

Mi nombre es Alejandro Corena, columnista invitado, DISEÑADOR WEB por que me parieron así............y es así de inevitable el amor que siento por mi profesión punto aparte (Que romántico!).

Antes de seguirlos confundiendo, quiero regalarles un libro que la verdad me lo estoy leyendo con mucho esfuerzo ya saben, eso del Inglés, pero de seguro ustedes le pueden sacar un gran provecho, se tratada de

Los Seis Circulos, el cual aborda la temática de la experiencia de usuario, es bastante bueno y fácil de leer,
de seguro que lo disfrutarás mas en tu  tablet o en tu dispositivo Mobil.



Los Seis Círculos - UX (Experiencia de Usuario-Diseño Web)
Leer más...

AJAX, El complemento perfecto. Parte 2


En esta segunda parte de AJAX, El complemento perfecto, les mostrare como trabajar AJAX desde javascript, haciendo uso de los pagemethods.
Esto permite llamar metodos que se encuentren en el servidor desde javascript sin refrescar la pagina, asi lograremos trabajar asincronamente y daremos mucha mas funcionalidad a nuestra aplicacion.
El proceso es muy sencillo y puedes modificarlo de acuerdo a tus necesidades.
Para que esto sea posible necesitaremos un ScriptManager en la pagina con la propiedad:
EnablePageMethods en True.

<asp:ScriptManager ID="ScriptManager1" 
    EnablePageMethods="true" 
    EnablePartialRendering="true" runat="server" />

Ahora el siguiente paso sera agregar el codigo JavaScript haciendo el llamado a la funcion que tenemos en el servidor, y esto se hace llamando el metodo como si estuviera localmente pero anteponiendole PageMethods, y para obtener el valor devuelto por la funcion en el servidor, agregaremos un parametro al metodo pero solo en el javascript. Este parametro sera el nombre de una funcion javascript que recibira un parametro y el valor de ese parametro sea el valor devuelto por el servidor.
El codigo quedaria asi:

<script>
     function test() {
            PageMethods.MiMetodo("Jairo Ortiz",fncorrecto);
        }

        function fncorrecto(status) {
            alert(status);
        }
</script>

Aqui estamos llamando al metodo "MiMetodo" que esta en el servidor y le anteponemos la palabra PageMethods seguida de un punto. Esto se hace con el fin de decirle a ajax que ese metodo se encuentra en el servidor y que lo llame.
Ademas le decimos que el valor retornado se procesara en la funcion fncorrecto.
La funcion fncorrecto recibe un parametro el cual es el return de la funcion en el servidor, este parametro es invisble en MiMetodo.

Acontinuacion vamos a crear la funcion en el servidor, la cual tendra que ser Public Static y tendra arriba el  atributo  [WebMethod]. para esto tendras que agregar el espacio de nombres:
using System.Web.Services
Y el codigo del lado del servidor quedaria asi:

[WebMethod]
public static string MiMetodo(string nombre)
{
    return "Hola " + nombre;
}  

La funcion test podremos llamarla desde cualquier parte de nuestra pagina como por ejemplo en un elemento <a>:

<a href="#" onclick="test();">Aqui se devuelve el nombre</a> 

Aqui les dejo la aplicacion de ejemplo:

Ajax - WebMethods

Quedo atento a sus comentarios. :)
Leer más...
Google