Tips and Tricks in a world of Mix

Posts tagged ‘WCF’


Getting images byte[] from MS SQLServer through WCF to Ionic3 Angular4

So , that was quite a challenge.

After saving the images as byte[] pretty neat through the MVC client into the MS SqlServer , I wanted to get them into the app of Ionic3 with Angular4 ..


The problem was –

Well there were several problems –

  1. How to return the data through the http without loosing data in “translation” on the way ?

Solution is in C# WCF before returning it convert to base64 – it will send the data intact through the www traffic.

dto.Logo = Convert.ToBase64String(dal.Logo);

       2.   When we get the data – we need to translate it into the image again :

this post helped me –  Search for the comment with 400 upvotes!

So, in my ts client side – my Ionic3 Angular4 baby ,  I added a function translating the byte[] into a Blob.

Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn’t necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user’s system.

b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || ”;
sliceSize = sliceSize || 512;

let byteCharacters = atob(b64Data);
let byteArrays = [];

for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
let slice = byteCharacters.slice(offset, offset + sliceSize);

let byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);

let byteArray = new Uint8Array(byteNumbers);


let blob = new Blob(byteArrays, {type: contentType});
return blob;

3. Now I started getting those messages from Chrome 

unsafe:blob:http://localhost:8100/55df97ad-0b55-4724-8a4f-83861b87e60a:1 GET unsafe:blob:http://localhost:8100/55df97ad-0b55-4724-8a4f-83861b87e60a net::ERR_UNKNOWN_URL_SCHEME


So I’ve built a pipe as suggested here  in compbination with the DomSanitation suggested here :

So at last I have taken this solution :

import { Pipe } from ‘@angular/core’;

import { Pipe } from ‘@angular/core’;

import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from ‘@angular/platform-browser’;
@Pipe({ name: ‘safe’})

