Click here to Skip to main content
Click here to Skip to main content
Go to top

Remote scripting XML. Fill Table HTML with DataTable from WebServices using Javascript. C#

, 21 Feb 2005
Rate this:
Please Sign up or sign in to vote.
Calling a WebService and load a XML dataset from it with Javascript. Manipulate XML and fill a HTML Table. Security included by using a local asmx with the function of proxy, and dont reveal the webservice URI in the javascript

Sample screenshot

Introduction

I was using webservices for two years, an will use web services, if we want to do a order form, and just ask for the productId, and use just HTML controls, to make your page weightless, but you want to show the products list and dont want to post back all the page just to show it, send the call Using remote scripting and call your webservices from the client, and mantain the page content, remember, you are using HTML controls with no state, the webservice sends you a XML Dataset in the result an you just have to manipulate it with ActiveX and show it with Javascript.

The page no need to do a postback, the operation is processed behind. Blind to the user, and fast as a "line go-XML comes".

The HTML

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

onclick="doData();"

And a section where we want to display the result, like a Div.

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

The Init Script

we need to put an init() in the load of the html, and the function doData(...) it will be called by clicking the button.

function init() { 
service.useService("proxy.asmx?WSDL","proxy"); 
}

function doData(){ iCallID = service.proxy.callService(myResultsData, "ObtenDatos", "x"); 
}

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

  • Call a function to manage the result
  • call the public function
  • send the values to process, from the 3rd to the necesary values needed.

The ActiveX with javascript

We need to use ActiveX, the XML omes as XMLDocument, the activex can open it and read it, the xml with the dataset is in the RAW property of the result.

var xmlDoc = new ActiveXObject("MSXML2.DomDocument");   
xmlDoc.loadXML(result.raw.xml);   
var items = xmlDoc.getElementsByTagName('ProductName');

The MyResultData javascript function

 

  1. Instantiate a variable with a new ActiveX, to load the XMLxmlDdocument.
  2. Use the function Load or LoadXML with the raw.xml call in the result as parameters.
  3. load with  getElementsByTagName and the ColumnName as parameter
  4. Write in the HTML document

 

function myResultsData(result){ 
if(result.error){ 
 var xfaultcode = result.errorDetail.code; 
 var xfaultstring = result.errorDetail.string; 
 var xfaultsoap = result.errorDetail.raw; 
 document.getElementById("areadetextoid").innerHTML= xfaultcode + " " + xfaultstring + " " + xfaultsoap; 
 } 
 else{
  var xmlDoc = new ActiveXObject("MSXML2.DomDocument"); 
  xmlDoc.loadXML(result.raw.xml); 
  var items = xmlDoc.getElementsByTagName('ProductName'); 
  window.alert('Total de items: '+items.length); 
  for (var i=0;i < items.length;i++) 
  { 
   window.document.getElementById("areadetextoid").innerHTML += xmlDoc.getElementsByTagName('ProductID')(i).text; 
   window.document.getElementById("areadetextoid").innerHTML += '<hr>'; 
   window.document.getElementById("areadetextoname").innerHTML += xmlDoc.getElementsByTagName('ProductName')(i).text; 
   window.document.getElementById("areadetextoname").innerHTML += '<hr>'; 
  } 
 }
}

Sample screenshot

The Local Proxy

The local proxy has the goal of give security to the aplication, we seen in the javascript a URI pointing to localhost, if we dont 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 seciruty by forms level protection in asp.net

The proxy just have an instance of the real web service and a single call of a function.

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);
  }
 }
}
The webservices used in this demo Here

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

Share

About the Author

Marcelo Lujan [El Bebe.Net ]
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

 
GeneralGood Job Marcelo! PinmemberFortino18-Feb-11 11:50 
GeneralArticle needs work... PinsussAnonymous21-Feb-05 9:34 
GeneralRe: Article needs work... PinsussMarcelo Lujan [El Bebe.Net ]21-Feb-05 10:16 
GeneralRe: Article needs work... PinsussAnonymous26-Feb-05 3:03 
GeneralRe: Article needs work... PinsussAnonymous25-Mar-05 11:43 
GeneralRe: Article needs work... PinmemberGuenaVan14-Aug-05 12:40 
GeneralRe: Article needs work... [modified] PinmemberMalcolm Hall21-Oct-06 15:32 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 21 Feb 2005
Article Copyright 2005 by Marcelo Lujan [El Bebe.Net ]
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid