Monday, 18 July 2011

Using WCF with AJAX to Convert ��F to °C in C#


This tutorial shows you how to easily create and consume a WCF service into an AJAX Web Application using ASP.NET and C#

In this tutorial, we will show you an extremely easy way to implement WCF into a Web Page using AJAX. We use Visual Studio 2008 and ASP.NET 3.5 for this demonstration. The Service will allow us to submit a °F value to it, and it will convert that to °C and return that value back to the Web Page.

To begin, we will create a regular ASP.NET Web Application in Visual Studio, then we will right-click the Project in Solution Explorer and choose to Add New Item.. AJAX-enabled WCF Service. Name it FtoC, and wrap the class in a namespace, like so:

using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;

namespace AspNetTutorials.FtoC
{
[ServiceContract(Namespace = "http://aspnettutorials.com/FtoC")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class FtoC
{
// 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]
}
}

Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!

We can keep the same structure, and input our own method:

[ServiceContract(Namespace = "http://aspnettutorials.com/FtoC")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class FtoC
{
[OperationContract]
public static int convertFtoC(int theFahrenheit)
{
return (theFahrenheit - 30) / 2;
}
}

Try Server Intellect for Windows Server Hosting. Quality and Quantity!

We declare the class as a ServiceContract and the method as an OperationContract, exposing it to the outside world.

Next, to use the Service in our ASPX page, we will make a reference to it:

using AspNetTutorials.FtoC;

Then we declare a ScriptManager on the page to handle our AJAX calls and also an UpdatePanel:

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdatePanel ID="UP1" runat="server">
<ContentTemplate>

</ContentTemplate>
</asp:UpdatePanel>

I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.

Next, we can add our ASP.NET controls to the page. We will add a textbox, button and literal:

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdatePanel ID="UP1" runat="server">
<ContentTemplate>
Convert °F to °C:
<asp:TextBox ID="fld_Fahr" runat="server" Columns="3" /><br />
<asp:Button ID="btn_FtoC" runat="server" Text="Convert" OnClick="btn_FtoC_Click" /><br />
<asp:Literal ID="lit_FtoC" runat="server" />
<br /><br />
</ContentTemplate>
</asp:UpdatePanel>

Finally, the last piece of our application is to add the logic to our code-behind, which is a very simple call to the WCF Service, like any other:

protected void btn_FtoC_Click(object sender, EventArgs e)
{
lit_FtoC.Text = FtoC.convertFtoC(Convert.ToInt16(fld_Fahr.Text)).ToString();
}

Now when we run the page, we can instantly get the conversion of Fahrenheit into Celsius.

No comments:

Post a Comment