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

• Download source & demo files - 31 Kb

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>'; 
  } 
 }
}

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