How to fix the Server Side Web API Error 'contains cycles and cannot be serialized if reference tracking is disabled'

In this article we see How to fix the Server Side Web API Error 'contains cycles and cannot be serialized if reference tracking is disabled', at the Server Side of our SPA application :

 How to fix the Server Side Web API Error 'contains cycles and cannot be serialized if reference tracking is disabled'

The serialization error that we're taking care of here, is originated when a Data Model contains an object with a self-reference property , that means, it references an entity of the same type of the containing class, or the more usual case, when we have relationships between several objects, which are referenced by others in such a way that is created a circular reference.

For example, let's say that on our SPA's server side , we have the following data Model , in which a "Blog" has a reference to its "Blogger" , and this later owns in turn many "Blogs":

That means, if you open some Blog , and open its Blogger property, you will then see the Blogs that the Blogger owns, and , between them , the original Blog that you opened earlier, and that is a circular reference.

This can happen for instance, when you have a WCF service or a Web API which use eager loading:

The corresponding MSDN article addressing this "contains cycles and cannot be serialized if reference tracking is disabled" error  takes on account only the former study case, in which an entity references itself: let's say, a "Person"  contains a property referencing some other "Person":

MSDN states that the solution is to append to the serialization DataContract Attribute the "IsReference" boolean value set to "true". But in most cases, you're prone to find the second XML-JSON serialization case, in which many objects are related by ONE-TO-MANY relationships between them, as the following:

To solve this problem,  make a list of the classes that are REFERENCED by other classes,  the entities which are at the " 0 .. 1 " side of the one-to-many relationships. In our example, there are just two classes that behave like that: the Blogger entity  and the Blog one, sonce the "Comment" class is not referenced anywhere.

Therefore, go to the classes files and append to the DataContract attribute the "IsReference" set to true, as follows:

Then the reference tracking will got enabled and the cycles will be fixed.

In addition, if you like, it's useful to define "Metadata classes" and set the Attributes there: something  like this:

After re-running the SPA's Server Side REST service, the WCF or WebAPI will render the data avoiding cycles :

The snapshot shows that a "Blog" containing a "Blogger" property,  has a self reference and tries to reference itself, but it will be use instead the reference " z:Id=i1 " , avoiding a cycle. 

The same thing occurs for the "Comments" object, while trying to reference the containing "Blog".

Hoping it will help you...

By Carmel Shvartzman

עריכה: כרמל שוורצמן

How to Build Single Page Applications (SPA) for mobile and tablets using MVC 4

In this article we describe Step by Step How to Build Single Page Applications (SPA) for mobile and tablets using MVC 4.  We'll use Visual Studio 2012 templates and scaffolding in order to create a fully functional SPA web application in just 10 minutes. Later, you could adapt this SPA application to your necessities. The server side will be a Web API using REST , while the client side will be a SPA app . Our SPA web page will look like this:

From time now, everything has been moving undoubtedly from desktop applications to the Web World Apps. However, nowadays web applications are facing several problems like bad user experience due to web page re-rendering, poor performance because of page reloads and constant re-transmission of data on user interactions, and lack of offline support (meaning that no server connection implies no client alive).

Single-page applications (SPA), or single-page interfaces (SPI), are web applications built on a single one web page, with the intention of provide the user with a desktop application experience, replicating a desktop environment in the web browser. That means that all SPA code is rendered in a single web page load, and can be run on different devices like smartphones, tablets and of course desktops.  SPAs are written in JavaScript , do not require page reloading, and use specialized frameworks like AngularJS, Knockout and more.

Some examples of SPAs are Google Maps, Gmail,  iCloud, GitHub, Google Drive, Hotmail, and Soundcloud . The term "SPA" was first used by Steve Yen in 2005, but the first known experiments on SPA Apps are the 2002 Stuart Morris self-contained website at  slashdotslash   (works only on IE6)  ,  and the US patent by Lucas Birdeau, Kevin Hakman, Michael Peachey and Evan Yeh , describing a single page application implementation. 

SPA apps have therefore several important features like:

