Saqib Ullah

BootStrapper Know How

  Home  |   Contact  |   Syndication    |   Login
  109 Posts | 1 Stories | 820 Comments | 15 Trackbacks

News



Article Categories

Archives

Post Categories

Blogging websites

Favourite Blogs

Private Links

Sites

One of the greatest features of WCF 3.5 is direct accessibility of WCF Service on ASP.Net page. Before that there is no direct way to call WCF 3.0 Service on ASP.Net page and you have to create a communication bridge in the form of Web service. Here you find on my blogs how to call AJAX-Enable WCF service from ASP.Net page.

Here is my interface called IoperationService and its implementation class OperationService.

   namespace AJAXEnableServices
   {         

            [ServiceContract(Namespace = "AJAXServices")]

            public interface IOperationService
            {
                 [OperationContract]              
           
     long Add(long x,int y);
            }

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class OperationService : IOperationService
            {
                        public long Add(long x,int y)
                        {
                                    return x + y;
                        }
             }
  }

Save the preceding code in "AJAXEnableService.cs" file.

The AspNetCompatibilityRequirements attribute apply on the WCF service to make it ASP.Net Compatible code. At runtime, application can detect if ASP.Net compatibility mode is enabled by checking the value of the static property AspNetCompatibilityEnabled. By default AspNetCompatibilityRequirements RequirementsMode is set on NotAllowed.

Create a file with .svc extension and add the following line of code that allow the WCF Service to call on HTTP.

<%@ServiceHost language=c# Debug="true" Service="AJAXEnableServices.OperationService" %>

Save it OperationService.svc.           

Now it a time to call our WCF service from client side, so we need to an Default.aspx page.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>WCF Service Test Page.</title>
<script language="javascript" type="text/javascript">

            function callService()
            {

                   var n1 = document.getElementById("num1").value;

                   var n2 = document.getElementById("num2").value;

                   var service = new AJAXEnableServices.OperationService();

                   service.Add(parseFloat(n1), parseFloat(n2), onSuccess, null, null);

             }

            function onSuccess(result)
            {

                   document.getElementById("result").value = result;
            }

</script>
</head>

<body>

    <form id="form1" runat="server">
    <div>
    <h1>
        AJAX-Enable WCF Service Client Page</h1>
    <p>
        First Number:
        <input type="text" id="num1" /></p>
    <p>
        Second Number:
        <input type="text" id="num2" /></p>   
    </div>
   <div>Result:
        <input type="text" id="result" /></p>
</div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <services>
            <asp:servicereference Path="OperationService.svc" />
        </services>
    </asp:ScriptManager>
    </form>
    <p>
        <input id="Button1" type="button" value="Price for 3 Sandwiches" onclick="return callService()" />
</p>
</body>
</html>

In the end call the Default.aspx page.

  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati
posted on Thursday, May 29, 2008 8:21 PM

Feedback

# re: Create AJAX-Enable WCF Service 6/11/2008 12:14 AM Gulam Ali Ansari
hi,
It is nice but it doesn't solve my problem. Because in your case the Web Service/ WCF is included in the same project. But my problem is that i want to consume thisrd party WCF/Web Service or self made WCF/webservice which is not in same project.

So if you can help regarding this then please do.

Thank You

# re: Create AJAX-Enable WCF Service 7/29/2008 1:12 PM Brian
The approach you need to take is a bridge then; take a look at AJAX bridges, which require some extra work to call a third party. AJAX can't directly call an external web service.

# re: Create AJAX-Enable WCF Service 1/16/2010 9:18 PM Moez Mousavi
What if SVC file created by visual studio? I can't edit it

# re: Create AJAX-Enable WCF Service 6/6/2011 11:59 PM Puneet Singhal
I am facing an issue with the JQUERY client side call to WCF service.
If WCF service is part of same project then it works absolutely fine, But If my WCF project is different then calling the WCF service is not working always sending me null or "". I am not able to trace where the issue is either in WCF service or calling. Please guide me on the same.


# re: Create AJAX-Enable WCF Service 7/21/2011 8:34 PM Chanel Diaper Bags
I love to read this type of stuff. Good and attractive information I take from it..Thank you for posting such a nice article.

Post A Comment
Title:
Name:
Email:
Website:
Comment:
Verification: