Use ASP. net ajax to call the WCF Service item Template

Development Platform

1. Visual Studio 2008 SP1

2.. NET Framework 3.5 SP1

3. ASP. NET AJAX

4. IIS 7 or VS integrated Web server [WCF and SVS file configuration]

5. Windows Vista

Introduction

The Windows Communication Foundation (WCF) has many new features to enhance the Microsoft Application Development Platform, especially for communications between applications. In this article, we will learn how WCF is used directly in client JavaScript. This is a cool feature provided by ASP. net ajax. In this article, we will not discuss much about the internal details of WCF, but will focus on how to directly use services in JavaScript. Therefore, we will not discuss how to manage the features of these functions during ASP. NET or. NET runtime.

To demonstrate the theories and facts involved in this article, we will create a solution with two projects. Therefore, you do not need to waste time creating a blank solution and saving it. Now, add a new class library project to the solution. Name the class library ServiceLibrary. Then, add a Web application project to the solution and name it WEBUI. We will see two ways to add a WCF Service that can be called by JavaScript.

1. Use the AJAX-enabled WCF Service item Template

2. Use the service interface definition in the class library

Use the AJAX-enabled WCF Service item Template

Here, we will see a simple and clear way to call a WCF Service in JavaScript. Right-click the Web application project and choose add new project. Select the AJAX-enabled WCF Service item template, name it "HelloWorldService. svc", and click "OK. In this case, the wizard will add a HelloWorldService. svc file as expected to the solution. This file also provides the code separation page. If you open the file in an XML file editor, you will see the following labels:

<% @ ServiceHost Language = "C #" Debug = "true" Service = "WebUI. HelloWorldService" CodeBehind = "HelloWorldService. svc. cs" %>

If you open the background code file, you will see the following code:

namespace WebUI { [ServiceContract(Namespace = "")] [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] public class HelloWorldService { [OperationContract] public void DoWork() { return; } } }

VS 2008 automatically adds some necessary configurations to the web. config file, so you do not need to manually add any configurations to the web. config file. Now, continue and add a HelloWorld () method. This method returns a "HelloWorld" string and adds a [OperationContract] feature for this method. This feature will be explained later in this article.

Now, add a page for the Web application project and name it "HelloWorldTest. aspx ". Drag a Script Manager item from the Visual Studio toolbox to the page. Add a reference to the Service in the ScriptManager label. The following code example is provided:

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

Now, add a button and a textbox to the page, and add an event handler for the button to use JavaScript Functions to call the service. When you compile a service call function, the Visual Studio 2008 HTML editor provides intelligent sensing functions to facilitate the compilation of necessary function calls. The complete HTML code is as follows:

<Form id = "form1" runat = "server"> <Div> <Script language = "javascript" type = "text/javascript"> Function GetValueFromServer (){ HelloWorldService. HelloWorld (onSuccess, onFailure ); } Function onSuccess (result ){ Document. getElementById ('txtvaluecontainer '). value = result; } Function onFailure (result ){ Window. alert (result ); } </Script> <Asp: ScriptManager ID = "ScriptManager1" runat = "server"> <Services> <Asp: ServiceReference Path = "~ /HelloWorldService. svc "/> </Services> </Asp: ScriptManager> <Input id = "btnServiceCaller" type = "button" value = "Get Value" Onclick = "GetValueFromServer ()";/> <Input id = "txtValueContainer" type = "text" value = ""/> </Div> </Form>

Note: When calling a service, we pass two methods: one for callback and the other for error callback. If we need to pass any parameters to this function, these parameters will first be passed in and then callback.

Therefore, if we have a function named getvalue and receive two string parameters, we will use [NameSpaceName]. [ServiceName]. getvalue ("value one", "value two", on_success, on_error); calls this function. At this moment, on_success and on_error indicate both callback and error callback.

1. Technical expert comments ASP. net mvc 1.0
2. Ten effective performance optimization methods for ASP. NET
3. How AJAX is implemented in ASP. NET