Integration by manually migrating the code generated in the Reference file

Adding a new WCF service client method guide

Introduction

This guide details the changes required in the migrated application to add or consume a new WCF service method to an already generated code. If you have a service that was already migrated (the code is part of the angular migrated application) but you need to add a new operation to the service, this guide will guide you to do all the required changes in the migrated application to integrate and consume the new service method.

Source Code

Here you can download the source code that is used across the example.

Getting Started with the included source code

To start working with the included code, you need to have the Silverlight development environment ready and configured, and you need to have Visual Studio 2015 installed.

The Silverlight application it's included because the WCF services that will be used by the Angular application (the migrated application) will be published by the Web project in the Silverlight project solution.

To run the Silverlight application you just need to open the solutionfile in Visual Studio 2015, Build the solution and run the application in Internet explorer.

To work with the migrated application, you need to open it in Visual Studio Code. Then, open a Terminal in VS Code and execute:

yarn -> To install all the required dependencies
npm run fullbuild -> to build the application
ng serve -> To run the application

What is a WCF Service

WCF (Windows Communication Foundation) is a framework for building, configuring, and deploying distributed services. The following diagram is a general overview of WCF with Silverlight applications.

Consuming a WCF Service in Silverlight

In the Silverlight applications, when you need to consume a WCF service, you need to add the service Reference to the Silverlight project.

When you add the service reference, a new file is automatically created (not displayed in Visual Studio). The new file by default is named Reference.cs and contains the service client class and all the additional information (methods, events, others) necessary to invoke the service methods.

When the service reference is added to your Silverlight project you just need to create a new service client to use the service, for example:

public static GetGuideServiceClient () : GuideServiceClient {
    return new GuideServiceClient();
}

And with the client instance, you can use the service client methods to do the requests to the service:

private void LoadData()
{
    var proxy = ServiceHelper.GetGuideServiceClient();
    proxy.GetCustomersCompleted += Proxy_GetCustomersCompleted;
    proxy.GetCustomersAsync();
}

void Proxy_GetCustomersCompleted(object sender, GetCustomersCompletedEventArgs e)
{
    var result = e.Result;
    this.model.customers = e.Result;
    this.comboBox.ItemsSource = model.customers;
}

Calling the Async method will execute a sequence of methods implemented in the Reference.cs file and at the end, the communication will be done by using .Net communication mechanism to execute the request to the service.

Consuming a WCF service in the migrated application

As in the legacy application, the migrated application will be using the original WCF services (those services require the changes explained in the compatibility section to make them work with the migrated application).

In the migrated application you will find the same Reference file migrated as Reference.ts. The methods, properties, and others will be the same that the ones from the original file (Reference.cs).

The logic to create the service client will be similar to the one in the Silverlight application:

public static GetGuideServiceClient () : GuideServiceClient {
    return new GuideServiceClient();
}

Then, the use of the client to execute the request:

private LoadData () : void {
      let proxy = ServiceHelper.GetGuideServiceClient();
      proxy.GetCustomersCompleted.addHandler(this.Proxy_GetCustomersCompleted,this);
      proxy.GetCustomersAsync__overload_0();
}
Proxy_GetCustomersCompleted (sender : any,e : GetCustomersCompletedEventArgs) : void {
      let result = e.Result;
      this.model.customers = e.Result;
      this.comboBox.ItemsSource = this.model.customers;
}

As you can see, both codes look similar, and like in the C# code, we can find the execution of the Async method. In this case, in the migrated application, some things change because of the Typescript/JavaScript support of methods overloading, that is why in this case we can see that the async method executed name has the _overload_0 at the end.

The following diagram shows a general overview of how the WCF services are consumed in the migrated application:

Consuming a new service client method in the migrated application

Following the example included with this guide, you will be adding to the migrated application the code required to consume the new service client method. In the Silverlight application, you can see the new Operation with the corresponding compatibility changes applied to make the method compatible with the HTTP requests (the method will return JSON).

[OperationContract]
//// Adding this configuration to be able to use the service from the angular application
[System.ServiceModel.Web.WebInvoke(
    Method = "POST",
    ResponseFormat = System.ServiceModel.Web.WebMessageFormat.Json,
    RequestFormat = System.ServiceModel.Web.WebMessageFormat.Json,
    BodyStyle = System.ServiceModel.Web.WebMessageBodyStyle.WrappedRequest)]
public IList<DepartmentDTO> GetDepartments()
{
    return Data.GetDepartments();
}

In the Silverlight application, the way used to consume the new operation is just to update the Service Reference. Behind the scenes, the file Reference.cs is automatically updated when you choose the option (with the right-click context menu over the service reference folder in Visual Studio) Update Service Reference.

Updating the service reference will create a set of methods, delegates, and sometimes classes that represent the objects transferred in the new operation.

The easiest way to make the new service operation work in the migrated application is to replicate the same methods, delegates, and classes that would be generated in the Reference.cs file if we refresh the reference to the service with the new method.

You can replicate the changes by adding the service reference with and without the new method and compare the changes generated in the Reference.cs. All the methods, classes, delegates, and others added in the Reference file that contains the new method must be added to the Reference.ts file.

Adding The Data Transfer classes

Sometimes, depending on how you develop your Silverlight application, the Objects that will be transfered in the service will be automatically generated in the Reference.cs file. In the case of the code included in this guide, there is a DepartmentDTO class included in the Rerefence.cs file. The If you check the difference between the Reference files you will see that there is a new class DepartmentDTO.

You need to write this class in Typescript in the Reference.ts file.

//Added for the new service client method
@defineClassCustomAttributeMetadata(new DataContractId({
   Name : "DepartmentDTO",
   Namespace : "Infraestructure.DTO"
}))
@ClassInfo({
   classId : "WCFGuideApplication.GuideServiceReference.DepartmentDTO",
   assembly : "WCFGuideApplication",
   implements : ["System.ComponentModel.INotifyPropertyChanged"]
})
export class DepartmentDTO implements INotifyPropertyChanged {
   private IdField : number = 0;
   private NameField : string = null;

   @propertyInfo()
   get Id() : number {
      return this.IdField;
   }
   set Id(value : number) {
      if ((this.IdField === value != true)) {
         this.IdField = value;
         this.RaisePropertyChanged("Id");
      }
   }
   @propertyInfo()
   get Name() : string {
      return this.NameField;
   }
   set Name(value : string) {
      if ((this.NameField === value != true)) {
         this.NameField = value;
         this.RaisePropertyChanged("Name");
      }
   }
   PropertyChanged : SubscriptionEvent < (sender : any,e : {
      PropertyName : string
   }) => void> = new SubscriptionEvent < (sender : any,e : {
      PropertyName : string
   }) => void> ();
   protected RaisePropertyChanged (propertyName : string) : void {
      let propertyChanged : (sender : any,e : {
         PropertyName : string
      }) => void = this.PropertyChanged.toFunction();
      if ((propertyChanged != null)) {
         propertyChanged(this, {
            PropertyName : propertyName
         });
      }
   }
}

Adding new method contract to Service interface (GuideService)

The next change that can be noticed in the Reference.cs is the new method's contracts added to the GuideService interface, so you need to add those methods to the Typescript file.

You need to add the following methods in the GuideService interface in Typescript.

BeginGetDepartments (callback : AsyncCallback,asyncState : any) : IAsyncResult;
EndGetDepartments (result : IAsyncResult) : ObservableCollection <DepartmentDTO>

Adding the EventArgs class

In the next image, you can see that there is a new class added to the reference file after updating the service reference. This class must be manually added to the Reference.ts file.

To add the new class, you have to go to the Reference.ts file and before the definition of the GuideServiceClient class add the GetDepartmentsCompletedEventArgs class as follows.

@ClassInfo({
   classId : "WCFGuideApplication.GuideServiceReference.GetDepartmentsCompletedEventArgs",
   assembly : "WCFGuideApplication",
   implements : []
})
export class GetDepartmentsCompletedEventArgs extends AsyncCompletedEventArgs {
   private results : any[] = null;
   public constructor (results : any[],exception : Exception,cancelled : boolean,userState : any) {
      super(exception, cancelled, userState);
      this.results = results;
   }
   get Result() : ObservableCollection <DepartmentDTO> {
      super.RaiseExceptionIfNecessary();
      return (convertTypeTo <ObservableCollection <DepartmentDTO>>(((this.results)[0]),ObservableCollection));
   }
}

One important detail to notice in the previous class is the use of @ClassInfo decoration. The information defined in the ClassInfo is used for runtime type resolving and will be used for Deserialization/Serialization process.

Adding the service Client properties, handlers, and methods

If you review the new code added to the Reference.cs file, you will notice all the new code added to the ServiceClient class, in this case, following the example code, added to the GuideServiceClient class. Now you need to add this code to make the service work with the angular application. First, you need to add the class properties for the new service method:

In the Reference.ts you will need to add the following properties to the GuideServiceClient class.

private onBeginGetDepartmentsDelegate : (v1 : any[],v2 : AsyncCallback,v3 : any) => IAsyncResult;
private onEndGetDepartmentsDelegate : (v1 : IAsyncResult) => any[];
private onGetDepartmentsCompletedDelegate : (v1 : any) => void;-

Then you need to modify the constructor and add the initialization of all the properties created before.

this.onGetDepartmentsCompletedDelegate = null
this.onEndGetDepartmentsDelegate = null
this.onBeginGetDepartmentsDelegate = null

The next step will be to add the event handler:

Add the following line after the declaration of the GetCustomersCompleted SubscriptionEvent.

GetDepartmentsCompleted : SubscriptionEvent < (sender : any,e : GetDepartmentsCompletedEventArgs) => void>;

After adding the GetDepartmentsCompleted, don't forget to add the SubscriptionEvent initialization in the ServiceClient (GuideServiceClient) constructor. You can follow the example of the GetCustomersCompleted initialization to know where you need to add it.

this.GetDepartmentsCompleted = new SubscriptionEvent < (sender : any,e : GetDepartmentsCompletedEventArgs) => void> ()

The last step to modify the ServiceClient class will be to add the new methods that were automatically generated in the Reference.cs.

The new methods must be written in typescript as follow.

//Added for the new service client method
BeginGetDepartments_ExplicitImplementationOfGuideService (callback : AsyncCallback,asyncState : any) : IAsyncResult {
   return super.Channel.BeginGetDepartments(callback, asyncState);
}
EndGetDepartments_ExplicitImplementationOfGuideService (result : IAsyncResult) : ObservableCollection <DepartmentDTO> {
   return super.Channel.EndGetDepartments(result);
}
private OnBeginGetDepartments (inValues : any[],callback : AsyncCallback,asyncState : any) : IAsyncResult {
   return (convertTypeTo <GuideService>((this),ReflectionHelper.getInterfaceRuntimeTypeInfo("WCFGuideApplication.GuideServiceReference.GuideService"))).BeginGetDepartments(callback, asyncState);
}
private OnEndGetDepartments (result : IAsyncResult) : any[] {
   let retVal : ObservableCollection <DepartmentDTO> = (convertTypeTo <GuideService>((this),ReflectionHelper.getInterfaceRuntimeTypeInfo("WCFGuideApplication.GuideServiceReference.GuideService"))).EndGetDepartments(result);
   return [retVal];
}
private OnGetDepartmentsCompleted (state : any) : void {
   if ((this.GetDepartmentsCompleted.toFunction() != null)) {
      let e : InvokeAsyncCompletedEventArgs = (convertTypeTo <InvokeAsyncCompletedEventArgs>((state),InvokeAsyncCompletedEventArgs));
      this.GetDepartmentsCompleted.toFunction()(this, new GetDepartmentsCompletedEventArgs (e.Results, e.Error, e.Cancelled, e.UserState));
   }
}
public GetDepartmentsAsync__overload_0 () : void {
   this.GetDepartmentsAsync__overload_1(null);
}
public GetDepartmentsAsync__overload_1 (userState : any) : void {
   if ((this.onBeginGetDepartmentsDelegate == null)) {
      this.onBeginGetDepartmentsDelegate = ((v1,v2,v3) => this.OnBeginGetDepartments(v1,v2,v3));
   }
   if ((this.onEndGetDepartmentsDelegate == null)) {
      this.onEndGetDepartmentsDelegate = ((v1) => this.OnEndGetDepartments(v1));
   }
   if ((this.onGetDepartmentsCompletedDelegate == null)) {
      this.onGetDepartmentsCompletedDelegate = ((v1) => this.OnGetDepartmentsCompleted(v1));
   }
   super.InvokeAsync(this.onBeginGetDepartmentsDelegate, <any>null, this.onEndGetDepartmentsDelegate, this.onGetDepartmentsCompletedDelegate, userState);
}

Adding ServiceClientChannel new methods

The next step needed to completely modify the Reference.ts file to be able to use the new service client method is to modify the ServiceClientChannel class. For our example, you will need to modify the GuideServiceClientChannel class and add the new methods that were automatically added to the Reference.cs file.

Now you can see the GuideServiceClientChannel class with the new methods.

