Cross domain call for WCF service from jquery ajax

A very good read for cross domain call in HTML5. Jquery can be used to make the CORS request. Configuration of both the client and  the server is needed for making the CORS request. Below is a good article on this :-
http://www.html5rocks.com/en/tutorials/cors/#toc-introduction

Below is link to one more blog I came across on this subject.
http://weblogs.asp.net/stevewellens/calling-wcf-services-with-jquery-stripped-down

It can be followed easily for any POC. It basically involves calling a WCF service from jquery ajax.

Below is the code i used for WCF Service :-

The IService1.cs file stripped of the contract attribute, which have been moved to the class file itself.

    public interface IService1
    {

        string GetNames(string p);
        
    }

The Service.cs has been redefined with contract attributes :-

  
[ServiceContract]
    public class Service1 : IService1
    {


        [OperationContract]
        [WebInvoke(Method = "POST",
                   BodyStyle = WebMessageBodyStyle.WrappedRequest,
                   ResponseFormat = WebMessageFormat.Json)]
        public string GetNames(string p)
        {
            Dictionary names = new Dictionary();

            names.Add(1, "Keerthi");
            names.Add(2, "Keeith");
            names.Add(3, "Kay");
            names.Add(4, "Keny");
            names.Add(5, "Ness");
            names.Add(6, "May");
            names.Add(7, "Ferro");
            string json = JsonConvert.SerializeObject(names.Where(x => x.Value.StartsWith(p, true, CultureInfo.CurrentCulture)).ToDictionary(x => x.Key, x => x.Value), Formatting.None);
            return json;

        }
    }

The WCF configuration file looks like below :-

The WCF Service is hosted on port as shown in the url attribute of the ajax function.GetNames is the method name in the wcf service that gets called.
The AspWebAjax.aspx page is as below :-

 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AspWebAjax.aspx.cs" Inherits="TestWebApp.AspWebAjax" %>





    

     
    
    
    
    
    
    


    

    

      


                

                Name:
                
                
                 

                 
                
            

                

                Chosen Value: 
                
                            

                 


                
            

Screenshot of the autocomplete feature achieved :-

Jquery Ajax autocomplete for ASP.NET

In this example I show you can create an autocomplete in  jquery which makes ajax call  to code behind web method.

I use couple of things:

1. JSON.net

2. jquery-ui

3. json.js

Here is the AspAjaxDev.aspx page used :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AspAjaxDev.aspx.cs" Inherits="TestWebApp.AspAjaxDev" %>






    
    
    
    
    
    
    

    



    

    

        


                

                Name:
                
                
                 

                 
                
            

                

                Chosen Value: 
                
                            
 
                 


                
            

The codebehind web method to which calls were made:-

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static string GetNames(string p)
        {
            Dictionary names = new Dictionary();

            names.Add(1, "Keerthi");
            names.Add(2, "Keeith");
            names.Add(3, "Kay");
            names.Add(4, "Keny");
            names.Add(5, "Ness");
            names.Add(6, "May");
            names.Add(7, "Ferro");
            string json = JsonConvert.SerializeObject(names.Where(x => x.Value.StartsWith(p, true, CultureInfo.CurrentCulture)).ToDictionary(x -> x.Key, x -> x.Value), Formatting.None);
            return json;
}