1) SPA apps respond like native applications : with minimal response time gained by moving data and processing from the server to the client, and moving business logic to the client : this way, only data validation and permanent storage are located on server side.

2) SPA's bandwidth is minimal : communication with the server Ajax's done , usually in very small JSON  requests. 

3) SPA render like desktop applications :  essentially without server round-trips to retrieve HTML.

4) SPAs are accessible applications : users can use SPAs from smartphones, tablets, laptops etc.

5) SPAs can keep working offline : a SPA can go offline if the server connection falls, and  synchronize the local data with the server afterwards. 

6) No need to download updates : all users need to do is to reload the browser to load the latest version.

7) Navigation between "different" pages is smooth : no page reloading is necessary, since new pages are generated on the fly, without calling the server.

8) SPAs are cross-platform: a SPA works on any operating system . 

Asp.Net  MVC4 comes with the Knockout.js framework, built upon the MVVM two-way data binding software pattern,  which goal is to isolate the UI from the business logic, making the data flow between a ViewModel and Binder in the middle, to synchronize data between the changes made on the View and the Model layer. The ViewModel code replaces the Controller, and makes automatically that synchronization, without knowing neither which View is being exposed, nor where is the data coming from.  

Schematically, MVVM can be put this way:

View: holds the user interface UI with declarative bindings

ViewModel: is a representation of the data, more a Model than a View, holds unsaved data,  and handles the application/presentation logic : as for MSDN, the ViewModel 

"decouples the View from the Model, and consolidates the business logic into the ViewModel and the Model where it can be tested"(MSDN)

The difference between presentation and business logic is, Business logic manages data, while presentation logic manages users behavior. 

Model: data validation & business logic:

Build Single Page Applications (SPA) for mobile and tablets using MVC 4

First, open Visual Studio 2012 and create a new Asp.Net MVC 4 Web Application project :

Next, choose the "Single Page Application" option :

After creation, take a look at the new folders & files added to the project:

As you can see, several important files have been added: a CSS stylesheet , 2 Controllers, some .js script files, and most important, the Knockout.js framework.
As for the data Model, the files added are C# classes representing the entities that we'll be using:

The "ToDo" entity has only two properties , besides the ID index : "Title" and "IsDone" :

It also has a foreign key which represents the Many-To-One relationship between a "Todo" object and the "TodoList" to which the object belongs. That means, every Todo object can belong to one and only one TodoList, and every TodoList can have one or many Todo objects in it.

How to Update and Notify the Search Engines about new Content on your blog using Pingomatic

In this article we describe Step by Step How to Update and Notify the Search Engines about new Content on your blog, by using Ping-o-matic , a FREE online tool. 
Here we see how to inform to the Search Engines like Google, My Yahoo, Weblogs.com, Collecta, SkyGrid, Topics Exchange or NewsGator,  that your Blog or Web Site has been updated.
The online WordPress Foundation FREE project called Ping-o-matic, allows you to avoid the frequent situation in which your new Blog content is ignored by search engines for a long time.
In order to solve that problem, Ping-o-matic just sends pings to more than 20 Search Engines , calling them to re-index your Blog or Web Site again, since new content has been added.

With the simple click of a button, all the relevant Search Engines will be notified of your Web Site updates :

Update and Notify the Search Engines about new Content on your blog using Pingomatic

First, browse to Pingomatic.com , to find the following graphic user interface :

Then , type a name to represent your Web Site or Blog, and enter the URL of the Web Page or the Blog Post where you added new content:

You can also add an RSS URL if you wish, but that's optional.

Then select several Search Engines to notify, checking all the "Services to Ping" that you want.

If you don't know which web services are relevant for you, just click on "Check All":







Finally, click on the "Send Pings" button :

Then check whether all Search Engines have been notified of the changes:

The next time you browse to Ping-o-matic, the fields will be filled automatically for you. Just change the URL of the updated post, and that's all.


In this article we learned Step by Step How to Update and Notify the Search Engines about new Content on your blog, by using Ping-o-matic. 
Happy programming.....

      by Carmel Schvartzman

כתב: כרמל שוורצמן