Lo prometido es deuda, así que, en esta ocasión trataremos la continuación del articulo de “Integración de páginas HTML externas en ASP.NET”En concreto explicaré y haré una pequeño ejemplo con todos los detalles de como hacer peticiones a los métodos de “WebForms” y que estos nos devuelvan algún resultado.


Requisitos

  • Conocimientos sobre AJAX

Caso Práctico

Yo he elegido una de las páginas de la plantilla del articulo anterior y la he modificado un poco. Veamos en la captura.

página asp


En la parte central tenemos una lista con dos botones. Con el botón de “Mostrar Mensaje”, enseñaremos la respuesta que nos devuelve el servidor mediante un simple “Alert(…)”, tras hacer la petición a un método de “WebForms” pasando-le un parámetro. El otro botón hará algo mas complicado, como llenar la lista que aparece debajo de los botones.

Ya se, que para los desarrolladores de Web no es nada difícil de mostrar mensajes  o introducir información en HTML, pero como este caso esta dedicado especialmente al tema de ASP.NET, pues si haremos los ejemplos.


Cuando necesitemos que algún método de “WebForms” sea accesible desde el código HTML, hará falta tener en cuenta que el método:


De paso os dejo los 2 métodos.

[WebMethod()]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static String mostrarMensaje(String sClave)
{
	if (sClave.Equals("TEST"))
		return "SECURITY NULL RULES";
	else
		return null;
}

[WebMethod()]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static String llenarLista() {

	String sFilas = null;

	for (int i = 0; i < 5; i++) {

		sFilas += "<tr> \r" +
				"<td>" + i + "</td> \r" +
				"<td>Security</td> \r" +
				"<td>Null</td> \r" +
				"<td>Rules</td> \r" +
			  "</tr> \n";
	}

	return sFilas;
}

Nota: Si nos fijamos en el método:

public static String mostrarMensaje(String sClave)

Veremos que acepta un parámetro con el nombre “sClave”, por lo tanto en la petición AJAX tendremos que indicar el mismo nombre, tal como aparece en el código de abajo.

data: "{sClave: '" + clave + "'}",

Nota: En la petición tenemos que indicar la URL y el nombre del método que queremos llamar. Entonces, supongamos que el método que queremos llamar se encuentra en el “index.aspx” , pues la URL final se quedaría “index.aspx/mi_metodo”.


También os dejo las dos funciones que hacen las peticiones AJAX.

function mostrarMensaje() {
	var clave = "TEST";

	$.ajax({
		type: "POST",
		url: "index.aspx/mostrarMensaje",
		data: "{sClave: '" + clave + "'}",
		contentType: "application/json; charset=utf-8",
		dataType: "json",
		success:
			function (msg) {
				alert('El servidor responde: ' + msg.d);
			}
	});
}

function llenarLista() {

	$.ajax({
		type: "POST",
		url: "index.aspx/llenarLista",
		data: "{}",
		contentType: "application/json; charset=utf-8",
		dataType: "json",
		success:
			function (msg) {
				$("#MiTabla tbody").html(msg.d);
			}
	});
}

No me voy a poner a explicar los métodos de C#, tampoco los de AJAX, porque supongo que si los lectores si han puesto a leer el articulo, sabrán programar. 🙂


Resultado Final

Y por último os enseño el resultado del ejemplo.

mensaje_asp

lista html


Descargar Proyecto

Enlace: https://mega.co.nz/#!XQ4zBaDL!R_KpOiMeALxAHU0JPy_I1iOVzbgGcE5NdpqTXU2oq1c

Tamaño: 1.6 MB


Despedida

Como verán el ASP.NET es un Framework muy potente, que te ofrece infinidad de formas para desarrollar aplicaciones Web de forma rápida, fácil y eficaz.

Espero que les haya gustado el articulo. Saludos.