export class GuideServiceClientChannel extends ChannelBase <GuideService> implements GuideService {
      public constructor (client : ClientBase <GuideService>) {
         super(client);
      }
      public BeginGetCustomers (callback : AsyncCallback,asyncState : any) : IAsyncResult {
         let _args : any[] = new Array <any> (0).fill(undefined).map((x) => null);
         let _result : IAsyncResult = super.BeginInvoke("GetCustomers", <any>_args, callback, asyncState);
         return _result;
      }
      public EndGetCustomers (result : IAsyncResult) : ObservableCollection <CustomerDTO> {
         let _args : any[] = new Array <any> (0).fill(undefined).map((x) => null);
         let _result : ObservableCollection <CustomerDTO> = (convertTypeTo <ObservableCollection <CustomerDTO>>((super.EndInvoke("GetCustomers", <any>_args, result, ObservableCollection)),ObservableCollection));
         return _result;
      }
      //Added for the new service client method
      public BeginGetDepartments (callback : AsyncCallback,asyncState : any) : IAsyncResult {
         let _args : any[] = new Array <any> (0).fill(undefined).map((x) => null);
         let _result : IAsyncResult = super.BeginInvoke("GetDepartments", <any>_args, callback, asyncState);
         return _result;
      }
      public EndGetDepartments (result : IAsyncResult) : ObservableCollection <DepartmentDTO> {
         let _args : any[] = new Array <any> (0).fill(undefined).map((x) => null);
         let _result : ObservableCollection <DepartmentDTO> = (convertTypeTo <ObservableCollection <DepartmentDTO>>((super.EndInvoke("GetDepartments", <any>_args, result, ObservableCollection)),ObservableCollection));
         return _result;
      }
   }

Adding ServiceClient wrapper class new methods

To support explicit interface implementation, the conversion tool adds a new wrapper class. You need to modify this wrapper class to add some new methods that are required. In the example included in this guide, you need to modify the GuideServiceClient_GuideServiceWrapper class. The following code is the class before the required modification.

class GuideServiceClient_GuideServiceWrapper implements GuideService {
   constructor (public instance : GuideServiceClient) {
   }
   isExplicitInterfaceImplementationWrapper = true;
   BeginGetCustomers (callback : AsyncCallback,asyncState : any) : IAsyncResult {
      return this.instance.BeginGetCustomers_ExplicitImplementationOfGuideService(callback,asyncState);
   }
   EndGetCustomers (result : IAsyncResult) : ObservableCollection <CustomerDTO> {
      return this.instance.EndGetCustomers_ExplicitImplementationOfGuideService(result);
   }
}

We are adding the GetDepartments services method so we need to add the BeginGetDepartments method and the EndGetDepartments.

class GuideServiceClient_GuideServiceWrapper implements GuideService {
   constructor (public instance : GuideServiceClient) {
   }
   isExplicitInterfaceImplementationWrapper = true;
   BeginGetCustomers (callback : AsyncCallback,asyncState : any) : IAsyncResult {
      return this.instance.BeginGetCustomers_ExplicitImplementationOfGuideService(callback,asyncState);
   }
   EndGetCustomers (result : IAsyncResult) : ObservableCollection <CustomerDTO> {
      return this.instance.EndGetCustomers_ExplicitImplementationOfGuideService(result);
   }

   //Added for the new service client method
   BeginGetDepartments (callback : AsyncCallback,asyncState : any) : IAsyncResult {
      return this.instance.BeginGetDepartments_ExplicitImplementationOfGuideService(callback,asyncState);
   }
   EndGetDepartments (result : IAsyncResult) : ObservableCollection <DepartmentDTO> {
      return this.instance.EndGetDepartments_ExplicitImplementationOfGuideService(result);
   }
}

Now, that you have done all the required changes in the Reference.ts file, you should be able to use the new service client method.

Test the new service client method

To test the new service client method, you can do some modifications to the MainPage.ts. You will write a code similar to the one used to consume the GetCustomers method.

Add the following methods to create the ServiceClient instance and execute the GetDepartmentsAsync method.

//Added to test the new sevice client method
private LoadDepartmentsData () : void {
   let proxy = ServiceHelper.GetGuideServiceClient();
   proxy.GetDepartmentsCompleted.addHandler(this.Proxy_GetDepartmentsCompleted,this);
   proxy.GetDepartmentsAsync__overload_0();
}
Proxy_GetDepartmentsCompleted (sender : any,e : GetDepartmentsCompletedEventArgs) : void {
   let result = e.Result;
}

Then you need to add the call of the LoadDepartmentsData method in the MainPage.ts constructor.

public constructor () {      
    super();
    this.LoadData();
    //Added to test the new sevice client method
    this.LoadDepartmentsData();
    //
    this.DataContext = this.model;
    this.InitializeComponent();
    this.AngularComponentId = "WCFGuideApplication.MainPage"
}

With the new changes, you need to compile the code using "npm run fullbuild". Then you can start the application with "ng serve".

To validate that the new service client method is being used you can use the Chrome Developer tools, open the Network tab and after loading the application, you should be able to see the request to the server for the GetDepartments.

Now you are consuming the new service client method.

Resources

You can use the following resources to practice the changes required to add a new service client method

Silverlight application

Angular (migrated) application

PreviousHow to integrate a new service method into the Angular migrated application NextIntegration by creating a custom client

Last updated 3 years ago

Was this helpful?