Pues al lío ! Lo primero que tenemos que hacer es importar Jquery en nuestra página:
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
En mi caso tengo el 'jquery-1.5.1.min.js' dentro de la carpeta Scripts y estoy usando MVC 3 con RazorEngine pero si estas usando un webForm puedes hacerlo de la siguiente manera:
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
A continuación llamamos a la función JSON. En mi ejemplo mostraremos un 'alert' con un mensaje que será traido desde el servidor cada vez que se inicializa la página.
Para los que no conocen jquery, eh aquí la explicación:
(function ($) { FunctionJson(); })(jQuery);Llamamos a 'function ($)' que es una función que se ejecuta cada vez que se inicializa la página. En este ejemplo, esta función llama a la función FunctionJson en la cual está la llamada json:
$.ajax({ async: false, url: '/Home/RetornaValores', dataType: 'json', data: { }, type: "POST", cache: false, success: function (data) { if (data.ok) { alert(data.mensaje); } else { alert(data.mensaje); } } });Donde la llamada json tiene los siguientes parámetros:
- async: que indica si la función va a ser asíncrona o no.
- url: donde se indica la url que tiene el webMethod (para un webForm) o el controlador (para MVC).
- data: aqui se establecen los parámetros si la función del webMethod o del controlador tiene parámetros.
- type: se establece el tipo de llamada 'POST' o 'GET'.
- cache: si la función almacenará en caché.
- success: devuelve el resutado de la operación.
En nuestro caso la funcion JSON llama a la función 'RetornaValores' del controller 'Home'
public JsonResult RetornaValores() { try { return Json(new { ok = true, mensaje = "Hola Mundo" }, JsonRequestBehavior.AllowGet); } catch (Exception ex) { return Json(new { ok = false, mensaje = ex.Message }, JsonRequestBehavior.AllowGet); } }La función devuelve un objeto Json en el cual le podemos setear los valores que queramos. Si se fijan tambien podriamos manejar los errores de está manera. El resultado final sería el siguiente:
Esta claro que se puede hacer lo que quiera dentro de la función RetornaValores y devolver lo que se nos de la gana, pero siempre teniendo cuidado del tiempo de respuesta y el peso que se quiere devolver a la parte cliente. Nos vemos !!
Estupendo post, sencillo y claro.
ResponderEliminarSolo me gustaría aportar dando una matización. JSON es una especificación para establecer un interfaz de respuesta. No es el mecanismo de comunicación, que en el ejemplo, es vía una petición ajax.
Gran trabajo.
Muchas gracias por tu comentario y por tu aporte, lo tendré en cuenta =)!
Eliminarhola tienes algún ejemplo viceversa osea desde el c# llamar a una funcion javascript
ResponderEliminarHola, a tu pedido hice este post :D... aunq creo que lo he leido un poco tarde :(
Eliminarhttp://csharprules.blogspot.com.es/2014/03/llamar-una-funcion-js-desde-un.html
Buenos dias, muy bueno tu Post, tenia un problema sobre como funcionaba JSON y me lo has resuelto. Una pregunta, si quisiese por ejemplo devolver un arrayList con matrículas de vehiculos, como tendria que ser el return de la accion y el data. de la funcion jquery para llamarlo ?.
ResponderEliminarMuchas gracias