C# - WebService felhasználása HTML oldalról

forráskód letöltése
Készítünk egy egyszerű WebService-t, majd megvizsgáljuk, hogy miként tudjuk ezt felhasználni egy ASP.NET-es alkalmazásban, egy HTML oldalról.
Mellékelt példa megnyitása előtt szükséges egy TestService és egy WebClient nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez nyissa meg a mellékelt mappa Tulajdonság ablakát és itt a Webmegosztás lapon engedélyezze a mappa megosztását olvasási és parancsfájlok futtatási jogával.
A megvalósítás két lépésből áll: először készítünk egy egyszerű WebService-t, mely két szám összegének az eredményét adja. Második programban egy ASP.NET-es alkalmazást készítünk, melyben felhasználjuk web oldalunkon ezt a WebService-t.
TestService alkalmazás
WebService alkalmazás elkészítése igen egyszerű, létrehozunk egy függvényt Add néven, melyben a két paraméterként kapott int típusú számot összeadjuk és ennek összegét adjuk visszatérési értékként.
        [WebMethod]
    public int Add(int a, int b)
    {
      return a + b;
    }
WebClient alkalmazás
Ahhoz, hogy fent megfogalmazott feladatunkat meg tudjuk valósítani, szükségünk lesz egy kis segítségre, melyet a Microsoft web oldalán találunk egy WebService.htc állomány formájában. Ezt kell letöltenünk, és az ebben lévő programot felhasználnunk saját alkalmazásunkhoz. Ezt az állományt (aktuálisan) az alábbi web címen találjuk:
http://msdn.microsoft.com/downloads/samples/internet/behaviors/library/webservice/webservice.htc
A letöltött WebService.htc állományt másoljuk át az alkalmazásunk mappájába.
Használatáról további bővebb információ az alábbi web címen olvasható:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/webservice/webservice.asp
Első lépésként váltsunk át a WebForm-unk HTML nézetére, majd helyezzünk el benne egy DIV elemet, melynek stílusában megadunk egy tulajdonságot, melyben felhasználjuk a WebService.htc-t. Ennél a DIV-nél meg kell adnunk egy nem szabvány eseményt is onresult néven. Ennél az eseménynél megadott függvény kerül meghívásra abban az esetben majd, amikor a WebService-ünk szolgáltatja eredményét. Itt most az onAddResult függvényt adjuk meg, melyet hamarosan elkészítünk.
      <div id="service" style="BEHAVIOR: url(webservice.htc)" onresult="onAddResult()"> </div>
Következő lépésként a BODY elemben adjuk meg az onload esemény kezelőjét, melyben az előbb létrehozott DIV elem azonosítóját felhasználva meghívjuk a useService függvényét, melynek első paraméterként megadhatjuk, hogy melyik címen elérhető WebService-t kell használni, míg második paraméterében egy tetszőleges azonosítót, melyet a későbbiekben használunk fel.
<body onload="service.useService('http://localhost/TestService/Service1.asmx?WSDL','AddFunction');" MS_POSITIONING="GridLayout">
A WebForm-ra ezt követően elhelyezzük a szükséges beviteli eszközöket, majd létrehozunk egy nyomógombot, mellyel aktivizáljuk a WebService-t:
<INPUT onclick="ExecuteAdd()" type="button" value="-->">
Most készítsük el a szükséges JavaScript függvényeket.
<SCRIPT language="JavaScript">
      var callID;        
Amikor a felhasználó nyomógombra kattint, akkor kerül meghívásra az ExecuteAdd függvényünk. Itt a DIV elemhez tartozó AddFunction objektumunk callService függvényét hívjuk. Első paraméterébe a WebService-ben lévő meghívandó függvény neve szerepel, azt ezt követő paraméterekben a WebService függvényének paraméter listája kap helyet, mely jelen esetben a két TextBox-ba írt szám lesz.
      function ExecuteAdd()
      {
        callID = service.AddFunction.callService("Add", document.all.TextBox1.value, document.all.TextBox2.value);
      }                  
Amikor a WebService függvénye lefutott, és szolgáltatta eredményét, akkor kerül meghívásra a WebService.htc által az onAddResult függvényünk. Itt kiolvashatjuk, hogy történt-e hiba, és amennyiben nem, úgy felhasználhatjuk a kapott értéket tetszés szerint.
      function onAddResult()
      { 
        if((event.result.error) && (callID==event.result.id)) 
        { 
          document.writeln("<b>ERROR. Method call failed!</b><br>");
          document.writeln("<b>Call ID:</b>" + callID + "<br>");
          document.writeln("<b>Fault Code:</b>" + event.result.errorDetail.code + "<br>");
          document.writeln("<b>Fault String:</b>" + event.result.errorDetail.string + "<br>");
          document.writeln("<b>SOAP Data:</b>" + event.result.errorDetail.raw + "<br>");
        }
        else 
        {
Jelen esetben TextBox3-ba írjuk be a WebService függvény által szolgáltatott eredményt.
          document.all.TextBox3.value= event.result.value;
        }
      }
    </SCRIPT>