ASP.NET server-side logic and client-side 2D visualization with HTML5

I am doing some research for a project that is kicking off soon and would like some input on what options I have here.

Basically, this is more or less how it should work: The user should be able to draw certain shapes, like polygons and based on different properties, such as position etc. of the shapes, calculations are being performed on the server side and the results are sent back to the client.

I have a .NET class library that contains class representations of the shapes (circle, polygon, lines etc.) as well as all the calculations needed. All this is wrapped up in a project class and serialized into a database because the user should be able to login, save his work, load it at another point in time and continue.

All drawing should be done on the client using HTML5 Canvas and JavaScript and the business logic, such as calculation are done on server side. The issue that I need to resolve here is the two-way communication and sharing of complex (polymorphic) objects between the client and the server and I would like to avoid having one .NET shape-class and one JavaScript shape-class because it results in redundant code.

One possible solution would be to serialize & deserialize the classes into JSON. However, the classes contains quite alot of data (most of which is not interesting for the client) and means alot of data transfered back and forth. This could be resolved using DTO classes but then I am back at having two classes containing common information.

Are there any other solutions/techniques to go for here? Anyone have any experience with this type of problem?

Thanks in advance.


Given that you're using ASP.NET (not MVC), I think adding DataContract / DataMember attributes to your existing .NET classes would be the way to go, along with a client-facing WCF service. That way you can serialize existing classes into JSON, but still select which properties get serialized.

If you're not familiar with data contract/ WCF/ AJAX stuff, this site has some good jumping-off points:

Need Your Help

when click in EditText numberpad comes with footer layout

android android-layout android-linearlayout numberpad

I have made a simple android activity with some edit texts and some TextVies and "header" and "footer" layouts,Now all is working well,but at runtime ,when i click on any on EditText the numberpad ...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.