Webservice - Json - Aspx - Jquery

Como consumir un WebService en .
Net con JQuery
1. Definicin del pgina eb.

!o primero "ue vamos a #acer es un $royecto eb en C% de un sitio vac&o' al "ue llamaremos WebServices(pp. ) le ingresaremos una pgina llamada Web$age.asp*' un WebService llamado +yWebService.asm* y un Javascript llamado Ne WebService.,s. -n el ./+! vamos a ver tres elementos de tipo input "ue nos servirn de e,emplo para e,ecutar un Web+et#od cada ve0 "ue se e,ecute el evento clic. /ambi1n se le agreg nuestro script para e,ecutar las distintas llamadas (,a* y un script de J"uery por medio del servicio de CND de 2oogle.
?
MarckUp Pagina 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebPage.aspx.cs" Inherits="WebServicesApp.WebPage" %> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Mi primer Web Service</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></scrip <script src="NewWebService.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div> <input type="button" id="LlamadaServicio" value="Llamar al servicio" /> <input type="button" id="ServicioHora" value="Hora por favor" /> <input type="button" id="ServicioEnviarDatos" value="Enviar Objecto" /> </div> </form> </body> </html>
1.1 $ropiedades de los llamados (,a*.

!a funcin (,a* de JQuery recibe un JS3N el cul posee varias propiedades "ue enumeraremos a continuacin.

type: /ipo de llamada "ue se e,ecutara por defecto es 2-/. url: 4uta a la cual se le e,ecutara la llamada. data: Datos "ue se enviaran al servidor' se env&a un string con formato de JS3N. contentType: /ipo de datos "ue van a ser enviara al servidor.
dataType: /ipo de dato "ue se espera recibir desde el servidor . J"uery lo interpreta con los +5+- types "ue el soporta. !os valores vlidos para esta propiedad son los siguientes6 7*ml'#tml'script',son',sop'te*t8 success: 9uncin e,ecutada cuando la llamada (,a* fue satisfactoria. error: 9uncin a ser e,ecutada si la llamada (,a* no fue satisfactoria. async: $ropiedad "ue define si la llamada (,a* es as&ncrona o no' por defecto esta propiedad es verdadera. -stas definiciones sern utili0adas posteriormente y es importante conocer su significado.
2. Crear el WebService.
$ara crear el WebService lo #acemos mediante :isual Studio como se muestra en la siguiente imagen.
!a solucin con el nuevo &tem de tipo WebService ser ver&a como se puede apreciar en la siguiente imagen.
$osteriormente modificando el cdigo generado por el :isual Studio debemos #abilitar la propiedad de ScriptService permiti1ndome recibir llamadas desde el lado del cliente. Cada Web+et#od "ue creemos en nuestra clase WebService debe tener el siguiente atributo en la declaracin del ;Web+et#od< y deber de ser p=blica para ser accesible.
Si se re"uiere mantener datos de Sesin en nuestra funcin del WebService el atributo "ue se debe especificar es ;Web+et#od7-nableSession>true8< de lo contrario no se podr acceder ning=n propiedad u ob,eto en la Sesin. (dicionalmente es necesario agregar el siguiente atributo a la declaracin del ebmet#od ;System.Web.Script.Services.ScriptService< ya "ue si no lo #acemos el m1todo nunca estar disponible desde el lado del cliente. -l resultado debe observarse como el siguiente listado.
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
using using using using using
System; System.Collections.Generic; System.Linq; System.Web; System.Web.Services;
namespace WebServicesApp { [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.Web.Script.Services.ScriptService] public class MyWebService : System.Web.Services.WebService { [WebMethod(EnableSession=true)] public string HolaServicio(string Usuario) { return "Hola Servicio, como estas: "+ Usuario+"?"; } }
3. Llamado va Ajax.
:amos a #acer una llamada desde el botn !lamadaServicio y le enviaremos a nuestro Web+et#od el nombre del usuario. ) este posteriormente lo desplegara con un alert. -n la propiedad url enviamos la ruta de nuestro WebService y posteriormente le ponemos un ?@A y le agregamos el nombre de nuestro Web+et#od. $ara enviar parmetros al servidor se #ace por medio de la argumento BdataB ' cada propiedad data es un parmetro del Web+et#od' como podemos ver Csuario es el nombre del parmetro "ue recibe nuestro Web+et#od.
?
Ajax - Enviando Para !"ro# 1 2 3 4

$('#LlamadaServicio').click(function () { $.ajax({ type: 'POST', url: '/MyWebService.asmx/HolaServicio',
5 6 7 8 9 10 11 12 13 14 15 16 17 18
data: "{'Usuario':'" + "Roy Cruz" + "'}", contentType: 'application/json; utf-8', dataType: 'json', success: function (data) { if (data.d != null) { alert(data.d); } }, error: function (jqXHR, textStatus, errorThrown) { } }); });
Si en data #acen falta parmetros o no se enca,aran con la definicin' entonces el WebService no va a ser recibido por el servidor y nos devolver un error DEE.
3. !nviando un "S#$ desde el Servidor

/ambi1n podemos enviar ob,etos en formato JS3N en nuestros WebServices. ( continuacin se presenta el ob,eto a ser enviado el cual posee distintas propiedades.
?
$%j!"o a &!r Enviado 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

namespace WebServicesApp.MyClasses { public class SendTime { private string _UserName; private string _DateTime; public string Date { get { return _DateTime; } set { _DateTime = value; } } public string UserName { get { return _UserName; } set { _UserName = value; } } public SendTime() { } } }
-l Web+et#od -nviar.ora despu1s de #acer la instancia del ob,eto lo env&a.
Enviar '&$( 1 2 3 4 5 6 7 8
[WebMethod] public WebServicesApp.MyClasses.SendTime EnviarHora() { MyClasses.SendTime sendTime = new MyClasses.SendTime(); sendTime.Date = DateTime.Now.ToString(); sendTime.UserName = "Roy Cruz"; return sendTime; }
-l ob,eto es recibido por el la llamada (,a* en data. /odos los ob,etos "ue son recibidos en los WebSevices se encuentran en data.d.
?
'ava&crip" )!ci%! '&$( 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

$('#ServicioHora').click(function () { $.ajax({ type: 'POST', url: '/MyWebService.asmx/EnviarHora', data: "{}", contentType: 'application/json; utf-8', dataType: 'json', success: function (data) { if (data.d != null) { alert("La hora es: " + data.d.Date + " gracias " + data.d.UserName); } }, error: function (jqXHR, textStatus, errorThrown) { } }); });
3.2 %ecibiendo "S#$ desde "avascript.

Cuando se env&an JS3Ns desde JS se debe de tener en cuenta como se construyen los ob,etos tanto del lado del servidor como del lado del Cliente. !a clase en C% debe de tener un constructor vac&o y todas sus propiedades deben de ser de lectura y escritura de lo contrario el servidor no podr seriali0ar el ob,eto y no podr e,ecutar el Web+et#od.
?
$%j!"o A )!ci%ir 1 2 3 4 5 6 7 8
namespace WebServicesApp.MyClasses { public class RecibeElement { private string _browserName; private string _browserVersion; private string _UserAgent; public string BrowserName {
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
get { return _browserName; } set { _browserName = value; } } public string BrowserVersion { get { return _browserVersion; } set { _browserVersion = value; } } public string UserAgent { get { return _UserAgent; } set { _UserAgent = value; } } public RecibeElement() { } } }
$or el lado de JS todas las propiedades del JS3N deben de llamarse igual "ue las de la Clase en C% y todos sus valores deben de ser los mismos si por casualidad un JS3N "ue enviemos posee una propiedad string donde deber&a de ser integer entonces el WebService no va a coincidir con las propiedades.
?
*!%&!rvic! 1 2 3 4 5
[WebMethod] public string HolaObjeto(MyClasses.RecibeElement newClass) { return "Tipo Clase: "+ newClass.GetType().Name + "\nBrowser: "+newClass.BrowserName; }
$ara convertir el JS3N a string lo #acemos con esta funcin de ,avascript. JS3N.stringify73b,eto8F
?
Enviar $%j!"o '& 1 2 3 4 5 6 7 8 9 10 11 12 13 14

$('#ServicioEnviarDatos').click(function () { var SendObj = { "BrowserName": navigator.appName, "BrowserVersion": navigator.appVersion, "UserAgent": navigator.userAgent } var stringData = JSON.stringify(SendObj); $.ajax({ type: 'POST', url: '/MyWebService.asmx/HolaObjeto', data: "{'newClass':" + stringData + "}", contentType: 'application/json; utf-8', dataType: 'json', success: function (data) { if (data.d != null) { alert(data.d);
15 16 17 18 19 20 21 22 23 24
} }, error: function (jqXHR, textStatus, errorThrown) { } }); });
(d,unto a esta entrada se encuentra la solucin completa para "ue la pueda probar' espero les #aya sido de utilidad.

Webservice - Json - Aspx - Jquery

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Webservice - Json - Aspx - Jquery

Hochgeladen von

Copyright:

Verfügbare Formate

Como consumir un WebService en .

Net con JQuery

1. Definicin del pgina eb.

1.1 $ropiedades de los llamados (,a*.

using using using using using

System; System.Collections.Generic; System.Linq; System.Web; System.Web.Services;

Ajax - Enviando Para !"ro# 1 2 3 4

3. !nviando un "S#$ desde el Servidor

$%j!"o a &!r Enviado 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

-l Web+et#od -nviar.ora despu1s de #acer la instancia del ob,eto lo env&a.

'ava&crip" )!ci%! '&$( 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

3.2 %ecibiendo "S#$ desde "avascript.

Enviar $%j!"o '& 1 2 3 4 5 6 7 8 9 10 11 12 13 14

} }, error: function (jqXHR, textStatus, errorThrown) { } }); });

Das könnte Ihnen auch gefallen