← Tutti gli articoli

Consuming ASP.NET Web Services using JQuery

14 febbraio 2011  · jQuery · Article  ·  598 visite

In this tutorial I will be using JQuery to consume Asp.Net web services in a javascript function to use in the OnClientClick event.

I have a webservice with a function CountFinanziamentoAttachments that returns an int value:
 
  1. namespace  MyServices   
  2. {   
  3.   
  4.     [WebService(Namespace =  "http://tempuri.org/" )]   
  5.     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]   
  6.     [System.Web.Script.Services.ScriptService]   
  7.      public   class  GetData : System.Web.Services.WebService   
  8.     {   
  9.      public  GetData()   
  10.         {   
  11.   
  12.               
  13.         }   
  14.   
  15.     [WebMethod]  // true if you're using Session   
  16.         [System.Web.Script.Services.ScriptMethod(ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)]   
  17.          public   int  CountFinanziamentoAttachments( int  ID_SpidFinanziamento)   
  18.         {   
  19.             linqContraDataContext linqContra =  new  linqContraDataContext(ConfigurationManager.ConnectionStrings[ "ContraCS" ].ToString());   
  20.             linqContra.CommandTimeout = Convert.ToInt32(ConfigurationManager.AppSettings[ "sqlServerTimeout" ]);   
  21.              int ? numeroAttachments = linqContra.Fun_GetSpidFinanziamentoCountAttachments(ID_SpidFinanziamento);   
  22.   
  23.              int  n;   
  24.              if  (numeroAttachments.HasValue)   
  25.                 n =  ( int )numeroAttachments;   
  26.              else   
  27.                 n=0;   
  28.   
  29.              return  n;   
  30.         }   
  31.   
  32.   
  33.   
  34.           
  35.   
  36.     }   
  37.   
  38. }  
  1. < asp:Content   ID = "contentHead"   ContentPlaceHolderID = "cphHead"   runat = "server" >   
  2.   < script   src = "jquery/jquery-1.4.1.min.js"   type = "text/javascript" > </ script >   
  3.   
  4.      < script   src = "Javascript/json2.js"   type = "text/javascript" > </ script >   
  5.       
  6. </ asp:Content >   
 
I consume this webservice function synchronously (async:false) in the following javascript funtion:
 
  1. function  VerificaNumeroAttach() {   
  2.   
  3.              var  vID_SpidFinanziamento=$get( '<%=hf_ID_SpidFinanziamento.ClientID %>' ).value;   
  4.              var  numero = 0;  ///   
  5.   
  6.   
  7.               
  8.                 $.ajax({   
  9.                     type:  'POST' ,   
  10.                     url:  '<%= ResolveClientUrl("~/Services/GetData.asmx/CountFinanziamentoAttachments") %>' ,   
  11.                     contentType:  'application/json; charset=utf-8' ,   
  12.                     dataType:  'json' ,   
  13.                     data:  "{ID_SpidFinanziamento:"  + vID_SpidFinanziamento +  "}" ,   
  14.                     async: false ,   
  15.                     success:  function (msg) {   
  16.                         numero = getValue(msg);   
  17.                           
  18.                     },   
  19.                     error:  function () {   
  20.                         alert( 'Si è verificato un errore nella verifica dei dati del Capo Missione' );   
  21.                        
  22.                     }   
  23.                 });   
  24.   
  25.               
  26.                
  27.              if  ((numero == 0) || (numero ==  "0" ) ) {   
  28.                 alert( "E' necessario allegare la dichiarazione del Capo Missione" );   
  29.                  return   false ;   
  30.             }   
  31.              else  {   
  32.                  return   true ;   
  33.             }   
  34.                    
  35.   
  36.   
  37.         }  
  1. < asp:Button   ID = "btnSedeApprova"   runat = "server"   Text = "Approva"   OnClientClick = "return VerificaNumeroAttach();"   OnClick = "btnApprova_Click"   />