This tutorial will show you how to create and implement an AJAX-enabled WCF Service into an ASP.NET Web page. WCF (or Windows Communication Foundation) is a union of technologies developed by Microsoft to make it easier and quicker for developers to build distributed applications.
We are going to create a single web page that will allow the input of two numbers from the user, then we will access a WCF Service to make a calculation and return the value back to the Web Page. We will do this using AJAX so that we will get a near-instant response.
To start, create a new Web Application in Visual Studio 2008, and then in Solution Explorer, right-click the Project, choose Add New Item.. AJAX-enabled WCF Service. Name it Service1.svc - you will see that it is added to the Solution Explorer, along with a Service1.cs in the App_Code folder. The .cs file should open upon creation, and look something like this:
using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service1
{
// Add [WebGet] attribute to use HTTP GET
[OperationContract]
public void DoWork()
{
// Add your operation implementation here
return;
}
// Add more operations here and mark them with [OperationContract] |
We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.
This is where we will add our logic to perform the calculation We will add a method to add two numbers together, like so:
[OperationContract]
public Double Add(Double theNum1, Double theNum2)
{
return theNum1 + theNum2;
} |
If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
Notice we specify a static method, and the OperationContract attribute defines it as an operation of this Service.
Now if we move to our ASPX page, we will want to add a ScriptManager to the page to manage all of our AJAX calls behind the scenes. But in order for our Service method to be accessible at page level, we will need to add a Service reference to our WCF Service. We do so like this:
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/Service1.svc" />
</Services> |
Now let's go ahead and create our form. We will use HTML form elements, as we are going to use JavaScript to call our Service method.
<input type="text" id="num1" size="3" /> + <input type="text" id="num2" size="3" /><br />
<input type="button" id="jsSubmit" value="Submit" onclick="AddNumbers()" /> |
Try Server Intellect for Windows Server Hosting. Quality and Quantity!
Nothing much different to a regular ASP.NET Web Application here. Notice we include the handler for the button. Here we are calling a JavaScript function, which we can now add to the page. Add the following to the bottom of the page:
<script language="javascript" type="text/javascript">
function AddNumbers() {
Service1.Add(document.getElementById('num1').value, document.getElementById('num2').value, onSuccess);
}
function onSuccess(string) {
alert('Answer = ' + string);
} |
Here, we are directly referencing the public method we created within the WCF Service. We have access to this via JavaScript because we are using the ScriptManager to expose the Service to page level. We get the response from the method and display it in a JavaScript alert window. We have no need to write any code-behind logic, as all of the functionality is being handled by the Service. We can expand this Web Application by creating more methods (Operation Contracts) in the Service, and then referencing them in the same way via JavaScript.
Our entire Service code looks like this:
using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service1
{
// Add [WebGet] attribute to use HTTP GET
[OperationContract]
public void DoWork()
{
// Add your operation implementation here
return;
}
// Add more operations here and mark them with [OperationContract]
[OperationContract]
public Double Add(Double theNum1, Double theNum2)
{
return theNum1 + theNum2;
} |
We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
Our ASPX page will look something like this:
<html>
..
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/Service1.svc" />
</Services>
</asp:ScriptManager>
<input type="text" id="num1" size="3" /> + <input type="text" id="num2" size="3" /><br />
<input type="button" id="jsSubmit" value="Submit" onclick="AddNumbers()" />
</body>
</html>
<script language="javascript" type="text/javascript">
function AddNumbers() {
Service1.Add(document.getElementById('num1').value, document.getElementById('num2').value, onSuccess);
}
function onSuccess(string) {
alert('Answer = ' + string);
} |
