Click here to Skip to main content
15,906,558 members
Articles / Web Development / HTML

Remote Scripting - Calling a WebService with JavaScript and C#

Rate me:
Please Sign up or sign in to vote.
3.85/5 (11 votes)
18 Feb 20052 min read 294.2K   5K   46   18
Calling a WebService with JavaScript. Security included by using a local asmx with the function of proxy, and not revealing the webservice URI in the JavaScript.

Image 1

Introduction

I have been using webservices for the past two years, but whenever I use a function, I have to post back all my pages. Using remote scripting, we can call our webservices from the client, using JavaScript, and there is no need to post back all the page content, just an instruction. We send the line, catch the result and show it. We need not do a post back, the operation is processed behind, blind to the user, and fast as a "line go-line comes".

HTML
<script language="JavaScript">
init(){
 service.useService("http://localhost/CursoAspNetWebService/Service1.asmx?WSDL",_
                                                                     "Service1"); 
}
function tst(){ 
   iCallID = service.Service1.callService("Suma",ip1.value,ip2.value); 
}
function onmyresult(){ 
   service.innerHTML= "Resultado : " + event.result.value; 
} 
</script>
<body onLoad="init();">
  <button onclick="javascript:tst()" ID="Button1">Call Add Web Method</button>
  <div id="service" style="BEHAVIOR:url(webservice.htc)" onresult="onmyresult();">
  </div>
</body>

The source code includes the webservice.htc, the HTML component that is used.

The HTML

We need to create an interface using just HTML controls, because we don't want to send the page to the server. We need just a text, and a button with a function:

HTML
onclick="doSuma(texta.value,textb.value)

and the section where we want to display the result, like a <Div>.

HTML
id="service" style="BEHAVIOR: url(webservice.htc)"

The Init Script

We need to put init() in the load of HTML, and the function doSuma(...) is called by clicking the button:

JavaScript
function init() { 
    service.useService("proxy.asmx?WSDL","proxy"); 
}
function doSuma(y, x){ 
    oSPAN.innerText = y + " + " + x + " = "; 
    iCallID = service.proxy.callService(myResults, "Adicion", y,x); 
}

The iCallID is a var that is unused later, but the result comes with the call from it. We need to fill parameters to:

  1. Call a function to manage the result
  2. Call the public function
  3. Send the values to process, from the 3rd to the necessary values needed

The MyResult JavaScript Function

JavaScript
function myResults(result){ 
    if(result.error){ 
        var xfaultcode = result.errorDetail.code; 
        var xfaultstring = result.errorDetail.string; 
        var xfaultsoap = result.errorDetail.raw; 
        oSPAN.innerText = xfaultcode + " " + xfaultstring + " " + xfaultsoap;
    }
    else{ 
        oSPAN.innerText += result.value; 
    } 
} //the end of function

The Local Proxy

The local proxy has the goal of giving security to the application. We have seen in JavaScript that a URI points to localhost. If we don't use the proxy in localhost, we need to give the full URI of the webservice, and we give other users the door wide open. In this case, we can apply security by forms level protection in ASP.NET.

The proxy just has an instance of the real web service and a single call of a function:

C#
using System;
using System.Web;
using System.Web.Services;

namespace RemoteScriptingDemo1
{
 public class proxy : System.Web.Services.WebService
 {
  public proxy()
  {
   InitializeComponent();
  }

  private IContainer components = null;
    
  private void InitializeComponent()
  {
  }

  protected override void Dispose( bool disposing )
  {
   if(disposing && components != null)
   {
    components.Dispose();
   }
   base.Dispose(disposing);  
  }  

  [WebMethod]
  public decimal Adicion(decimal x, decimal y)
  {
   WSDemo.Service1 ws = new RemoteScriptingDemo1.WSDemo.Service1();
   return ws.suma(x,y);
  }
 }
}

Image 2

License

This article has no explicit license attached to it, but may contain usage terms in the article text or the download files themselves. If in doubt, please contact the author via the discussion board below.

A list of licenses authors might use can be found here.


Written By
Founder Cimar Solutions
Mexico Mexico
Ing. F. Marcelo Lujan alias El Bebe Dot Net. Hola, yo desarrollo de forma independiente en C#. ASP.NET y Win32 Diseño Macromedia etc. con mas de 10 años de experiencia en informática y soporte a sistemas, así como desarrollo de software y nuevos productos.

Espero que ayude la informacion que pongo a su disposicion.
I Hope this information that i upload to codeproject helps you.
Atte: Marcelo Lujan

Comments and Discussions

 
QuestionAuthentication Pin
ricardoperovano28-Feb-14 2:15
ricardoperovano28-Feb-14 2:15 
GeneralMy vote of 5 Pin
Ali Al Omairi(Abu AlHassan)23-Mar-11 4:05
professionalAli Al Omairi(Abu AlHassan)23-Mar-11 4:05 
GeneralVery Thanks!!!! Pin
diargo6-Oct-09 12:14
diargo6-Oct-09 12:14 
QuestionAdd WebService Behaviour dynamically. Pin
madhu cellulo3-Sep-08 21:24
madhu cellulo3-Sep-08 21:24 
QuestionHow about AJAX Pin
semenoff26-Oct-07 2:17
semenoff26-Oct-07 2:17 
Questionhow we call asp.net function/procedure in Javascript. Pin
sariya_jesus@yahoo.co.in19-Jul-06 16:48
sariya_jesus@yahoo.co.in19-Jul-06 16:48 
AnswerRe: how we call asp.net function/procedure in Javascript. Pin
Marcelo Lujan [El Bebe.Net ]20-Jul-06 6:37
Marcelo Lujan [El Bebe.Net ]20-Jul-06 6:37 
NewsA cross browser SOAP client Pin
Matthias Hertel18-Jul-06 5:48
professionalMatthias Hertel18-Jul-06 5:48 
GeneralNot worked in opera Pin
Ayaz Awan21-Jun-06 2:41
Ayaz Awan21-Jun-06 2:41 
GeneralRe: Not worked in opera Pin
avavital6-May-09 3:44
avavital6-May-09 3:44 
GeneralAbout soap call using C# Pin
sumeet.polaris4-Jun-06 18:11
sumeet.polaris4-Jun-06 18:11 
Generaloriginal article at microsoft Pin
User 36577230-May-06 5:21
User 36577230-May-06 5:21 
GeneralRe: original article at microsoft Pin
Marcelo Lujan [El Bebe.Net ]30-May-06 12:48
Marcelo Lujan [El Bebe.Net ]30-May-06 12:48 
Questioncan u change URL Pin
sugandh28-Mar-05 8:11
sugandh28-Mar-05 8:11 
AnswerRe: can u change URL Pin
Ahmed Galal5-Mar-06 5:43
Ahmed Galal5-Mar-06 5:43 
GeneralThis is how Office Web Component works :) Pin
Philippe Graça22-Feb-05 20:07
sussPhilippe Graça22-Feb-05 20:07 
GeneralThis is a cool start Pin
leonleslie19-Feb-05 11:46
leonleslie19-Feb-05 11:46 
GeneralRe: This is a cool start Pin
Marcelo Lujan [El Bebe.Net ]21-Feb-05 6:46
Marcelo Lujan [El Bebe.Net ]21-Feb-05 6:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.