<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>All1 Source technologies &#187; ASP developers</title>
	<atom:link href="http://www.all1sourcetech.com/tag/asp-developers/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.all1sourcetech.com</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Wed, 23 Nov 2011 12:26:21 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=abc</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>4 Steps to Consume Web Services using Ajax</title>
		<link>http://www.all1sourcetech.com/4-steps-consume-web-services-ajax/</link>
		<comments>http://www.all1sourcetech.com/4-steps-consume-web-services-ajax/#comments</comments>
		<pubDate>Thu, 04 Mar 2010 11:20:14 +0000</pubDate>
		<dc:creator>Naggie</dc:creator>
				<category><![CDATA[Microsoft Technology]]></category>
		<category><![CDATA[Purely Technical]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[ASP]]></category>
		<category><![CDATA[ASP developers]]></category>
		<category><![CDATA[ASP framework]]></category>
		<category><![CDATA[ASP.NET]]></category>
		<category><![CDATA[ASP.NET code]]></category>
		<category><![CDATA[customer ID]]></category>

		<guid isPermaLink="false">http://www.all1sourcetech.com/?p=1001</guid>
		<description><![CDATA[Normally the browser Ajax controls calls the ASP.NET code and the ASP.NET code consumes the web service, but there are scenarios where you would like to call the web services directly from the Ajax JavaScript functions rather than calling via the behind code.
Here, you can get the same following 4 steps-
Step 1: Create your Customer [...]]]></description>
			<content:encoded><![CDATA[<p>Normally the <strong>browser Ajax</strong> controls calls the <a href="http://www.all1martpro.com" target="_blank">ASP.NET code</a> and the ASP.NET code consumes the web service, but there are scenarios where you would like to call the web services directly from the Ajax <a href="http://www.all1tunes.com" target="_blank">JavaScript</a> functions rather than calling via the behind code.</p>
<p>Here, you can get the same following 4 steps-</p>
<p><strong>Step 1: <span style="color: #800000;">Create your Customer Class </span></strong></p>
<p>The first step is to create the <a href="http://www.all1press.com" target="_blank">customer</a> class as shown below. So the customer class has 4 properties on customer id, first name, address and designation.</p>
<p><span style="color: #0000ff;"><strong>public </strong></span><strong>class Customers</strong><br />
<strong>{</strong><br />
<strong><span style="color: #99cc00;">// private properties </span></strong><br />
<strong>private int _intCustomerID;</strong><br />
<span style="color: #0000ff;"><strong>private string</strong></span><strong> _strFirstName;</strong><br />
<span style="color: #0000ff;"><strong>private string</strong></span><strong> _strAddress;</strong><br />
<span style="color: #0000ff;"><strong>private string</strong></span><strong> _strDesignation;</strong><br />
<strong><br />
</strong></p>
<p><strong><span style="color: #99cc00;">// Public property and</span> </strong><br />
<span style="color: #0000ff;"><strong>public</strong></span><strong> </strong><span style="color: #0000ff;"><strong>int </strong></span><strong>CustomerID</strong><br />
<strong>{</strong><br />
<span style="color: #0000ff;"><strong>get</strong></span><br />
<strong>{</strong><br />
<span style="color: #0000ff;"><strong>return </strong></span><strong>_intCustomerID;</strong><br />
<strong>}</strong><br />
<span style="color: #0000ff;"><strong>set</strong></span><br />
<strong>{</strong><br />
<strong>_intCustomerID = value;</strong><br />
<strong>}</strong><br />
<strong>}</strong><br />
<span style="color: #0000ff;"><strong>public string </strong></span><strong>FirstName</strong><br />
<strong>{</strong><br />
<span style="color: #0000ff;"><strong>get</strong></span><br />
<strong>{</strong><br />
<span style="color: #0000ff;"><strong>return </strong></span><strong>_strFirstName;</strong><br />
<strong>}</strong><br />
<span style="color: #0000ff;"><strong>set</strong></span><br />
<strong>{</strong><br />
<strong>_strFirstName = value;</strong><br />
<strong>}</strong><br />
<strong>}</strong></p>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">public class Customers</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">{</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">// private properties</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">private int _intCustomerID;</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">private string _strFirstName;</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">private string _strAddress;</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">private string _strDesignation;</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">// Public property and</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">public int CustomerID</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">{</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">get</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">{</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">return _intCustomerID;</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">}</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">set</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">{</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">_intCustomerID = value;</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">}</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">}</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">public string FirstName</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">{</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">get</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">{</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">return _strFirstName;</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">}</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">set</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">{</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">_strFirstName = value;</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">}</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 770px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">}</div>
<p><strong>Step 2: <span style="color: #800000;">Create your Web Service</span></strong></p>
<p>The next step is to create the web service which exposes the customer class to UI. Here is a simple web service which has encapsulated customer collection. In the constructor, we are loading some dummy data into the list of customers as shown in the below code snippet:</p>
<p><strong>   [System.Web.Script.Services.ScriptService]</strong><br />
<strong><span style="color: #0000ff;">public class </span>Customer : System.Web.Services.WebService {</strong></p>
<p><strong><span style="color: #99cc00;">// Customer collection</span></strong><br />
<strong>List&lt;Customers&gt; listcust = <span style="color: #0000ff;">new </span>List&lt;Customers&gt;();</strong><br />
<strong><span style="color: #0000ff;">public </span>Customer () </strong><br />
<strong>{</strong><br />
<strong><span style="color: #99cc00;">//Load some dummy data in to customer collection.</span></strong><br />
<strong>listcust.Clear();</strong></p>
<p><strong>Customers cust = <span style="color: #0000ff;">new </span>Customers();</strong><br />
<strong>cust.CustomerID = 1;</strong><br />
<strong>cust.FirstName = &#8220;Dan&#8221;;</strong><br />
<strong>cust.Address = &#8220;Live in UK&#8221;;</strong><br />
<strong>cust.Designation = &#8220;Software Developer&#8221;;</strong><br />
<strong>listcust.Add(cust);</strong></p>
<p><strong>cust = <span style="color: #0000ff;">new </span>Customers();</strong><br />
<strong>cust.CustomerID = 2;</strong><br />
<strong>cust.FirstName = &#8220;Sheen&#8221;;</strong><br />
<strong>cust.Address = &#8220;Live in Austrailia&#8221;;</strong><br />
<strong>cust.Designation = &#8220;Web Designer&#8221;;</strong><br />
<strong>listcust.Add(cust);</strong></p>
<p><strong>cust = <span style="color: #0000ff;">new </span>Customers();</strong><br />
<strong>cust.CustomerID = 3;</strong><br />
<strong>cust.FirstName = &#8220;Koraine&#8221;;</strong><br />
<strong>cust.Address = &#8220;Live in London&#8221;;</strong><br />
<strong>cust.Designation = &#8220;Architect&#8221;;</strong><br />
<strong>listcust.Add(cust);</strong><br />
<strong>}</strong></p>
<p><strong><span style="color: #99cc00;">// This function exposes all customers to the end client’</span></strong><br />
<strong>[WebMethod]</strong><br />
<strong><span style="color: #0000ff;">public </span>List&lt;Customers&gt; LoadCustomers()</strong><br />
<strong>{</strong><br />
<strong><span style="color: #0000ff;">return </span>listcust;</strong><br />
<strong>}</strong></p>
<p><strong><span style="color: #99cc00;">// This function helps us to get customer object based in ID</span></strong><br />
<strong>[WebMethod]</strong><br />
<strong><span style="color: #0000ff;">public </span>Customers LoadSingleCustomers(<span style="color: #0000ff;">int </span>_customerid)</strong><br />
<strong>{</strong><br />
<strong><span style="color: #0000ff;">return </span>(Customers)listcust[_customerid-1];</strong><br />
<strong>}</strong></p>
<p>Two functions have been exposed with the web service, one which gives out a list of customers and another which gives out individual customer data based on customer id.</p>
<p><strong>Step 3: <span style="color: #800000;">Reference your Web Service using the asp:servicereference</span></strong></p>
<p>Using the ‘<span style="color: #ff0000;">asp:ServiceReference</span>’, the path to the ASMX file will be pointed as shown in the below code snippet. This will generate the <a href="http://www.all1social.com" target="_blank">JavaScript proxy</a> which can be used to call the customer object.</p>
<pre><strong>&lt;asp:ScriptManager <span style="color: #ff0000;">ID</span>="<span style="color: #0000ff;">ScriptManager1</span>" <span style="color: #ff0000;">runat</span>="<span style="color: #0000ff;">server</span>"&gt;</strong></pre>
<pre><strong>    &lt;Services&gt;</strong></pre>
<pre><strong>        &lt;asp:ServiceReference <span style="color: #ff0000;">Path</span>="<span style="color: #0000ff;">Customer.asmx</span>" /&gt;</strong></pre>
<pre><strong>    &lt;/Services&gt;</strong></pre>
<pre><strong>&lt;/asp:ScriptManager&gt;</strong></pre>
<p><strong>Step 4: <span style="color: #800000;">Call the Webservice and the JavaScript Code</span></strong></p>
<p>Once you have defined the proxy, you can now call the ‘Customer’ proxy directly to make method calls.</p>
<p><strong>function LoadAll() </strong><br />
<strong>{</strong><br />
<strong>Customer.LoadCustomers(LoadCustomerToSelectOption, ErrorHandler, TimeOutHandler);</strong><br />
<strong>}</strong></p>
<p>When you call the JavaScript proxy object, then you need to provide three functions; the first function (‘LoadCustomerToSelectOption’) will be called when the web service finishes and returns data. The data will be returned in the fill variable which will then be looped and added to the customer combo box.</p>
<p><strong>function LoadCustomerToSelectOption(Fill)</strong><br />
<strong>{</strong><br />
<strong><span style="color: #0000ff;">var </span>select = document.getElementById(&#8221;<span style="color: #800000;">cmbCustomers</span>&#8220;);</strong><br />
<strong><br />
</strong></p>
<p><strong><span style="color: #0000ff;">for </span>(<span style="color: #0000ff;">var </span>i = 0; i &lt; Fill.length; i++) </strong><br />
<strong>{</strong><br />
<strong><span style="color: #0000ff;">var </span>value = <span style="color: #0000ff;">new </span>Option(Fill[i].FirstName, Fill[i].CustomerID);</strong><br />
<strong>select.options.add(value);</strong><br />
<strong>}</strong><br />
<strong>}</strong></p>
<p>There are two more functions which are attached; one which handles error and the other which handles time out.</p>
<p><strong>function ErrorHandler(result) </strong><br />
<strong>{</strong><br />
<strong><span style="color: #0000ff;">var </span>msg = result.get_exceptionType() + &#8220;<span style="color: #800000;">\r\n</span>&#8220;;</strong><br />
<strong>msg += result.get_message() + &#8220;<span style="color: #800000;">\r\n</span>&#8220;;</strong><br />
<strong>msg += result.get_stackTrace();</strong><br />
<strong>alert(msg);</strong><br />
<strong>}</strong><br />
<strong>function TimeOutHandler(result) </strong><br />
<strong>{</strong><br />
<strong>alert(&#8221;<span style="color: #800000;">Timeout </span>:&#8221; + result);</strong><br />
<strong>}</strong></p>
<p><a href="http://www.all1martpro.com" target="_blank">http://www.all1martpro.com</a><br />
<a href="http://get-a-designer.com/" target="_blank">http://get-a-designer.com</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.all1sourcetech.com/4-steps-consume-web-services-ajax/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

