Creating Ajax Enabled WCF Service in asp.net

Categories :- Introduction of WCF service , Advantages and Disadvantages of WCf  Service , Difference betweenWCF service and asp.net service

Introduction :- 

In my previous article i have explain to create restful wcf service api using post step by step .and i have also explained another example for create basic  wcf service step by step in asp.net. In this article, I will explain how to create an AJAX-enabled WCF Service and how to consume it using client-side script in an ASP.NET page. I have kept the example quiet simple so in order to keep our focus on creating and consuming AJAX Enabled WCF Services.

Description :-

AJAX-enabled WCF Service is a service that can be consumed using an AJAX client-side script.
I am using visual stdio 2010 for create a ajax enable wcf service in asp.net.This is very easy for create wcf enable service in asp.net.Follow the step for create a ajax enable web service in asp.net as shown below

Step 1 :-  Open Visual Studio 2010.    Go to File->New->WebSite     Select ASP.NET Empty WebSite

Step 2 : - Go to Solution Explorer and right-click.

    Select Add->New Item ,  Select WebForm ,     Default.aspx page open

Step 3 : -Define WCF Service :
 Go to Solution Explorer and right-click.
    Select Add->New Item ,  Select AJAX Enabled WCF Service ,  Define the Namespace

Step 4 :- Open Default.aspx page and click in [Design option].

 Drag and drop Scriptmanager Control  on the default.aspx web form. Image of form as shown below

Step 6 : -In [design] page right-click in scriptmanager control
Select Properties option
Define Services like this

• 

Click the add option and select Service path like this

you can check this service on click on soure default.aspx design page

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

Step7 : - You have already select AJAX Enabled WCF Service in your app_code folder .
select ajax.cs webservice and double click on code behind and write the following

  [ServiceContract(Namespace = "GreetNM")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class ajax
{
    // To use HTTP GET, add [WebGet] attribute. (Default ResponseFormat is WebMessageFormat.Json)
    // To create an operation that returns XML,
    //     add [WebGet(ResponseFormat=WebMessageFormat.Xml)],
    //     and include the following line in the operation body:
    //         WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
    [OperationContract]
    public void DoWork()
    {
        // Add your operation implementation here
        return;
    }
    [OperationContract]
    public string GetUser(string user)
    {
        return "Hello="+user;
    }
  
}

Here  GetUser is  method called GreetUser(string uname) which takes a username and returns a string with the “Hello” greeting appended to the user name. Decorate the method with the ‘OperationContractAttribute’ to indicate that the method is a part of the contract.

step 8 :-
Now add a Html Button, an HTML Input box and <Div> to the Deafult.aspx page.After renaming the controls and adding the onClick event of the button, the markup will appear similar to the following and image as shown above as step number 6

  <div id="ajax_wcf" title="getuser">
  
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="ajax.svc" />
            </Services>
        </asp:ScriptManager>
    <input type="button" id="ajax_wcf" onclick="return ajx_wcf_call()" value="Submit" />
    <input type="text" id="txtnm" />
    </div>

Java Script code :

Step 7 : Now go to Default.aspx page and select Design option.

    Click in the input Button
    Define Java Script code for the on click event

Code :

<script language="javascript" type="text/javascript">
        function ajx_wcf_call() {
            try {
                var greeto = new GreetNM.ajax();
                greeto.GetUser($get("txtnm").value, OnGeetingComplet, OnError);

            } catch (Error) {
            alert("Error");
        }
        }
  
    function OnGeetingComplet(result)
    {
        $get("txtnm").value = result;
        alert(result);
    }

    function OnError(result) {
        alert(result.get_message());
    }
  
    </script>

Compete code as shown below

  <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
        function ajx_wcf_call() {
            try {
                var greeto = new GreetNM.ajax();
                greeto.GetUser($get("txtnm").value, OnGeetingComplet, OnError);

            } catch (Error) {
            alert("Error");
        }
        }
  
    function OnGeetingComplet(result)
    {
        $get("txtnm").value = result;
        alert(result);
    }

    function OnError(result) {
        alert(result.get_message());
    }
  
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="ajax_wcf" title="getuser">
  
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="ajax.svc" />
            </Services>
        </asp:ScriptManager>
    <input type="button" id="ajax_wcf" onclick="return ajx_wcf_call()" value="Submit" />
    <input type="text" id="txtnm" />
    </div>
    </form>
</body>
</html>

The result as for enter the value in text box and click on button

Download sample code attached