4 steps to consume web services using Ajax (Includes Video tutorial)

Introduction and Goal

In this article we will try to understand the 4 important steps to consume web service directly in Ajax. In this sample we will create a simple customer combo box as shown in the figure below. This customer combo box will be filled by calling the web service methods directly of the customer web service.

Here’s my small gift for all my .NET friends , a complete 400 pages FAQ Ebook which covers various .NET technologies like Azure , WCF , WWF , Silverlight , WPF , SharePoint and lot more
http://www.questpond.com/SampleDotNetInterviewQuestionBook.zip

Video tutorial

This whole article is also demonstrated in video format which you can view from here http://www.youtube.com/watch?v=FvpXZdRTr4Q .
Introduction
Normally consumption of web services happens as shown in the below figure. 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. This article will demonstrate how we can achieve the same.

Step 1 Create your customer class

The first step is to create the customer class as shown below. So our customer class has 4 properties on customer id, first name, address and designation.

public class Customers
{
// private properties
private int _intCustomerID;
private string _strFirstName;
private string _strAddress;
private string _strDesignation;

// Public property and
public int CustomerID
{
get
{
return _intCustomerID;
}
set
{
_intCustomerID = value;
}
}

public string FirstName
{
get
{
return _strFirstName;
}
set
{
_strFirstName = value;
}
}

Step 2:- Create your web service

The next step is we need to create the web service which exposes the customer class to our UI. Below is a simple web service which has encapsulated customer collection. In the constructor we are loading some dummy data in to the list of customer as shown in the below code snippet.[System.Web.Script.Services.ScriptService]

public class Customer : System.Web.Services.WebService {

// Customer collection
List<Customers> listcust = new List<Customers>();
public Customer ()
{
//Load some dummy data in to customer collection.
listcust.Clear();
Customers cust = new Customers();
cust.CustomerID = 1;
cust.FirstName = "Taha";
cust.Address = "Live in India";
cust.Designation = "Software Developer";
listcust.Add(cust);
cust = new Customers();
cust.CustomerID = 2;
cust.FirstName = "Shyam";
cust.Address = "Live in Austrailia";
cust.Designation = "Web Designer";
listcust.Add(cust);
cust = new Customers();
cust.CustomerID = 3;
cust.FirstName = "Khadak";
cust.Address = "Live in London";
cust.Designation = "Architect";
listcust.Add(cust);
}
// This function exposes all customers to the end client’
[WebMethod]
public List<Customers> LoadCustomers()
{
return listcust;
}
// This function helps us to get customer object based in ID
[WebMethod]
public Customers LoadSingleCustomers(int _customerid)
{
return (Customers)listcust[_customerid-1];
}
We are also exposing two functions through the web service one which give out a list of customers and other which gives out individual customer data based in customer id.

Step 3:- Reference your web service using the asp:servicereference

Using the ‘asp:ServiceReference’ we will then point the path to the ASMX file as shown in the below code snippet. This will generate the JavaScript proxy which can be used to call the customer object.

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="Customer.asmx" />
</Services>
</asp:ScriptManager>

Step 4:- Call the webservice and the javascript code

Once you have defined the proxy you can now call the ‘Customer’ proxy directly to make method calls.function LoadAll()
{
Customer.LoadCustomers(LoadCustomerToSelectOption, ErrorHandler, TimeOutHandler);
}
When you call the JavaScript proxy object we need to provide three functions the first function (‘LoadCustomerToSelectOption’) will be called on 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.

function LoadCustomerToSelectOption(Fill)
{
var select = document.getElementById("cmbCustomers");
for (var i = 0; i < Fill.length; i++)
{
var value = new Option(Fill[i].FirstName, Fill[i].CustomerID);
select.options.add(value);
}
}

There are two more functions which are attached one which handles error and the other which handles time out. Below are the code
snippets for the same.function ErrorHandler(result)
{
var msg = result.get_exceptionType() + "\r\n";
msg += result.get_message() + "\r\n";
msg += result.get_stackTrace();
alert(msg);
}
function TimeOutHandler(result)
{
alert("Timeout :" + result);
}

7 simple steps to run your first Azure Queue program

7 simple steps to run your first Azure Queue program

Introduction

Azure queues help to communicate data between web role and worker role. Web roles are nothing but web application which can be accessed by the end browser. Worker roles are back ground processes which run in the azure system and they do not take direct request from the web.
So if we want to pass data to worker roles we need to use Queues. Queues are temporary storage which acts like a bridge between web role and worker role. So you can post data to web role , web role posts data to queues and worker role picks the data from queues to do further processing.
Please feel free to download my free 500 question and answer eBook which covers .NET , ASP.NET , SQL Server , WCF , WPF , WWF , Silver light , Azure @ http://tinyurl.com/4nvp9t .

What will we do in this article?

In this article we will create a simple application which will allow us to enter customer feedbacks. These customer feedback messages will go through a quality check whether the messages have any kind spam keywords. Currently we will only check for “XXX”.



In other words the above web role will submit the feedback message to queues, worker role will pick up the message, does a quality check and if the quality check passes it will add it to the Azure table. In case you are new to how to create an Azure table please read here http://computerauthor.blogspot.com/2010/01/9-simple-steps-to-run-your-first-azure.html

Step 1:- Ensure you have things at place
In case you are a complete fresher to Azure, please ensure you have all the pre-requisite at place. You can read the below article to get the basic prerequisite http://computerauthor.blogspot.com/2010/01/9-simple-steps-to-run-your-first-azure.html
Step 2:- Create a web role and worker project

The next step is to select the cloud service template, add the web role project and create your solution.


Step 3:- Configure service definition and configuration files.
The next step is to define table storage and queue storage location in the service definition and configuration. Just to revise service definition files help your define the configuration name while service configuration actually set the value.
Below is how the service definition file looks like , we need to the account name , shared key , queue storage and table storage end point. We need to define both these definition both for worker role as well as web role.
We are not sure if there is a way to avoid this redudancy. We googled and found that we indeed to define different definition even if the names are same , below is one of the links which talks about the same http://bstineman.spaces.live.com/Blog/cns!61AEA8168D26EA6B!291.entry

<?xml version="1.0" encoding="utf-8"?>
<ServiceDefinition name="QueueStorage" xmlns="http://schemas.microsoft.com/ServiceHosting/2008/10/ServiceDefinition">
<WebRole name="WebRole1" enableNativeCodeExecution="false">
<InputEndpoints>
<!-- Must use port 80 for http and port 443 for https when running in the cloud -->
<InputEndpoint name="HttpIn" protocol="http" port="80" />
</InputEndpoints>
<ConfigurationSettings>
<Setting name="AccountName" />
<Setting name="AccountSharedKey" />
<Setting name="QueueStorageEndpoint" />
<Setting name="TableStorageEndpoint" />
</ConfigurationSettings>
</WebRole>
<WorkerRole name="WorkerRole1" enableNativeCodeExecution="false">
<ConfigurationSettings>
<Setting name="AccountName" />
<Setting name="AccountSharedKey" />
<Setting name="QueueStorageEndpoint" />
<Setting name="TableStorageEndpoint" />
</ConfigurationSettings>
</WorkerRole>
</ServiceDefinition>

Once you have defined the definitions its time to define the configuration values for this definitions.Below is the service
configuration file which has the values for all the 4 definitions defined in the definition file. You can see that the end point for both storage and queues are defined using a URL , in other words these storages are exposed through REST services.
Currently all the 4 configurations point to the local development storage , these values will change when you want to host online on the actual azure platform.

<?xml version="1.0"?>
<ServiceConfiguration serviceName="QueueStorage" xmlns="http://schemas.microsoft.com/ServiceHosting/2008/10/ServiceConfiguration">
<Role name="WebRole1">
<Instances count="1" />
<ConfigurationSettings>
<Setting name="AccountName" value="devstoreaccount1" />
<Setting name="AccountSharedKey"
value="Eby8vdM02xNOcqFlqUwJPLlmEtlCDXJ1OUzFT50uSRZ6IFsuFq2UVErCz4I6tq/K1SZFPTOtr/KBHBeksoGMGw==" />
<Setting name="QueueStorageEndpoint" value="http://127.0.0.1:10001" />
<Setting name="TableStorageEndpoint" value="http://127.0.0.1:10002" />
</ConfigurationSettings>
</Role>
<Role name="WorkerRole1">
<Instances count="1" />
<ConfigurationSettings>
<Setting name="AccountName" value="devstoreaccount1" />
<Setting name="AccountSharedKey"
value="Eby8vdM02xNOcqFlqUwJPLlmEtlCDXJ1OUzFT50uSRZ6IFsuFq2UVErCz4I6tq/K1SZFPTOtr/KBHBeksoGMGw==" />
<Setting name="QueueStorageEndpoint" value="http://127.0.0.1:10001" />
<Setting name="TableStorageEndpoint" value="http://127.0.0.1:10002" />
</ConfigurationSettings>
</Role>
</ServiceConfiguration>

Step 4:- Add CustomerInfo entity class

The next step is to create our entity class which has customer name and message. So below is a simple entity class called as ‘CustomerInfo’ which inherits from ‘TableStorageEntity’. This class has 2 properties ‘CustomerName’ and ‘Message’.

public class CustomerInfo :
Microsoft.Samples.ServiceHosting.StorageClient.TableStorageEntity
{
public CustomerInfo()
{
this.PartitionKey = "CustomerInfos";
this.RowKey = DateTime.Now.Ticks.ToString();
}
public string CustomerName { get; set; }
public string Message { get; set; }
}

Step 5:- Add CustomerInfoDataContext class

We need to create one more class i.e. the data context class. This class is responsible for adding the above defined customer entity class. So the first thing is inherit from the ‘TableStorageDataServiceContext’ class as shown in the below code snippet.

public class CustomerInfoDataContext : TableStorageDataServiceContext
{}

In the same class we creat a initializetable method which will create the table structure define by the ‘CustomerInfo’ class.
Below is the code snippet explanation with comments.

public void InitializeTable()
{
// Get access to the account of table storage end point
StorageAccountInfo accountInfo =StorageAccountInfo.GetAccountInfoFromConfiguration("TableStorageEndpoint",true);

// Create the table using the ‘TableStorage’ class. TableStorage.CreateTablesFromModel(typeof(CustomerInfoDataContext), accountInfo);
}

We also need to expose ‘IQueryable’ interface which exposes ‘CustomerInfo’ class which can be used by Azure system to create
azure table structure.

public IQueryable<CustomerInfo> CustomerInfos
{
get
{
return this.CreateQuery<CustomerInfo>("CustomerInfos");
}
}

We are also exposing a ‘AddCustomer’ method which takes the ‘CustomerInfo’ object , this object is then added to the Azure
table using the ‘AddObject’ method of the ‘TableStorageDataServiceContext’ and finally for committing the same to the table we call the ‘SaveChanges’ method.

public void AddCustomer(CustomerInfo _objCustomer)
{
this.AddObject("CustomerInfos", _objCustomer);
this.SaveChanges();
}

Once we add the customer entity in to the table we would like to display the same , so we have exposed a ‘GetCustomerInfo’
function which is type casted to list and this can be binded to the grid view.

public List<CustomerInfo> GetCustomerInfo()
{

return this.CustomerInfos.ToList();
}

Step 6:- Create web role to add customer messages

The next step is to create a web role project with a ASPX UI page as shown below. You can see that the UI has a gridview source which can be used to display messages and 2 text boxes for customer name
and feedback.


The submit messages button adds messages to the queue while the get old feedback messages displays the messages from the tables.
In order to add the customer and messages to the queue the first step is to get hold of the ‘StorageAccountInfo’ object using the configuration of the queues.

StorageAccountInfo accountQueueInfo = StorageAccountInfo.GetDefaultQueueStorageAccountFromConfiguration();

Use this account queue information to create the storage.

QueueStorage qs = QueueStorage.Create(accountQueueInfo);

Get the customer queue using the Queuestorage class.

MessageQueue queue = qs.GetQueue("customer");

Create the customer queue if it does not exist using the ‘DoesQueueExist’ method.

if (!queue.DoesQueueExist())
queue.CreateQueue();

Create the message object by concatentating both the text boxes and put the same in the queue.
Message msg = new Message(TextBox1.Text+"#"+TextBox3.Text);
queue.PutMessage(msg);We also have a second button on the web role screen to display the data added in the customer table. So below is the code which will help you display data from the azure table.Get hold of the ‘CustomerInfoDataContext’ class.
CustomerInfoDataContext
objCustomerDataContext = new CustomerInfoDataContext();
Use the ‘GetCustomerInfo’ function which was discussed in the previous steps to get a list of ‘CustomerInfo’ object.

List<CustomerInfo> _objCustomer = objCustomerDataContext.GetCustomerInfo();

Finnally bind the customer objects with the gridview.

if (_objCustomer.Count > 0)

{
GridView1.DataSource = _objCustomer;
GridView1.DataBind();
}

Step 7:- Create worker role to read the messages
In step 7 we have seen how the web role inserts data in to the queue. Now the queue is read by the worker role , the message is parsed and searched for ‘xxx’ , if its not found it will add the same to tables. So the first step is get hold of the queue object as shown in the below code snippet.

StorageAccountInfo accountQueueInfo = StorageAccountInfo.GetDefaultQueueStorageAccountFromConfiguration();
QueueStorage qs = QueueStorage.Create(accountQueueInfo);
MessageQueue queue = qs.GetQueue("customer");

In the worker there will be a infinite loop which will keep running and polling for messages using the queue objects which we just obtained from the above step.

while (true)
{
Message msg = queue.GetMessage();
if (msg != null)
{
// Parse XXX data here
}

}
In the while loop we get the message and checkfor ‘XXX” as shown in the below code snippet. If we do not find a ‘XXX’ we add
it to the table as entity using the data context object as shown in the below code snippet.



string message = msg.ContentAsString();
string name = message.Substring(0, message.IndexOf("#"));
string msgUser = message.Substring(message.IndexOf("#") + 1, message.Length - message.IndexOf("#") - 1);
if (!msgUser.Contains("xxx"))
{
CustomerInfo _obj = new CustomerInfo();
CustomerInfoDataContext objCustomerDataContext = new CustomerInfoDataContext();
_obj.CustomerName = name; _obj.Message = msgUser;
objCustomerDataContext.InitializeTable();
objCustomerDataContext.AddCustomer(_obj);
}

queue.DeleteMessage(msg);
Now we are all set to run the program. Just toensure that all the tables are created , right click on the visual studio
project and select ‘Create test storage tables’ as shown below.




Enjoy your hard work. If you now add ‘XXX’ in the feedback message its not added to the table and rejected by the worker role.
If you add a normal message its displayed on the grid view source of the webrole project.







Source code
You can get the source code of the above sample from here.

Simple 5 steps to expose WCF services using REST style

Introduction
Video of this article
Step 1:- Create your WCF service project.
Step 2:- Make changes to the web.config files
Step 3:- Decorate your methods with ‘WebInvoke’ attribute.
Step 4:- Run your program.

Introduction

WCF Rest Services are nothing but simple WCF Services with added functionality
of consuming WCF service in a Restful manner. For instance if you had a order
web service that you built in WCF, instead of consuming them through heavy SOAP
implementation and ASMX, you can use the WCF Rest functionality to consume the
service by using simple HTTP verbs like post and get.
So rather than passing complicated SOAP message to the below link to get a order detail http://localhost/order.svc

We can now use REST style to get order as shown in the below URL
http://localhost/order.svc/GetOrder/100234

In this article we demonstrate the 4 important steps to enable your WCF service as a REST service.

Video of this article

In case you are lazy like me you can download the video of this article in MP4 format from http://tinyurl.com/y8j4jjb .

Step 1:- Create your WCF service project.

The first step is to create your WCF service. So click on new website and select WCF service template.

Step 2:- Make changes to the web.config files

The next step is to make changes in the Web.config files to ensure that its uses the HTTP verbs like post and get. So open the web.config file of your WCF project and change the binding to ‘webHttpBinding’ as shown in the below code snippet.

<endpoint address="" binding="webHttpBinding" contract="IService" behaviorConfiguration="WebBehavior1">

We also need to insert the ‘endpointBehaviors’ tag with ‘webHttp’ tag in the behavior tag as shown in the below code snippet.

<behaviors>
<endpointBehaviors>
<behavior name="WebBehavior1">
<webHttp/>
</behavior>
</endpointBehaviors>
</behaviors>

Step 3:- Decorate your methods with ‘WebInvoke’ attribute.

The next step is to decorate the function / method with ‘WebInvoke’ attribute as shown below. So decorate your function which you want to expose through REST using the ‘WebInvoke’ and specify the HTTP method which this function will accept, currently its ‘GET’.

We have also specified what kind of URI template will be used with the function. Currently we have specified the format as ‘Getdata/{value}’. In other words we can pass data as ‘GetData/1’, GetData/2’ etc.

using System.ServiceModel.Web;
[OperationContract]
[WebInvoke(Method = "GET",ResponseFormat = WebMessageFormat.Xml,
BodyStyle = WebMessageBodyStyle.Bare,
UriTemplate = "GetData/{value}")]
string GetData(string value);

Step 4:- Run your program.

Now run your program with URL as ‘http://localhost/WcfService3/Service.svc/GetData/12’ as shown in the below figure and it will display the data in the XML format as shown in the below figure.

My article links on WIKI

http://en.wikipedia.org/wiki/Inversion_of_control
Ah oohh , aiaya i am on Wiki