export class SafePipe {
constructor(protected _sanitizer: DomSanitizer) {
public transform(value: string, type: string = ‘html’): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {

switch (type) {

case ‘html’: return this._sanitizer.bypassSecurityTrustHtml(value);

case ‘style’: return this._sanitizer.bypassSecurityTrustStyle(value);

case ‘script’: return this._sanitizer.bypassSecurityTrustScript(value);

case ‘url’: return this._sanitizer.bypassSecurityTrustUrl(value);

case ‘resourceUrl’:

return this._sanitizer.bypassSecurityTrustResourceUrl(value);

default: throw new Error(`Invalid safe type specified: ${type}`);




Added it to declarations in your app.module.ts with class name SafePipe .
And added the pipe on the html template
<img [src]=”company.LogoImage | safe: ‘resourceUrl'”>
And here I am – after two days without sleep I have images from the server side in my app..
Now it’s just about vise-versa – trying to upload those slippery brothers  🙂

Changing Wcf from Anonymous to Windows Authentication – server and client basicHttpBinding sample

This solution has been developed for Intranet and doesn’t take in concert security issues of Internet

I got some client using the Windows Auth but the wcf could read the

So  I had to turn the Windows Auth for wcf also.

The Wcf couldn’t show the services through the new Authentication until I didn’t change the mexHttpBinding to the basicHttpBinding

Server Side :

<binding name="MyBasicHttp" allowCookies="true"
<readerQuotas maxDepth="2147483647" 

<!--<security mode="TransportCredentialOnly">
<security mode="TransportCredentialOnly">
<transport clientCredentialType="Windows" />
<service name="Egged.Tnua.Wcf.ServiceImpl.EventService" 
<endpoint address="" 
binding="basicHttpBinding" bindingConfiguration="MyBasicHttp"
contract="My.Wcf.IServiceImpl.IEventService" />
<!--<endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" />-->
<endpoint address="mex" binding="basicHttpBinding" contract="IMetadataExchange" bindingConfiguration="MyBasicHttp" />


Client Side

        <binding name="BasicHttpBinding_IMyService"
          <security mode="TransportCredentialOnly">
            <transport clientCredentialType="Windows" />
      <endpoint address="http://localhost/MyWcfPublishedName/MyServiceEndpoint.svc"
            name="BasicHttpBinding_IMyService" />
</client>   </system.serviceModel>

Very important – in client in order that the binding would be activated on the endpoint you ought to add its name 

to bindingConfiguration and Name

It’s getting very importnat when there is a lot of data going through and the default binding just isn’t enough.


WTF happened to my WCF ?–Learn to handle the unknown – debug wcf

As a note, you need to learn how to use the WCF logging utilities:

Logging info. – you have a recommended settings just to copy into web.config-

it’s opens in Microsoft service trace viewer that I’ve written about before.

Config Editor (makes it a snap to setup).

Trace viewer. Totally awesome. Allows multiple services (client and server) to trace and can join them and help you analyze all the details. Lets you get to the root of issues really fast. (Cause when there’s a server WCF error, the client is unlikely to get useful data out.)


source –

SvcTraceViewer.exe for Wcf debbuging – Silverlight and WCF – The remote server returned an error: NotFound

Insert into web.config in configuration tag :


    <trace autoflush="true" />
            <source name="System.ServiceModel" 
                    switchValue="Information, ActivityTracing"
               <add name="sdt" 
                   initializeData= "SdrConfigExample.e2e" />

Open the log file : SdrConfigExample.e2e through SvcTraceViewer : (more…)

Create an WCF AJAX-enabled service and read data from external sources


Well, here’s the thing. What I needed to create was a small simple example (POC if you’d like)  of getting information from different external sources, like in Xml or Query String formats.  Requirements :

1)Write the aspx in such a way , that if tomorrow we’d add another type of external input context , I wouldn’t have to change it ( the aspx).

2)No postback aloud – we don’t want the page to render itself each time we hit the button .


My solution was to do it through Ajax-Enabled Web Service . Here is the explanation , you can download the code from here.

To create the ASP.NET client application


1. Open Visual Studio 2010.

2. From the File menu, select New, then Project, then Web, and then select ASP.NET Web Application.

3. Name the Project FillTableFromExternal and click OK.

To create the WCF AJAX-enabled service


1. Right-click the FillTableFromExternal project in the Solution Explorer window and select Add, then New Item, and then AJAX-enabled WCF Service.

2. Name the service MyGetDataService.svc in the Name box and click Add.

3. Open the MyGetDataService.svc.cs file.

4. Specify the Namespace for ServiceContractAttribute as FillTableFromExternal:

namespace FillTableFromExternal
[ServiceContract(Namespace = "FillTableFromExternal")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class MyGetDataService
// Add more operations here and mark them with [OperationContract]

5. Implement the operations in the service.

-Add the OperationContract Attribute to each of the operations to indicate that they are part of the contract.

-[WebGet(ResponseFormat = WebMessageFormat.Json , BodyStyle = WebMessageBodyStyle.WrappedRequest  )]  – is defining in what format the data is returning to the caller .

The following example implements a method that returns MyData object .

MyData object is actually is a basic from of BL . Some separate component , that will be changed if we add some other logic in the future.

public class MyGetDataService
[WebGet(ResponseFormat = WebMessageFormat.Json , BodyStyle = WebMessageBodyStyle.WrappedRequest  )]
public MyData  GetDataFunc(int ReturningTypeEnum)
return new MyData(ReturningTypeEnum);

Adding The Business Logic component


1. Right-click the FillTableFromExternal project in the Solution Explorer window and select Add, then New Item, and then Class.

2. Name the service MyData.cs in the Name box and click Add.

3. Build a constructor :

public MyData(int FormatType)
switch (FormatType)
case 1://Xml
case 2://QueryString

So . in this constructor we are only switching to some logic by a parameter of a FormatType we were asked to return .

The functions are working as some basic type of providers analyzing the incoming data from predefined URI’s .

4.The predefined URI’s  will be defined as private member in the class and added as keys to the web.config – in the future , if the external service will change its location all you’ll need is to adjust a web.config , without any recompilation of the whole together application and the drag of the republishing an so on .

Private member in the class :

private string XmlUri = ConfigurationManager.AppSettings.Get("XmlUri");
private string QueryStringUri = ConfigurationManager.AppSettings.Get("QueryStringUri");

The web.config addition :

<appSettings >
<add  key ="XmlUri" value ="http://localhost:65304/ExternalXml.aspx"/&gt;
<add key ="QueryStringUri"  value ="http://localhost:65304/ExternalQueryString.aspx&quot; />

(as you can see I’ve created the externals inside my project , but in real life you’ll get it from third party).

5. Add some container to carry your data. In my case I’ll have a structure of two fields only  – ( transaction id and status )  , so I’ve chosen the Dictionary and declared it as property :

public Dictionary<string, string> rows { get; set; }

6. Get and Analyze an Xml from predefined url :

private void GetXML(string url)
rows = new Dictionary<string, string>();
HttpWebRequest myWebRequest = (HttpWebRequest)HttpWebRequest.Create(url);
myWebRequest.Method = "GET";
// make request for web page
HttpWebResponse myWebResponse =(HttpWebResponse)myWebRequest.GetResponse();
StreamReader myWebSource = new StreamReader(myWebResponse.GetResponseStream());

string myPageSource = string.Empty;
myPageSource= myWebSource.ReadToEnd();
XmlDocument xd = new XmlDocument();
XmlNodeList xnl = xd.SelectNodes("//new");
foreach (XmlNode el in xnl)
string tran = el.SelectSingleNode("transaction").InnerText;
string status = el.SelectSingleNode("status").InnerText;

rows.Add(tran, status);



Through all the first part of the code we are getting the Xml into myPageSource and than we are analyzing the content to get each child into temporary parameters tran and status , afterwards we are adding it to the rows. Pay attention – I’ve initialized it at the beginning of the function. It’s a property and nothing is needed to be returned.

This ends the Initializing of the MyData Object for Xml Format.

7. Get and Analyze an Query String from predefined Url :

Same logic  , different libraries :

private void GetQueryString(string url)
rows = new Dictionary<string, string>();
HttpWebRequest myWebRequest = (HttpWebRequest)HttpWebRequest.Create(url);
myWebRequest.Method = "GET";
// make request for web page
HttpWebResponse myWebResponse = (HttpWebResponse)myWebRequest.GetResponse();
string tran = System.Web.HttpUtility.ParseQueryString(myWebResponse.ResponseUri.ToString())[0];
string status = System.Web.HttpUtility.ParseQueryString(myWebResponse.ResponseUri.ToString())["status"];
rows.Add(tran, status);

Here we’re ParseQueryString the myWebResponse  , entering the data into temporary parameters and adding it to our dictionary property .

This ends the Initializing of the MyData Object for Query String Format.

Creating Xml output from ASPX


Well , I didn’t have an Xml External Source , so I’ve created one :

1. Right-click the FillTableFromExternal project in the Solution Explorer window and select Add, then New Item, and then WebForm.

2. Name the service ExternalXml.aspx in the Name box and click Add.

3. Delete the files  :  ExternalXml.aspx.cs and ExternalXml.aspx.designer.cs

4. Copy and paste to aspx file :

<%@ Import Namespace="System.Xml" %>
<%@ Import Namespace="System.Text" %>
<script language="C#" runat="server">

void Page_Load(object sender, EventArgs e)
// Create a new XmlTextWriter instance
XmlTextWriter writer = new
XmlTextWriter(Response.OutputStream, Encoding.UTF8);
// start writing!
// Creating the <first child> element
writer.WriteElementString("transaction", "1");
writer.WriteElementString("status", "Decline");
// Creating the <second child> element
writer.WriteElementString("transaction", "2");
writer.WriteElementString("status", "Accept");
Response.OutputStream will stream the xml to the caller by url.

So if we’ll address the url ( right-click the ExternalXml.aspx –> View in Browser ) we’ll get :

<?xml version="1.0" encoding="utf-8" ?>

This is our data , that will be analyzed in GetXML function.

Creating QueryString output from ASPX


1. Right-click the FillTableFromExternal project in the Solution Explorer window and select Add, then New Item, and then WebForm.

2. Name the service ExternalQueryString.aspx in the Name box and click Add.

3. Enter the ExternalQueryString.aspx.cs and add to the Page_Load the query string creation (automatically when called the page will redirect with some parameters (hardcoded just for example in our case) in the url:

private void Page_Load(object sender, System.EventArgs e)
string url = "Default.aspx?";
url += "transaction=" + "10" + "&";
url += "status=" + "QueryStatus1" ;

Lets check it out : ( right-click the ExternalQueryString.aspx –> View in Browser  ) …

What the heck are we getting – we are at our front page ?! That must be wrong..


So the point is that I want to redirect to some existing page , and I know that my front page will be alive , because we ar coming from there , so the only thing that we are interested in here is the address string  after the ? sign .


This is our data , that will be analyzed in GetQueryString function.

Configure the client to access the WCF service


1. Open the Default.aspx page and select the Design view.

2. From the View menu, select Toolbox.

3. Expand the AJAX Extensions node and drag and drop a ScriptManager on to the Default.aspx page.

4. Right-click the ScriptManager and select Properties.

5. Expand the Services collection in the Properties window to open up the ServiceReference Collection Editor window.

6. Click Add, specify MyGetDataService.svc as the Path referenced, and click OK.

(be advised , if the svc is in your project you better add it as relational path – ~/MyGetDataService.svc  , otherwise it may not find your service)

7. Expand the HTML node in the Toolbox and drag and drop an Input (Text) on to the Default.aspx page.

8. Expand the HTML node in the Toolbox and drag and drop an Input (Button) on to the Default.aspx page.

9. Right-click the Button and select Properties.

10. Change the Value field to Show Data.

11. Double-click the Button to access the JavaScript code.

12. Pass in the following JavaScript code within the <script> element.

<script language="javascript" type="text/javascript">
// <![CDATA[
function Button1_onclick() {
var service = new FillTableFromExternal.MyGetDataService();
service.GetDataFunc(parseInt($("#Text1").val()), onSuccess, null, null);
function onSuccess(result) {
function buildTable(tableData) {
var table = $("#grid");
table.html("");  //clear out the table if it was previously populated
var thead = $(‘thead tr’, table);
//create the table headers
thead.append(‘<th>Transaction ID </th>’);
//add the table rows
$(tableData).each(function (key, val) {
var tr = $(‘tr:last’, table);
tr.append(‘<td>’ + this.Key + ‘</td>’);
tr.append(‘<td>’ + this.Value + ‘</td>’);
// ]]>

In Button1_onclick we are accessing our service as has been defined in the ScriptManager –

you can see the reference at :

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

Once the client recognized your Service you’ll have full intelisence for it.

We are accessing the GetDataFunc ,that we’ve written at the very beginning, passing the value of the textbox , using jquery syntax , we’ve added to the page.

buildTable(tableData) – will dynamically build a table using the property of the object  MyData named rows . So from result that we get we are passing the rows property value to the building function  -  buildTable(result.rows);

13. Add some div with table in it to the source code of the aspx :

<div class="centered" >
<table id="grid" ></table>

I’ve already added the class to the div .

This way our table will be at the middle of the page.

Another thing is the grid id of the table – this is the identifier in which we are building the table in the buildTable function  – ("#grid")

14. Let’s add some styling – go to Styles folder , and double-click Site.css.

15. Add to the file :

text-align: center;
div.centered table
margin: 0 auto;
text-align: left;

16.Double-click Scripts folder.

17.Double-click Site.Master

18.Drug and Drop the files into the header of the master – this will allow us to use the JQuery in the web site

<head runat="server">
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
you may do it relative..

That’s about it.

We are pressing F5 –

When we’ll enter 1 and press show data – we’ll get the Xml format to the client.


When we’ll enter 2 and press show data – we’ll get the Query String format to the client.




We used Ajax-Enabled WCF service to get different sorts of input data source .

1) There is no PostBack in our code.

2) When we’ll need to add another type of data – Data Services  or RIA Services or some not invented yet services , we will only adjust the MyData.cs part. I’ve made the handling of the formats in functions , but you can export it to a separated provider component if needed.

3) We are working with JQuery , which is always more fun and quick .

4) Added some styling just for the kicks of it.

You can download the sample code from here


So , if you liked it and used it , say thanks in comments.


Calling a WCF service from Javascript – very good

source :

In a previous post I pointed out how to call an ASP.NET ASMX web service from javascript in the browser. Although this still works fine, the world has moved on to .NET 3.5 and WCF services have now replaced ASMX services. Luckily, these are also callable from javascript although the procedure is now a little bit different. In this sample I presume you can use Visual Studio 2008 and know a little about WCF.


Tag Cloud

%d bloggers like this: